Webforumz Newsletter - July 2007
Articles
The Semantics of Web Design
The push for wholesale adoption of Web Standards has undoubtedly made the web a better place but equally as important, and something which no validator can check for, is semantics. Web standards and valid code make sure that we see what was intended and ensure that as many people as possible can access the information. Thankfully the days of developing different sites for different browsers are behind us and will hopefully stay that way. If every cloud has a silver lining then the opposite is also true and recently there have been more and more sites appearing that are both perfectly valid yet terrible examples of good practice. A lot of them are even adorned with the 'W3C Valid XHTML' badge to prove that they are standards aware and cutting edge. Let us not forget at this point that a layout constructed using tables will validate. A good web designer will know which elements to use and in which situations; this is where semantics come in to play. Semantics are all about meaning. Originally a branch of linguistics, semantics refers to the aspects of meaning that are referred to in a language or code. This is especially applicable to development for the web; there are many HTML elements some of which achieve the same end, visually but it takes knowledge of the whole range of elements to know which element to use in which situation, not only to create valid, aesthetically pleasing websites but also to give meaning to what lies within those elements. Many elements are quite self explanatory, the address element (<address></address>) leaves no doubt over what its intended use is yet it is still rarely used despite the amount of contact information that can be found on the web. Often awareness is as important as knowledge. A quick look over the HTML specification would not do any harm if only to reacquaint yourself with the vast array of different elements available.
Many people ask why it is important to follow modern standards and produce valid mark-up, the same people will undoubtedly ask why it is important to produce semantically rich code. There are a few excellent reasons for this, the first and most important is that of accessibility. For people using assistive technologies to aid them, semantics are invaluable. If there is a paragraph then it will say so; a list of items, it will tell them; if it comes across an address then they will know straight away. If you put everything in a separate table cell with nothing to differentiate one item from the next then their experience will be a frustrating one. From an accessibility standpoint, it is also easier for users to set custom stylesheets if you are using semantically correct mark-up. If they want to see paragraph text or headings styled in a certain way, a larger font size perhaps, then it will be easier to achieve if the site is coded with this in mind. Semantically correct mark-up will also, in most cases, make your site view better on other devices such as mobile phones and PDAs. Another good reason to focus on semantics when developing a site is because it can improve your Search Engine Optimisation. White Hat SEO focuses on clean, light, semantically rich mark-up, making sure that search engines can read your content without there being too much extraneous information. Reducing your mark-up and allowing quick access to the main content of your site will mean more relevant search engine rankings and combined with other techniques will improve your visibility to search engines. Header elements such as <h1>, <h2>, <h3> etc. are very important to search engines as are inline elements such as <strong> and <emphasis>, don't use a span (<span>) or paragraph (<p>) element with an added class, use the proper elements. In truth all elements are important to search engines but these elements are given extra weight than many others and you, as a web designer intent on having your content viewed, would be wise to make good use of elements such as these. There is also one final reason to code this way and that is to improve the ease with which you style your HTML. If you are using CSS for layout then you will understand how important it is to have hooks, often in the form of ids, within each HTML element in order to apply specific styles each element. If you are using the full range of HTML elements then your need to create unique ids and classes will be minimized as you will only have one of many elements on each page. In those rare occasions where you need to change something for whatever reason then you can simply add a class or an id. You will, for example, usually only have one <h1> element or maybe just one set of definition lists (<dl>) which will all be formatted the same way. This will make you life a lot easier and will, again, cut down on unnecessary mark-up. The reasons for focussing on semantically rich code are compelling enough for me to feel that no web designer can afford not to take note of the importance of semantics in web design.
One of the most commonly used elements on the web today is the paragraph element (<p></p>). This element should be used to contain paragraphs of text, nothing else. Take a look at the following code:
<p>Semantics is all about meaning; on the web it is a vital aid to those using assistive technologies.</p>This snippet of code tells us that what lies within this element is a paragraph of text. This may be unimportant to someone who views the web with the latest version of Firefox or Safari but for those with disabilities or those using assistive technologies this information is vital. Now take a look at the following piece of code:
<p> </p>This tells us that we have a paragraph of text containing a non breaking space which is not a paragraph of text at all. This is confusing to anyone using assistive technologies and should be avoided as it is not only semantically worthless but it is also incorrect which is worse than being neutral as it is giving false meaning. This extra space can be created using CSS and will remove the need for this extraneous code.
A common element on any page and often a vital one is some kind of navigation. Often stacked on top of each other or side by side, navigation elements are a great user aid and can make life so much simpler. Very often you will see vertical navigation bars coded like this:
<p>
<a href="link1.html">Link 1</a><br>
<a href="link2.html">Link 2</a><br>
<a href="link3.html">Link 3</a><br>
<a href="link4.html">Link 4</a><br>
</p>
This does not tell us an awful lot about this code. A more semantically correct way of doing this would be to group them together as a list of navigation items. To do this the most common method is to use an unordered list (<ul>), though it could be argued that an ordered list (<ol>) is more semantically correct. Title attributes point out where the links go to, increasing usability:
<ul>
<li><a href="link1.html" title="Look at my first link">Link 1</a></li>
<li><a href="link2.html" title="Look at my second link">Link 2</a></li>
<li><a href="link3.html" title="Look at my third link">Link 3</a></li>
<li><a href="link4.html" title="Look at my fourth link">Link 4</a></li>
</ul>
Here we are aware that there is a list of navigation elements which tells the user more about these links than simply having them in a paragraph. You can then style these list items however you want to, removing the standard bullet points and adding a whole host of effects using CSS. You can make them into a vertical or horizontal list and even replace the text with images all without touching the actual HTML document. Coding in this manner really does give you best of both worlds; you can have a visually rich website that is accessible to almost anyone.
Semantics are great, they allow you power over your design without compromising usability but what about those design elements that need extra mark-up? Rounded corners for example, we can't use JavaScript as that is for behaviour only, when CSS 3 comes in we will have a few options open to us as well (rounded corners and the ability to use several background images on a single element). For the time being, however, we will have to use some extra HTML code. In the real world, web designers have clients to please and objectives to achieve; refusing to do something because it cannot be done perfectly and without impacting accessibility will simply leave you without a job. The way to get around this is to use elements that do not give meaning; that are semantically neutral. There are two elements that you probably use all the time that I have told in this article to stop using in place of more semantically rich elements and they are <div> and <span> elements. They are very useful and are a great tool when it comes to presentation; they split up the page and allow you to style specific things that would otherwise be impossible without negatively impacting the semantics of your site. They are semantically neutral and what they contain is meaningless also, in terms of content, which is exactly what you want. So for those times when you need extra mark-up for presentational purposes, use a <div> or a <span>.
Semantics are an important part of Web Standards, designers wanting to produce attractive and accessible sites have a number of tools in their arsenal, and semantics are another such tool. Many designers are intimidated by semantics and believe that you can produce perfect meaningful code and still have complete control over the design. Web designers have shown how much can be done with CSS without even touching the HTML, hopefully you have now seen how you can improve that HTML document further to give greater meaning to your code, improving accessibility without compromising the design and possibly improving your workflow.