This tutorial will show you how to achieve a well structured HTML page using H tags. If you are a Firefox user then I recommend installing the web developer add-on/extension. After you have successfully installed the extension, navigation to Tools > Web Developer > Information > View Document Outline. This will allow you to view the architecture of your H tags.
HTML Document Structure
When designing a web page it is best to organise content in a structured manner using one H1 tag with nested H2 and H3 tags. Using this approach you can achieve optimum SEO results whilst conforming to WAI accessibility guidelines. For more information regarding accessibility and H tags visit the WAI website help page.
H Tags in Action
During the design of this website and specifically, my blog, I realised that the structure of the page was confusing for visitors with screen readers. The original HTML mark-up for each blog article followed the structure below (I used the Blue Zinfandel theme as the basis for my blog):
- Container - div
- Heading container - div
- Month - h3
- Day - h4
- Title - h2
- Post details - list
- Post body - div
From the list above it is clear that the h3 and h4 tags do not have a parent h2 tag. So I decided to reformat the page using the following structure:
- Container - div
- Heading container - div
- Date - dt
- Month - dd
- Day - dd
- Title - h2
- Post details - list
- Post body - div
The page is now well structured and conforms to WAI guidelines. If you are interested in the modifications I made to the Blue Zinfandel theme then please get in touch.