Semantic uses of <span> HTML tag

W3C defines <span> tag in the same way as <div> tag. I would argue however that <span> has no semantic meaning associated with it, unlike <div>, which denotes some form of a division on a web page.

What is it for?

<span>s are great for adding ‘hooks’ into your HTML documents and lend themselves well to creating bigger aspects of semantic web (such as micro formats).

Unlike <div>, which is a block level element, a <span> is an in-line element, so it is really easy to use it inside the document ‘flow’ without affecting the layout and design.

<span>s are most often found within a bigger ‘soup’ of other HTML tags (see examples for better description).

Appropriate use

<span>s should be used for providing additional meaning to snippets of content which are below the description threshold of other (more semantic) tags.

Furthermore, <span>s provide us with an ability to further describe the content wrapped within otherwise semantic tag.

Example (good use of <span>):

<p class="message">
<span id="hcard-jason-grant" class="vcard">Jason</span> says: <span> is a great way to integrate microformats into bigger semantic document.
</p>

Inappropriate use

I have seen some developers use <span> tags in order to denote a component on a page. These are situations where <div> tag is much better suited for and should be used instead of <span>.

Example (bad use of <span>):

<span class="component">
<p><strong>Jason says:</strong> This is my message.</p>
<p class="reply"><strong>Grant says:</strong>This is a reply to a message.</p>
</span>

The above example is wrong for a number of reasons including:

  1. It does not validate because <p> (a block level element) is inside a <span> (inline element)
  2. Having more than just some straight snippet of content inside any given <span> block usually implies wrong coding of HTML. <span>s should therefore not contain any other tags within themselves, including nesting of <span>s.

Out of any element in HTML specification <span>s are the most semantically neutral.

Many developers claim that <span> and <div> are equivalent, with the only difference that <span> is inline, while <div> is a block-level element.

This, in my experience, is not true, since <div> contains semantic meaning and has been used for a long time now to add much semantic value to interfaces.

Although <span>s on their own are semantically neutral, they can be given much more semantic meaning by associating classes and ids with them.

This is regularly done when coding up micro-formats and works very well, as associating class names with a given <span> the layout of the given content can stay the same, while machines can pick up the exact meaning of the data within the tag perfectly.

Posted in Development, Intermediate | Leave a comment

Web site types

Common misconception about web development today is the idea that there is a ‘right approach’ for web development in general.

I have now worked on various size web sites, privately and through bigger companies, through agencies and on the client side.

My experience has taught me that web sites come in various types and sizes and usually require somewhat different development approach applied to them in order to achieve the optimal result.

There is no ‘one size fits all’ software solution out there.

Essentially, making a small site usually requires radically different approach and architecture to making a massive web site.

Some examples of web site types are outlined below:

A simple ’5 pager’

Typically, a simple, static web site will contain no more than 5 pages of HTML/CSS code to represent the very basic information about a company or an individual.

These types of web sites usually require a simple 1-2 templates, a nice design, simple 1-level navigation (such as a horizontal navigation strip) and a few pages outlining information about the subject at hand.

There is usually not much scope for code reuse on these types of web sites, but you might find an odd microformat will suit some pages (like ‘contacts’ and ‘about’ pages).

These solutions should be implemented as simply as possible from the front and back end point of view and should work very fast.

Static HTML will often suffice, although some reuse of common snippets may be helpful in the case you want to quickly add another couple of pages to the site.

Small CMS and blogs

Often a time people will want to start with a ’5 pager’ and ‘grow’ the site into a bigger web presence.

In order to achieve this, we would need to use a CMS (Content Management System) or a Blog tool (such as this Word Press blog I am writing), both of which will enable us to add pages through a WYSIWYG (What You See Is What You Get) interface.

I have found that ‘growing’ a ’5 pager’ to a larger web presence is often impossible, as the overall structure for each solution can be quite radically different (e.g. how large is the web site going to become?).

Semantics of the web site may be impacted in a negative way and the solution will not be optimal, unless you are really clever in the approach and can envisage exactly what the client may want to do in future (usually requires the client to know what they want, which is often a far fetched wish in my experience).

