Identifying the semantics in your design
Written May 29, 2010. 10 comments.
So you’re sites are validating now and that’s fantastic. Pat yourself on the back. But validation isn’t the only thing you need to be concerned with. Organising your mark-up in an easily manageable semantic fashion is the next part of the puzzle. Though unfortunately unlike the W3C validation service and many other developer assists, there are no tools designed to check if your mark-up is semantic.
This makes it more or less an honour system by which only you (and your peers!) can judge if you’re doing the right thing. But don’t worry it’s very easy, and I’m here to help.
I think one rudimentary skill every good designer should have is the ability to identify the semantic organisation of any given design. No doubt we’ve all seen unnecessary mark-up used where something much simpler, or more semantic, would have sufficed. This article aims to help you identify the simplest mark-up required.
For this purpose I am going to make all references to the design I created below, keeping it very simple and identifying each component and what the mark-up should reflect. These skills are transferable to any design.
Getting Started
The first thing you will need to do is identify each division, which is usually the easiest task although sometimes it can be tricky depending on what you’re trying to achieve.
I’ve shown my divisions below in red. The golden rule to remember here is that the purpose of a div is to divide up primary sections of your mark-up. If you’re using divs for anything more than that then you should have another look at what you’re doing.
That’s right, only four divisions. If you wanted to get really technical you could do it with less, but that would be counter-productive. With this in mind our mark-up will start with this:
<!--/ Start Primary Navigation /--> <div id="primary_navigation"> </div> <!--/ End Primary Navigation /--> <!--/ Start Content /--> <div id="content"> </div> <!--/ End Content /--> <!--/ Start Mid Section /--> <div id="mid_section"> </div> <!--/ End Mid Section /--> <!--/ Start Footer /--> <div id="footer"> </div> <!--/ End Footer /-->
Division 01: The Primary Navigation
Now let’s look at each component and decide what mark-up to use, staring with the top.
This one is a no brainer. It’s a standard unordered list affair, and if we want the logo to be used as a link back to the homepage then we will need to put it in an element. I use an H1 for that purpose. Remember we’re just talking about the mark-up at this stage, and you shouldn’t be concerned with how this looks on a page. That’s what CSS is for.
The mark-up inside our first division (primary_navigation) will look like this:
<h1><a href="">Company X</a></h1> <ul> <li><a href="">Home</a></li> <li><a href="">About us</a></li> <li><a href="">What we do</a></li> <li><a href="">How we help</a></li> <li><a href="">Our products</a></li> <li><a href="">Contact us</a></li> </ul>
Before you point it out, I realise that I’ve included the logo inside the primary navigation division. This is deliberate because I’ve linked the logo to the homepage, and that counts as being part of the primary navigation.
Notice also I haven’t made the menu items upper-case like they are in the design. Again this is a deliberate choice, as that strictly falls under the presentation moniker and can therefore be controlled via CSS.
Division 02: The Content
The next division is the content area. Looking at it carefully and you can see it’s nothing more than:
- a heading
- a few paragraphs of text
- a link (the large button)
- a list of items
There is the temptation to create those 3 buttons as divs floating left of each other, but look at it with a semantic eye for a second and you’ll realise this is nothing more than a list of items. Therefore the most appropriate mark-up to use is just a simple list. There’s no need to employ additional divs here.
The mark-up for this division looks like this:
<h1>Natural, Therapeutic, Medicinal</h1> <p>Lorem Ipsum....</p> <p>Integer massa....</p> <p>Aliquam auctor....</p> <p><a href="">Learn more about this concept</a></p> <ul> <li><a href="">Natural alternatives</a></li> <li><a href="">The right attitude</a></li> <li><a href="">Your energy</a></li> </ul>
Division 03: The Mid Section
The mid section has a few more elements than the previous. But the principal is exactly the same. Look at what the elements actually are, and code accordingly. We are looking at:
- a heading
- a paragraph of text
- a list of items
- another heading
- a form
The mark-up for this division will be:
<h1>Pellentesque velit neque</h1>
<p>More Lorem Ipsum....</p>
<ul>
<li>Lorem ipsum</li>
<li>Corem ipsum</li>
<li>Dorem ipsum</li>
<li>Forem ipsum</li>
<li>Gorem ipsum</li>
</ul>
<form>
...all your form elements here...
</form>
Don’t get caught separating all your form elements into a div stew. There are more then enough form elements available to make styling it a breeze. Here’s just one example.
Division 04: The Footer
Probably the easiest of this tutorial, although it’s probably easier than you think.
All we’re looking at is a list of items, and absolutely nothing more. Even the designer logo in the lower right can be part of the list. Remember, just because the design shows it to be removed from the rest of the items doesn’t mean you have to have it separated in the code. So here’s how I would do it:
<ul> <li><a href="">Privacy policy</a></li> <li><a href="">Contact us</a></li> <li><span><a href="">Web site by Some Organisation</a></span></li> </ul>
What’s going on here then? By using an element that hasn’t been (and won’t be) used elsewhere in the footer (<span>), we can use CSS to position and style the designer’s logo to the extreme right of the footer. You could also achieve this with a class in the <li> but I prefer to minimise my use of classes and ID’s in favour of existing HTML elements where possible.
Putting it all together
As this tutorial is strictly about using good mark-up practices, I won’t paste the CSS here. The next time you start implementing a design, look at each component carefully and see if you can break it down to it’s simplest structure. Then you’ll be well on your way to having easily manageable semantic mark-up, instead of a nauseating div stricken HTML soup. You can see the demo here, and here’s a version without the CSS for what it’s worth.
Note to IE users: For those still using Internet Exploiter (both of you), bear in mind I haven’t tested the demo site in said browser. That doesn’t change anything in this article though, as any positioning quirks or strangeness can be sorted with CSS alone, and not by adding more divs.
Start of pageWho is That Web Guy?
Michael is a veteran web designer / developer / usability evangelist, practitioner of W3C guidelines, and currently head of the web dev unit at Stormbox, a branding and creative communications agency located in Perth, Western Australia.
Awaiting your next lesson.