Category Archives: HTML

Semantic Markup

I came across this site the other day: www.portlander.co.nz and was going through the site till I hit the Our Story page. I was looking at the nicely laid out ingredients list and thought it looked quite nice; there was an image a title and a description per ingredient.

Then I flicked over to the HTML and saw this:

<div class="ingredient_box">
  <img src="cow.jpg" class="ingredient_img">
  <h3>Angus Beef:</h3>
  <p>Our prime Angus, Aberdeen and Hereford beef...</p>
</div>

Each ingredient has its own div and inside the div it has an image, an h3 and a paragraph tag.

I was a bit disappointed, the markup could have been better. I guess in our industry there is no real right or wrong way of coding, everyone thinks differently and therefore codes differently, but code can always be improved and made more semantic.

What does semantic markup mean exactly? To define semantic:

“Relating to meaning in language or logic.”

So basically to sum it up, does your markup have any meaning?

If I disable the CSS and just get the plain old HTML does it still make sense?

Then it dawned on me: why was I disappointed? What did I expect to see? Does this layout have any meaning and how could I make it better?

Going through the list again I decided how I could make this have more meaning.

First things first: It’s a list, it’s stating all the ingredients with an image, a title and a description, but it could be more than that.

It could be a definition list <dl>. The definition term <dt> could be the title and the description could be the definition description <dd>.

The animal images could be turned into a sprite and added to the <dt>.

Again, I’d like to emphasise that there are no right or wrong ways of coding, but there’s always more semantic ways.

I would love feedback on this post! What are your thoughts on the current markup? Would you do something different? If so how?