On Semantic Html

The term “semantic” is frequently used in the literature of the web design world. I bet you noticed. If you have not, then you either are not a web developer or you don’t read well enough as one. I will have some recommendations on that in a later post. But in an effort to stay on topic, we should discuss what this term means and how it is important idea for you to keep in mind about your markup.

Definition

At its most simple, the term “semantic” refers to meaning. So the discipline of "semantics" is dedicated to the study of meaning. It is a sub-discipline within linguistics and is all about the correspondence between things like symbols and words and the meaning they point to. You’ll find it at least as far back as Ferdinand de Saussure (that's the earliest book I have that discusses it) and studying in the area makes for an interesting read.

Taken to the web, when someone refers to “semantic Html”, they are referring to Html markup that is rich in meaning. You could also say that the meaning of the markup fits with the text being annotated. Html was meant to be a way of marking up language, so that’s what we mean here. We use tags that are appropriate for the content.

Bad Semantics

Most of the web development community has heard by now that table layout is a bad idea. Whether they agree enough to mess with the annoyance of using CSS floats is another thing altogether. One of the issues with using tables to layout various things on a page is that it is semantically inappropriate; the tags do not match the content. Here is a bad example of semantics that I pulled out of a web design tutorial I found last night.

<table class="Table4Layout" border="0" cellspacing="0">
  <tbody>
    <tr>
      <td class="LeftCol">
        <div class="Label">Menu column</div>
        <a href="#">Menu link</a>
        <br />
        <a href="#">Menu link</a>
        <br />
        <a href="#">Menu link</a>
        <br />
        <a href="#">Menu link</a>
        <br />
        <a href="#">Menu link</a>
      </td>
      <td class="MidCol">
        <div class="Label">Content column</div>
        <span class="LogoX">Website Logo</span>
        <br />
        <br />
        <b>Page heading</b>
        <br />
        <br />
This is a basic two-column web page layout. The left column or the <i>menu column</i> is a narrow band of space (usually between 15-25% of the page width) and is reserved for a menu of hyperlinks leading to other pages on your website. The table used to create this layout employs a single table row containing two table cells.
        <br />
        <br />The right column or the <i>content column</i> takes up the lion's share of the web page width and contains the actual content of each particular page. In a basic two column layout like this, it is common to place the website logo at the top of the content column on each page.
        <br />
        <br />
        <br />
      </td>
    </tr>
  </tbody>
</table>

There are a number of issues here. I’ll mention a few.

• Essentially, he’s creating a two-column layout that can be accomplished with two divs and a little css. Thinking in terms of semantics, looking at the class associated with the left table cell, “LeftCol” is a poor choice because it doesn’t express the actual function of the column, which is to be a menu.
• Let us say you have a menu. That menu has links. Naturally, web designers these days are leaning toward expressing this as some form of list because the semantics fit. In the case above, anchor tags separated by breaks do not a list make.
• “LeftCol” has a title, but the title is not semantically tagged. It is just a <div />, despite the fact that Html has six levels of header tags.
• The same critiques apply to “MidCol”. It itself is neither semantically named nor does it use a decent header.
• There are two paragraphs in “MidCol” and neither use a <p /> tag. More semantic fail.

The Bad and the Ugly

So why is this bad? Why is using non-semantic markup a problem? Here are a few reasons why.

• Semantic Html helps your SEO – Do you think a search engine can parse through the Html above and figure out that the menu is a menu and can index it appropriately? Or the headings? Me neither.
• Semantic Html is usually less bandwidth-intensive – Using tags like <table /> to layout your pages generally increases page size, so you hurt yourself and your users by using more bandwidth.
• Semantic Html is easier to read – Good semantic markup is easy to read. The tag soup that you get with <table /> layouts is never easy to read.
• Semantic Html is usually easier to style - This last point shows some irony as one of the reasons people use table layouts is they think it gives them better control over layout.

Prove Your Mettle

I could critique the above tlil I was blue in the face but this might not be communicated well unless we actually rework that Html. So here is how I would do it in good ol’ Html 4.

<div id="menu">
  <h2>Menu</h2>
  <ul>
    <li><a href="#">Menu link</a></li>
    <li><a href="#">Menu link</a></li>
    <li><a href="#">Menu link</a></li>
    <li><a href="#">Menu link</a></li>
    <li><a href="#">Menu link</a></li>
  </ul>
</div>
<div id="content">
  <img src="foo.jpg alt="website logo" />
  <h2>Page Heading</h2>

  <p>This is a basic two-column web page layout. The left column or the <em>menu column</em> is a narrow band of space (usually between 15-25% of the page width) and is reserved for a menu of hyperlinks leading to other pages on your website. The table used to create this layout employs a single table row containing two table cells.</p>

  <p>The right column or the <em>content column</em> takes up the lion's share of the web page width and contains the actual content of each particular page. In a basic two column layout like this, it is common to place the website logo at the top of the content column on each page.</p>
</div>

It is less text, it is easier to read and there is less gunk for a search engine to parse through. This is an improvement over the Html before, primarily because we have replaced the non-semantic layout with good clean markup. With this nice markup that doesn’t conform to a rigid table element, we could style this in several ways, putting the nav on top, on the right, on the left…whatever. Css gives us that flexibility, and having markup like the above makes it easy to style.

Work with What You Have

But even though this is an improvement over the first bit of markup, there are still issues. For an example, let us look at the menu. The outermost tag is a <div />. With a class name of “menu” it is semantically more meaningful than using a table. Since most sites have menus, it would be nice if Html included a tag for them. Fortunately, a new tag is coming in Html 5 that is perfect for this very thing, the <nav /> tag. But this tag is not only for the future; you can use it today. In a later post I will show you how.

What do you think, dear reader? Are you ready to make the jump to better, more semantic markup? Coming up we will talk about Html 5 and how I plan on using it to improve the markup on this blog. The blog is functional and has decent markup but, frankly, I have a lot of tweaks that I need to make. We will make that journey together and hopefully have some interesting discussions about it along the way.