Within these types of web sites we may come across ‘common components’ which can be subject to heavy semantic treatment and we may be able to build some very clever and scalable data components which can go a long way.

Creating context independent widgets is another possibility with CMSs and Blogs, so the solution is usually radically different from a simple ’5 pager’.

CMSs and Blogs also lend themselves towards being integrated into ‘greater web’ via RSS, so that latest news pieces from a given CMS web site can be found at Google News search for example.

Blog posts could be submitted to Blog Search engines for more visibility and relevant traffic building.

Web applications

These are the types of systems which behave similar to Desktop Software and require heavier presence of the behaviour layer (usually in form of JavaScript and/or AJAX) in order to enable users to carry out richer and more complex interactions through the interface.

A great example of a web application is Google’s GMail, however one could argue that it is not implemented at all in a semantic way, as the solution does not work at all with JavaScript switched off.

Real semantic solutions should not need two version of the system being built in order to cater for different types of users, but this is somewhat of a holy grail which most companies still have not fully grasped (at the time of writing).

Web applications are usually much more complex to implement and require much deeper analysis and understanding of user behaviours, as well as a better insight into the overall technical solution which will underpin the required user needs.

Scalability of web applications is also another aspect which plays a big part in their success, relevance and performance, all of which impact on users and the semantics of the solution.

I also think of collaboration tools, such as BaseCamp, under the web application banner.

They are not social tools in my view as they are there to help enable dispersed groups of users achieve something common together (I define social tools as different in purpose to collaboration software).

E-commerce

E-commerce web sites are basically portals which sells goods of various types.

Having worked on many large and small e-commerce projects by now, I have realised that an entire typical e-commerce web site is on giant pattern.

Each e-commerce web site usually has: product lists, product individual view, product search, basket, ordering process, address management, special offers, etc.

These options, which we can quite easily map as thought processes, very much lend themselves towards standard semantic thinking and implementation.

I would not be surprised to see a standardised e-commerce semantic solution at some point very soon provided by a consortium of developers.

Social tools

Much of the social ‘software’ nowadays is not really software, but rather ‘tools’ with which the users can carry out some simple action (i.e. Twitter allows posting of 144 character long messages to the internet).

Social tools enable users to socialise online and promote their causes (great for marketing), but do not enable people to achieve a common goal together (this is the difference in my view between social software and collaboration software).

Due to their specific nature, social tools lend themselves to different kind of semantic treatments, with lots of RSS and various other social micro formats like XFN and XOXO.

Multimedia sites

Web sites such as YouTube in my view come under the banner of ‘multimedia sites’, since they are entirely about multimedia content, which is nowadays best served through Flash movies, as Flash plugin is most widely installed extra browser feature.

The key aspect of the multimedia web site is the ‘widgetising’ of the content so it can be included in any other web site by users with very little or no technical knowledge.

Multimedia sites today usually have various accessibility related issues, which are still being worked on by and large.

Making videos accessible is fairly tricky and requires quite a bit of work, but it is still semantically possible to do it.

Expert business tools

Custom business tools, such as bespoke software for financial products management, are increasingly being developed with utilisation of web interfaces.

These types of systems are often very complex, contain dense information on screen and require expert user understanding of the products in order to be used.

These systems are equivalent to a Boeing dashboard, which usually only makes sense to a qualified pilot who has gone through rigorous training in order to learn how to use the system.

These kinds of systems are a completely different type of an animal and to lesser extents are affected by common web usability guidelines and best practices.

These systems require very careful development approach as well as people who have very good domain knowledge of the underpinning industry and its relevant standards.

Posted in Architecture | 3 Comments

Emerging semantic web structure

Components and/or widgets (in my view) already play and will play a major role in making up semantic web.

Components can be viewed as building blocks of future web ‘pages’ and are most likely (and already are to a great extend) reusable on any web page – with applications like iGoogle users are able to ‘build’ their own web pages by adding widgets to the page through various interactions including dragging and dropping.

Each component can encapsulate all its attributes (including meaning, structure, data, presentation and behaviour) and can exist on its own by being explicitly linked to various server resources such as pictures and style sheets.

