The Semantic Web

Introduction

Semantics on the web simply means using the appropriate HTML element to mark up content. This article will discuss what exactly this entails in basic HTML terms, but also explores other applications of semantics in markup and other technologies such as the generic XML.

What is the Semantic Web?

The Semantic Web is an extension of the current web in which information is given well-defined meaning, better enabling computers and people to work in cooperation.

Tim Berners-Lee http://www.w3.org/2001/sw/

Semantic markup is subtly different to generating valid markup; a website can be valid but have terrible semantics. This is the main premise behind web standards and the argument about using tables for layout structure.

Basic Semantic Markup

Below are some basic examples of the most common areas of markup and how they should be semantically marked up. There are also examples of common markup of these areas for comparison.

Paragraphs

This is probably the most basic piece of HTML markup that is probably the most frequently used element on a website. This is extremely basic, though some developers think that when moving to table less design they should only use the <div> tag.

<div>This is an incorrect method to mark up a paragraph.</div>

<p>This is how you should mark up paragraphs. Clever 'eh?</p>

Headings

Headings are one of the most important markup tools available in HTML. They have differing default font sizes so without any stylesheets applied a page has a definite structure. Headings give important information to assistive technologies such as screen readers as they are easily searchable and provide invaluable information quickly about the page layout and structure.

There are a total of six levels of headings, however it is recommended that only a maximum of four or five levels should be used per page. The highest level, h1 should only be used once per page, and this is usually appropriate for the company/site name. Site sections should use level 2 headings, h2, again probably only one per page. Level three headings, h3, should then be used to mark up the page sections.

<div id="header">Title of Site.</div>
<p><b>Contact Us</b></p>

<h1>Title of Site</h1>
<h2>Contact Us</h2>

The correct use of headings on a website also helps search engines rank sites and can provide good search page rankings. However, abusing headings can lead to sites being blocked by search engines because this method is used on websites trying to trick search engines for higher rankings.

Lists

Both unordered and ordered lists are powerful markup tools. The main area where unordered lists are useful is the navigation. The navigation area is simply just a list of links and should be marked up accordingly. A lot of websites use a horizontal navigation area, and this is easily achievable with the appropriate CSS applied.

<p>Link 1 | Link 2 | Link 3</p>

<ul id="navigation">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>

</ul>

The semantic markup is more useful when stylesheets are not applied and more powerful in assistive technologies such as screen readers. Screen readers can provide the user with information such as how many links are in the list and provide a means of skipping over the whole area. This is useful for long lists of links, such as those found in the navigation area of a site.

Conclusion

All this may seem extremely straight forward, and that is the whole point; semantics isn't hard, it's just common sense. When marking up a page just keep in mind the semantics of the content and how the page appears when it is unstyled. With these guidelines creating semantic, accessible pages should become easy.

The most common problem when creating a semantic page is knowing all the elements. There is a chart of all the available elements under the reference section.

Unrestricted Access

Web Standards