» Technical » Semantic HTML
Updated: August 18th, 2009
When writing your website in HTML & CSS, it’s beneficial to mark up your site in a semantic way. This means using HTML tags for their defined purposes, rather than creating lots of meaningless <div> elements in which to attach your code.
By doing this, the browser can attach default styles and meaning to each component of your website. When CSS is turned off, all the content will be presented in a useful way, with headings clearly defining sections and lists will be shown with bullet points to make them clear. Sure, the website won’t be pretty, but that isn’t our objective, we want the content to be accessible by everyone.
Screen readers don’t care too much about your CSS file, they look directly at the HTML and decide what to do from that point, so using meaningful HTML tags will help these users browse effectively. In this article I provide some guidelines on typical semantic uses.
(This document is designed towards HTML 4.01 and similar, HTML 5 will be covered in a different article.)
Headings
HTML provides six header tags to be used throughout your document, but you’ll rarely use more than three or four. You should use them like this:
<h1>Example Website</h1> <div id="content"> <h2>Article Title</h2> <h3>Some sub-section</h3> </div>
The first heading should be wrapped around your website title or logo, located in the top-left of the website. Second level headings are used to describe any major sections of your layout, such as menus or article titles. Third level and below provide sub-sections to your content.
Even if these headings use an image rather than text, they should still be surrounded by the appropiate tag. This way screenreaders and other user tools can still find the article title and use the read out the alternate text you provided to the user.
Menus are lists
Your website navigation is a list of links, so we should mark them up as lists in the HTML too:
<ul id="navigation"> <li>Home</li> <li>Section 1</li> <li>Section 2</li> </ul>
The web browsers will add bullet points and quite a bit of indentation by default but don’t worry, these can be removed with CSS and the exact styling of your navigation is easy to tweak by attaching styles to the <li> tags.
To create nested menus, just place one list inside a list item of another; it’ll be easy to format this exactly as you want it with CSS. You can even use CSS to make drop down menus or use Javascript to make nested menus collapse and expand, if your user case demanded it (although they aren’t a good choice from the accessibility side of things).
If you want a horizontal menu, you can still mark it up as a real list and use the following CSS:
ul#navigation li {
display: inline;
}
You should experiment with the margin and padding around each of the elements and consider using the ‘float’ attribute too.
Links
When referencing other pages on your site, it is worth adding a hyperlink within the document. Any interested readers can click on if they’re interested. All links should be placed inline with the document – you should never be using the phrase “click here”.
You can extra meaning to your links with the title attribute, offering a description that can be read by the user agents. The rel attribute specified the type of the link, such as bookmark, stylesheet or link; see the W3 specification for more details.
Forms
Every HTML coder knows about the usual <input>, <select> and <textarea> but how about the elements in this example:
<fieldset>
<legend>Submission Form</legend>
<label for="fname">Name</label>
<input type="text" id="fname" />
<label for="fcheck">Do you agree?</label>
<input type="checkbox" id="fcheck" />
</fieldset>
The fieldset isn’t necessary to the function of your form, acting by default as a border for the form inputs, guiding the user to what needs to be filled in. The legend becomes part of the fieldset and the whole thing looks like this (Firefox 3.0):
Example fieldset as displayed in Firefox 3.0.
The most important tag here is the <label>, which allows you to attach text to a form element. This benefits accessibility by allowing screenreaders to recognise the structure of the page when describing the fields to the user. In desktop browsers, user can click the label of a checkbox or radio button in order to activate it, enlarging the area of the screen the user must aim for with the mouse and increasing usability.
The <fieldset> and <legend> tags can be difficult to style due to compatibility problems between various browsers and the complex nature in which they overlap.