Semantic component structure

Here is an overview of how I am looking at things at the moment and how things may (and already do to a great extent) work within semantic web environment.

Semantic Data Component Structure

Meaning

Outlines what the component means and is placed on the top of the stack because meaning is the most important aspect of semantic web.

Future pages are most likely to be ‘built’ out of components which may reside in any place on the web (i.e. ubiqutous web), hence if the two components on a single page have the same meaning confusion is most likely to arise.

Communicating the meaning of the data we are working with is today’s ultimate goal of good interface developers and generally software engineers.

Structure

HTML is the main (at least the most widely adopted and supported) language with which we can define the structure of a given web page.

There are obviously various ‘flavours’ of HTML we can opt for, but whichever version of HTML we choose to work with, it ought to validate against W3C specifications.

Furthermore, HTML strucuture can (and should) include (wherever possible) microformats.

They are machine readable aspects of semantic web and have already become part of the standards to a great extent and will be adopted more and more over time.

XHTML2 recommendation proposes the use of <section> tag to denote all sections on page.

This nicely leads into future structure of the web within which we could have standalone sections for various mash-up style web sites being developed by developers and integrated into the end system by users.

Data

Data layer is a slightly weird aspect of semantic web as it often contains meaning within it, but due to the fact that most data is not ‘formally’ structured that meaning is mostly lost, hence we need to use layers above to denote structure and meaning of data.

RSS is a good example of (fairly well) structured data which can carry within itself plenty of meaning (RSS used for news for example can be a very structured and semantic way of sharing data).

However, due to the fairly flexible structure of RSS specification, various developers have bastardised it and used it for sharing ‘everything’ through RSS, which, to a great extent, misses the semantic aspects of sharing data through XML feeds.

Plenty of data within web pages these days is also fairly loosely structured. Think about an average paragraph content within a <p> tag in an HTML page.

Presentation

CSS is the main technology we use these days in order to style pages.

They are a very simple technology, which offers massive scope for being misused to a great extent, and that misuse is to a large extent associated with many developers not understanding the nature of semantic web.

Good stylesheet structure and reusability is incredibly important for creating good quality and nice looking semantic interfaces today.

Behaviour

JavaScript is the final part of the current semantic technology layer cake.

It is interesting in its nature in so far that it can ‘dig’ into any of the so far described layers and is therefore subject to all those rules and some more, in order to make it work with less capable browsers.

In order to make the most of JavaScript and enhance the meaning of semantic components which are developed, JavaScript ought to be used in such a way as to add dynamic, behaviour based meaning to those components which help users better understand the purpose of the component and make its functionality more useful.

All of the above put together may make compound semantic web pieces of ‘data’ (semantic objects) which can be used and reused within any context and viewed through any type of browser.

Posted in Advanced, Architecture, Development, Intermediate, Visionary | Tagged , , , , | 1 Comment

Semantic web design process

Outlined below is what seems to be increasingly emerging as the most appropriate process for developing semantic web software.

The below process has been gathered by working alongside some of the leading UK design agencies and through having various conversations with (mostly design agency) managers.

It is also important to outline that this process is favoured by visual design agencies as well as other professional development companies on the market.

Many developers tend to believe this approach is favoured by semantic web developers as they have to ‘worry less about design’, but in my experience this is not the case at all.

Good designers tend to understand the intricacies related to web interfaces and are able to cater for them and design around them in order to make web design aid user experience and not hamper it.

