5 ways to make your (X)HTML Semantic (and therefore better)
Despite the introduction of CSS and XHTML Strict, people are still writing their (X)HTML how they want it to look, rather than what it means. Semantic HTML has many benefits including:
- Screen reader or other accessiblity software can more accurately convey the meaning of the elements on the page
- The whole page can be redesigned without changing a single line of HTML
- Search engines and other crawlers can understand what each section of your page is for
Here is a list of tips to make your HTML more semantic and therefore more extensible and accessible:
1. Use heading levels correctly
The title of the site should be an <h1> tag, the specific page title an <h2> tag. Distinct section titles should be denoted by <h3> tags and subsections/subsubsections should be the lower numbers. Lots of people fall into the trap of saying "but it looks better with an <hn> tag", but they are missing the point of stylesheets entirely. If you want a heading to look different, style it differently instead of using a different tag.
For example, on this page, the site title "DavW's Tutorial Site" is an h1 heading, the page title is an h2 heading, and each of the "10 ways" is an h3 heading
2. Use image titles and alt text (where appropriate)
The title and alt attributes of the img tag are often misunderstood. I find it easiest to think about them like this:
- The title attribute should specify what you would expect to see as a caption or title for the image, if it were to be displayed on it's own without the context of the page. For example, a company logo for "Example Corporation" might have the title text "The Example Corporation company logo", or an icon to state that a document is in Adobe PDF format might have a title text of "Adobe PDF Icon".
- The alt attribute should specify what text should be placed inline with the page, should the image file not be available or not be supported by the user agent. In the company logo example, this might be something like "Example Corporation logo: two interlocking circles surround the company name" (Don't overdo this or visually impaired people may have to sit through minutes of description while the screen reader reads it out. For describing an image like this, once per page is plenty enough). For the Adobe PDF icon example, the alt text might be "(Adobe PDF)" so that if it appears near a link, the user will know that the link points to a PDF file. Don't be afraid to leave the alt text blank (explicitly set to ""). This could be for when the image is purely decorational or is described in the text anyway.
3. Use semantic tags instead of CSS classes
Have you heard of the standard HTML tags <address>, <blockquote>, <code> and <var>. Chances are you haven't heard of all of them, but they're still in the specification for XHTML Strict. Why? Because they are telling you about the nature of the text contained within them. Just as you have probably been taught to use <strong> instead of <b> and <em> instead of <i> there are many more in a similar theme.
It's quite common to see sections like:
<div class="address">
15 Example Road<br />
Exampletown<br />
Some country<br />
</div>
<p class="indent">
<i>Some long quotation</i>
</p>
There are perfectly good built in elements for these, and with CSS you can style them how you like. Here are some useful ones to know:
- <address>
- Defines an address
- <code>
- Defines source code
- <blockquote>
- Defines a large quotation to be formatted in a block
- <q>
- Defines a short quotation to be displayed inline
- <var>
- Defines a variable (as in computer code)
A comprehensive list of standard (X)HTML tags is available on the W3Schools website
4. Linkify the right bit of text
Still, in 2007, we are getting big-name corporate website using "click here" link text. It shows no clue of what is behind the link and is usually without a title attribute either, making it completely unclear without the context where the link is headed.
Use the link text to show where the link goes, for example in the above section I linkified both "comprehensive list of standard (X)HTML tags" and "W3Schools website" to point to the page itself and the site front page respectively. This means anything extracting the links from this page will know that a "comprehensive list of standard (X)HTML tags" can be found through the first link, and the "W3Schools website" can be found throught the second link. It makes no sense to say that "click here" can be found through a link.
5. Use semantic classnames and ids
When you want to indent some text, don't create an "indent" class, ask yourself why you want it indented. If it is because it is an example of something, create an "example" class, if it is a factfile about something, create a "factfile" class. This means if you ever want to, for example, put a border around every example, you dont have to go through the HTML and change every class="indent" to class="indent border", you just need to change the style for "example".
Conclusion
I hope these tips have got you into thinking the right way about writing your HTML code so that your web pages in the future are easier to maintain and more accessible. If you are ever unsure about how to mark up part of a page, just ask yourself "What do I mean?"