Really "meaningful" semantics

When I design a website I think about its style, functionality, and content. When it comes to code, I think about how I can use it to add value to the content. In fact, my content is of little value if I don’t mark it up in a meaningful way. Don’t get me wrong. Content is important, its king, but if it lacks good context it doesn’t say much.

In HTML, mark up is constructed of tags. Tags tell applications, like search engines, how to interpret the content they contain. However, some tags are not semantic and add no value to the content. The <b> tag is an excellent example of this.

Tags

When we use tags like <b> to style our information we are not giving the information meaning. Tags that are style specific only change the appearance of information. Instead we should use tags that add meaning, or semantic ones, like the <strong> tag. The <strong> tag tells applications that emphasis is needed, where as the <b> tag does not. Using semantic tags also help our content by giving it good context.

Every time we put content between tags we are giving it context. Applications can then interpret what the content is, as defined by its context. (eg. content within paragraph tags is within the context of a paragraph) But not all context is good.

Out with the bad

In the real world men don’t use the woman’s restroom, the same goes for my content; headings don’t go in paragraphs. Consider the example. What if all bathrooms were marked as men’s even though some of them are women’s? If taken literally women would have a hard time through life.

The same goes for my code. If I mark up all of my content as a paragraph, and some is not, that portion doesn’t do much good. The content has context but it doesn’t tell us anything important. Many times divisions, spans, and tables replace semantic code in this way. The problem: CSS!

In with the good

With CSS we have more control over how our content looks. If we are not careful, “style” can shape the way we think about code. Take the division tag for example. If we add some CSS, we can create what looks like a heading.

div {
font-size: large;
color: #666;
margin: 10px 0; }

At first glance this seems ok, but screen readers, Google, and other software can’t tell what content is by its appearance.

To fix this we need to think about our content and mark it up for what it is. Then we can apply CSS.

h2 {
font-size: large;
color: #666;
margin: 10px 0; }

However, once we start marking up our content with semantically, we run into another problem; attributes.

Class and IDs

In a perfect world classes and IDs help give extra meaning to content. (Just think about all those microformats.) They are not used exclusively as anchor points for our CSS and JavaScript. Unfortunately, this perfect world does not exist. Many sites add classes and IDs exclusively for styling purposes.

Imagine that you’re back in school. You sign up for a class called “green”, named for its door color. Wouldn’t it make sense to name a class by topic? Green is simply bad context! If we name our classes and IDs the same way they are not doing any good.

Putting it to work

<table  align="center">
<tr>
<td>
<div class=”bigBlue”>This is  my Heading</div>
<span class=”normal”>This is  my first paragraph</span>
<span class=”smallGray”>This  is for Comments</span>
</td>
<td>
<ul>
<li>
<a href="#">Home</a>
</li>
</ul>
</td>
</tr>
</table>

Here we see the problem come to light. On screen everything looks just fine. But the code tells us nothing Important about the content. The content has context but the context is all wrong.

The first thing we need to do is identify what the content really is. Then apply the correct tags to the content.

<div>
<div>
<ul>
<li>
<a  href="#">Home</a>
</li>
</ul>
</div>
<div>
<h2>This is my  Heading</h2>
<p>This is my first paragraph</p>
<p>This is for Comments</p>
</div>
</div>

Not only have I made the code more semantic I have also cut back on the number of tags. I can now add attributes that make more sense.

<div  id="blog">
<div id="sidebar">
<ul id="navigation">
<li>
<a  href="#">Home</a>
</li>
</ul>
</div>
<div class="entry">
<h2>This is my  Heading</h2>
<p>This is my first  paragraph</p>
<p class=”comment”>This is  for Comments</p>
</div>
</div>

Not only does this help us, it also helps applications.

Summary

Context is important! That’s the bottom line. When we decide to replace meaningful code with the ambiguous we are destroying the clarity of our content. Too often we jump into the design process before considering context. We need to take a step back and reform the way we think.