The reason why I am outlining this process is because it could be dubbed the ‘semantic web design process’, where the focus throughout the process is on the meaning, structure and overall needs of users and the business, which are the main purposes of existence of most web sites and applications.

  1. Scope out

    Work out the key functional requirements for the system, without going into deep details – since most of them are likely not to be known at the early stages of system development.

    Write down keywords from the specification papers and start understanding which are the most important functionalities and features which need to be developed within the web site or the web application.

  2. Sketch

    Firstly, in a very rapid process, the idea is to sketch out pages for a web site or web application in order to capture the most important aspects of the system as a whole in some sort of a visual manner.

    Even very experienced developers and architects can struggle to visualise systems before they are actually built.

    At this stage the most important factor is to capture all those obvious and easy to think of aspects of the system which can be sketched out and given to developers to prototype.

  3. Build

    At this stage the idea is to build a wire frame like prototype of the system, based on the sketches drawn out on paper.

    This approach gives developers, as well as the business a solid insight into what features, structure and intricacies the system will contain.

    Prototype build is a tangible asset and can be seen, used and evaluated by the business in order to scope out and work out what is missing from the overall solution.

  4. Test

    This step within the process rests almost entirely upon development of the prototype in flat HTML/CSS and maybe using some JavaScript.

    It is possible to test the system by getting users to point with their fingers to areas of the pages on sketched out paper based wire frames of each page, but this approach is much less precise.

    The reason why it is important to have users test the ‘real system’ is because those kind of tests tend to unearth real problems based on a solution which is as close as possible to the final build.

  5. Refine

    Based on the user testing carried out in user testing stage, refinements to the overall system are made in order to improve usability and relevance of each page.

    It is incredibly important to base changes to the system upon real data and real findings.

    It also goes without saying that selection of users to test the system with is incredibly important, so there is not much point in (for example) testing an e-commerce system aimed at middle aged women with a group of young, tech savvy boys, since they are most likely not to use the system in the same manner as the target group.

  6. Design

    Only at the point when the system as a whole has been developed should you start working on the design for the system.

    Some of the reasons for this are that designers need to know various states the pages can find themselves in.

    Designers also benefit greatly from knowing what kinds of content might be found within each section of each page, in order to design in a manner which works gracefully with all types of content required by the business.

    Another incredibly important reason why it is useful to do design as the very last stage of development is the fact that systems tend to take much longer to develop when every time a wire frame or prototype changes, design also needs to be changed.

    This fact adds no value to the system, but ‘sucks up’ time and resources from the company developing the system greatly, creating impressions that software development is about ‘creating documentation’ rather than creating shipable code.

  7. Deploy

    Deployment is not necessarily the ‘end’ stage of software development, but, if deployed as BETA or even ALPHA version of the system, can and should be treated as the first official live analysis of the system.

    We are really now only at the ‘Scope out’ stage of development, but this time the system is ‘in the wild’ and gathering more real world data and information about real life behaviours of the users on the system, which is incredibly important as it is ‘real’.

    Google and various other web sites have been deploying this approach for years now.

    They also use this approach in order to show their users that ‘something is constantly being updated on their systems’ which users tend to appreciate as it gives them an impression of a ‘constantly improving and active organisation’.

Posted in Advanced, Business | Tagged | Leave a comment

Semantic uses of <div> HTML tag

What is it for?

W3C specification is fairly clear about what the purpose of <div> tag is.

The full quote from W3C HTML specification is:

The DIV and SPAN elements, in conjunction with the id and class attributes, offer a generic mechanism for adding structure to documents. These elements define content to be inline (SPAN) or block-level (DIV) but impose no other presentational idioms on the content. Thus, authors may use these elements in conjunction with style sheets, the lang attribute, etc., to tailor HTML to their own needs and tastes.

Some on-line references say that <div> tag is ‘semantically neutral‘, but I would strongly disagree with this statement. <div> is essentially there to be used for denoting sections of HTML documents.

<div> tag stands for ‘division’ on page, hence it has a semantic meaning to it which can be infered simply from its name.

Appropriate use

<div>, coupled with and id or a class attributes, is semantically very strong statement which gives a meaningful top level structure to any HTML document.

Structure and top level semantics of HTML pages are very important parts of creating web sites of any size these days.

This aspect of web pages not only helps organise the application for end users, but also helps developers organise the application from the developer perspective, aiding overall usability of software (it is commonly forgotten that usability does not only apply to application interfaces, but also to the back end, as well as general day-to-day life).

We need to think about usability all the time, as we are developing products which need to be maintained and upgraded (scaled) in future in the most meaningful (i.e. semantic) way all-round and not just from the interface point of view.

Web developers who know what they are doing, understand that <div> tag is a very powerful tool in web development and create ‘objects’ on screen which are completely encapsulated within their own <div> tags with a relevant id which uniquely identifies that ‘object’ within any page.

