In the previous posts I've described one of the most basic principles of HTML - It's semantic nature. In this post I would like to give an example of how I look at a document, and how to start working it out. I hope that by using this example I could show you some best practices to structure your document.

The Template

For this example I would use a free template provided by Smashing Magazine.

Before we start I want to bring your expectations down a bit - we're not going to cut this out into HTML. This will be a much shorter example, where I will outline some guidelines on how to recognize structure. Another important note is that I will not touch CSS. This is an HTML post. The basic principle which I'm trying to point out is that when marking up our document, we shouldn't bother about CSS. We should assume that when the time comes, CSS will give us all the tools we need, and thus it is not a concern.

Slicing it up

When I look at a page, I intuitively go through these steps:

1. Identify basic sections of the page
2. Identify main header structure.
3. Identify all list structures on the page.

This is what I found:

• The sections - I've outlines the main sections with a stronger line and subsections with a small one. This is an important step, because when I sit down to write my HTML, I usually start by creating all main sections. By default our sections will be DIVs (at least with xhtml 1.0 - with HTML5 we have a much richer set of elements for this) but some of them might turn into lists if we find a good case for that.

• Headers - I've used 3 outlines to point out the difference, but I might choose to switch the markup's importance. Also notice that there is a correlation between the sectioning and the header's importance, and that it's more important than the header's size on the image. For example, although the word Blog is smaller than the articles' headers, it is actually above them in the hierarchy. It describes the section's content. If this is an inner page in the site (as it is in this template), this will be our H1 - it is the main subject of the page. The rest of the hierarchy is by importance - obviously the article list is the main subject of the page, so their titles will be H2. The sidebar will probably be H3s. So might be the footer, as it is much the same as the sidebar.

• Lists - as I mentioned in the previous post - lists our the best way HTML gives us to describe the relationship between a group of elements. This is why by default, every group of elements on the page should be granted a list, unless we have a better solution for it. The next step will be to determine which list type is best for each group. Menus are almost always ULs. Lists of articles usually OL. A list f categories could be a UL, OL (if ordered by alphabet), or even a DL - if we recognize the post numbers as a description of the category (the term). Also note that I marked up some stuff that we will probably leave as is - for example the list of browsers, which we will probably choose to leave a one image. As I said before - identifying lists has become a second nature for me, and so I mark them up even if they won't be used as such eventually.

But this is just the first step. Now that we've identified our basic structures, we will need to start looking for more semantic structures - such as addresses, contact information, and so on. We should also identify main repetition blocks and mark them up identically, even if they are styled differently across our site. This work could and should take quite a while. At the end, you should end up with an extended an comprehensive document, where every single piece of content is marked up appropriately - this means that you should have no single word that sits in a non-semantic element.