Semantics
Semantics simply means trying to make sure your documents mean something, even if CSS is not available, even if your document is being displayed on a device that does not use the same default styles as you expected, or if it is being interpretted through a non-visual medium, such as braille or speech.
The idea is simple. Use the right elements for the right tasks. Browsers understand what those elements mean, and they can use many different techniques to convey that meaning to the user. But that only works if you use the elements the way they were meant to be used.
For example, the DFN element is usually shown in italics. Assume that you want to display italics text, to emphasise it. You could use the DFN element. But that makes no sense, since you are not defining anything. You are emphasizing it. You could also use the I element, since that will always display in italics (assuming the browser can display italics). However, this means nothing. It does not emphasise the text. It just displays it in italics. What you want to do is to emphasize the text, so use the EM element, that is what it is there for. Most browsers already display this in italics, but just to make sure, you can include this in your stylesheet:
em { font-style: italic; }By using the right elements, you have the benefit that without CSS, the browser will display it emphasised in some way. Some text based browsers may use bold or underline, speech browsers may say that part with a little more stress or volume, but in all cases, the browser can use that information to tell the user that the text is emphasised.
So you can see how using the right elements in a sentence is a useful approach. But it does not end there. It is equally important to use the right levels of headings in the right places, and not to use other elements to replace headings. If you use proper headings, some browsers will even allow users to jump from heading to heading. This is only possible if you actually use proper headings.
The biggest offender when it comes to semantics is the table. I will cover these later, but just accept that tables have a purpose. That is to display tabular data. Unfortunately, due to poor support for styling by some old browsers, tables were often abused to format the page, putting parts of their contents into columns, or specific arrangements. It is common to find pages made out of multiple tables nested inside each other, forcing the page into whatever shape the author desired. Tables were never meant to do this, but to a large extent, they filled a void before CSS was supported well enough to use properly. In fact, in some cases, Internet Explorer 7- still forces tables to be abused to do this. To make a proper semantic page, use tables only for tabular data. They denote a table structure, nothing else. If you want to position parts of your page in strategic places, use CSS, that is what it is there for.
As a final example, try the common navigation used on a page. Typically, pages will have a list of links, and these are often displayed at the top of the page, or to one side of the main content. There are many ways to produce a series of links, but some are much better than others. The list of links is basically just that, a list. So use a list. Give it a heading (such as "Navigation") and then use a bullet or ordered list.
There is no single rule for how to make a semantic document, but just remember that HTML has a lot of element types available, and whenever you think that you would like to make a part of the document look or behave in a certain way, take a look at the list of available elements, and use the one that suits the purpose for what that part of the page represents. If you want to make it look a specific way, style it with CSS, and leave the HTML free to denote what the parts of the page represent, instead of how they should look.
Another factor when making a semantic document is making sure the order of the document makes sense. For example, you should make sure the navigation and main content is sensibly ordered (typically with the navigation either first or last - CSS can then display this wherever you want). Try to keep the markup clear from clutter. Adding in several unrelated blocks (often for advertising) in places where the user would not expect it can cause problems, so try to make sure that the flow of the document still makes sense. The following is a typical example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>My document</title>
</head>
<body>
<h1>My document</h1>
<h2>Section 1</h2>
<p>Some text about the current subject.</p>
<h3>Section 1.1</h3>
<p>Some more text about the current subject.</p>
<p>Yet more text about the current subject.</p>
<blockquote><p>Some quoted text</p></blockquote>
<h2>Section 2</h2>
<p>Some introduction to the data table.</p>
<table>
...contents omited for clarity...
</table>
<h2>Navigation</h2>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/articles">Other articles</a></li>
</ul>
</body>
</html>Last modified: 2 January 2012