Inappropriate use

How ‘granular’ should we go with <div> tag and what is the smallest amount of code we could surround with a <div>?

I tend to implement standards as strictly as possible, since I have found (over years) that approach to be the wisest approach (least error prone and most scalable).

‘Sections’ or ‘components’ on a page should contain at least 3 tags in order to be considered candidates for being surrounded by <div> tag. (I am sure someone will be able to come up with examples of where this does not stand).

It is important to avoid divitis in order to keep interfaces lean, fast performing and avoid code bloat (and therefore decrease maintainability of the application).

There are many examples within which a <span> will work as well as <div>, but semantically will not be as ‘strong’ as <div> and the code will still work, validate and make more sense.

There are also frequent circumstances within which other elements can be treated as a <div> and therefore use of <div> avoided, while achieving the same results.

Great examples of this situation are usually presented wherever ordered or unordered lists are used, in which cases <li> can (in most circumstances) act as a <div>.

A look into future

An HTML construct such as

<div id="news" class="component">Component content goes here<div>

means a lot and creates a very good structure on a modern web page.

Future automated semantic tools could potentially understand these conventions and be able to ‘pick up’ complete components from pages and create mash-ups which can work with content directly pulled in from any web site.

Treating user interface as an API and standardising HTML mark-up (in a similar way in which Microformats community does it) can enable any portion of any interface to become reusable anywhere.

Name spacing CSS files according to the structure of the <div> component based mark-up also leads to better CSS development, leading towards faster performing and much more scalable and easily re-skinable interfaces and generally smaller and leaner implementations.

Example

Good example of using <div> tag and utilising its full semantic power.

Posted in Advanced, Development, Intermediate | Tagged , | 14 Comments

Pareto analysis of HTML

HTML stands for Hyper Text Markup Language. It is a language and it is intended mainly for text. Its initial purpose was to provide meaning to text documents which reside on the World Wide Web.

This initial intention of HTML got somewhat lost in the last 10 years of web development and large majority of web developers are only now waking up to this fact.

I would like to provide Pareto Analysis of HTML as it is used on semantic web development projects on day-to-day basis. Without fully understanding these tags, you are most likely not to be able to create a proper, semantic web site today.

There are around 100 HTML elements which have been made part of the W3C specification. However, only a portion of those tend to be used by developers on day-to-day basis.

Highlighted in the list are those elements which I deem to contain some amount of semantic ambiguity. In other words, developers tends to misunderstand the meaning behind these tags, which tends to lead to their lesser or greater misuse.

I will explain separately the reasons why I think these tags are misused and how they ought to be used.

  1. <div>
  2. <span>
  3. <p>
  4. <a>
  5. <table>
  6. <tr>
  7. <thead>
  8. <tbody>
  9. <td>
  10. <th>
  11. <caption>
  12. <img>
  13. <form>
  14. <input>
  15. <label>
  16. <fieldset>
  17. <textarea>
  18. <select>
  19. <style>
  20. <option>
  21. <legend>
  22. <html>
  23. <head>
  24. <title>
  25. <link>
  26. <meta>
  27. <script>
  28. <body>
  29. <em>
  30. <strong>
  31. <abbr>
  32. <address>
  33. <h1>
  34. <h2>
  35. <h3>
  36. <ul>
  37. <ol>
  38. <li>
  39. <dl>
  40. <dd>
  41. <dt>
  42. <object>
  43. <embed>

With the above list of HTML elements you should be able to semantically mark up pretty much 90% of any small or large web site today.

It is interesting to observe that less than half of the overall HTML specification is used on most web sites today.

This fact suggests that almost half of HTML tag set is obsolete as well as that HTML specification is arguably sufficient for the purposes it was developed for.

Some web developers may disagree with this statement, feeling that HTML is missing elements which could be introduced into HTML5/XHTML2 to make some common tasks easier and faster to complete.

However, in conversations with developers, I have rarely met one who was able to suggest any new tag, letalone one that was meaningful and did not only cover requirements of an average blog site.

Posted in Advanced, Development | Tagged , | 7 Comments