What are semantics?

The problem with semantics

Effective understanding comes from effective communication and that can only be achieved from acknowledgement by the receiver. How else do you confirm that the message has got across as intended? We all have different interpretation and understanding of concepts and this is the major weakness of getting semantics right. In other words, you probably never will to some degree.

Addressing the problem using correct semantics

What we, as developers can do, is ensure our markup is written in such a way that we create focus and tone to our messages and we use a correct document structure to achieve this. For once, we will be coming away from CSS and concentrating on HTML.

Half of the problem with semantics is the misunderstanding of certain tags and attributes. There are times when CSS can do a job perfectly well but shouldn't be used because it interferes with semantics.

Below are some Q&A's aimed at the webs' biggest semantic mistakes.

Why should we use <DIV> instead of <TABLE> for layout?

Tables are commonly used to layout websites for a variety of reasons. Many in the industry use them because they work so don't need fixing. They offer cross browser consistency and rigidity so have many apparent benefits.

But...

Tables force the document structure to change. A correct document structure should be readable from the top down when there are no positioning or styles involved, something tables break due to their columnar layout. They also incur an overhead in terms of the amount of HTML you require to achieve the same layout.

A table should be used to display tabular information, something some people go all out to avoid in this day of CSS. If you need to display information and the data requires headers and a summary then use a table. A calendar is a good example of legitimate use.

What's the difference between <DIV> and <SPAN>?

I don't know who coined it but the word is doing the rounds, divitis. It's a case of using <DIV> to wrap everything ready for the stylesheet to manipulate. Think of a <DIV> as a block that contains or wraps a group of elements. Typical <DIV>'s would be headers, navigation bars, content, sidebars and footers. Anything that needs positioning.

A <SPAN> is an inline block. You can wrap a <SPAN> around part of an element, maybe to add a style like the example below.

<div id="header">
  <h1>
    Welcome to
    <span style="color:#ff0000;">my</span>
    site.
  </h1>
<div>

Why should links be in a <UL> list?

In most cases, websites have navigation links to bring the pages together. These links are usually, come to think of it, should be, grouped together. These links then become a list as they are concurrent items. So to mark them up correctly, you include the links into an unordered list and use CSS to position and style them appropriately.

Lists are very accessible for a variety of user agents such as search engines and screen readers. Since this is the case, where better to place the most important aspect of your website, the navigation.

<ul>
  <li><a href="welcome.htm">Welcome</a></li>
  <li><a href="about.htm">About</a></li>
  <li><a href="contact.htm">Contact</a></li>
</ul>

Once you have your list of links, CSS tidies it up.

/* apply styles to list */
ul{
    display: inline;
    list-style-type: none;
}

What's the difference between <STRONG> and <EM>?

CSS is often used to display emphasis by wrapping a <SPAN> around some text and adding font-weight: bold; but this is incorrect unless the bold is a style decision.

Think of <EM> as an accent or raise in pitch to highlight a term when speaking. Think of <STRONG> as a slower, louder statement when speaking. If you're coveying information and need to emphasise or highlight certain terms, use the correct HTML tags to do so.

<EM> is also used as a psssttt..; not really an emphasis, more a whisper, which I believe is valid. Maybe because italics look lighter than straight text on screen so gives the right visual message, but as we know, visual display is only useful for those fortunate enough to see clearly.

What's the difference between <P> and <BR>?

For years, designers have been using <BR> to create paragraphs in text or force elements onto new lines. What a shame the little <P> was forgotten for this purpose. It's such an important element too because it creates a cleaner document structure, identifies paragraphs of text as paragraphs (which you would think is obvious) and also assists devices such as Read-E to better comprehend the page, not to mention the search engine benefits too.

If <P> puts horrible space underneath your paragraphs or elements then use CSS to adjust this.

What's the difference between <UL>, <OL> and <DL>?

Lists are great for conveying information and making data digestible. They are often misused or not even used at all. Designers often create lists by using images and breaks which is unfortunate since the combination of HTML and CSS can do such a finer job of it.

Check out the types of lists below and how they appear.

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

<dl>
  <dt>Computer</dt>
  <dd>3DFX Voodoo 2 Graphics card</dd>
  <dd>Pentium II Processor</dd>
</dl>

The difference between the <UL> and <OL> appear obvious but the <DL> which is a definition list is to be used when individual items have associated sub-items. You could nest the other lists if that fits your model but the definition lists are generally used in the description of items.

What's the difference between <ABBR> and <ACRONYM>?

This is a bit of a grey area as buzzwords evolve from abbreviations to become acronyms. An abbreviation is something like HTML.

<abbr
  title="Hypertext Markup Language">
  HTML
</abbr>

When displaying abbreviations, use the <ABBR> tag along with the title attribute to spell out what the abbreviation represents.

An acronym on the other hand is a bit different because it's an abbreviation that has a meaning in it's own right like radar or laser for example. It's a word based on an abbreviation. Tricky to distinguish I know but take time to think about these things before marking them up.

<acronym 
  title="Light Amplification by 
  Stimulated Emission of Radiation">
  Laser
</acronym>

What's the difference between <CITE> and <BLOCKQUOTE>?

The <CITE> tag is used for citation or referencing a resource. When referring to another websites content or maybe a book, use the <CITE> tag for the statement.

Read
<cite>
  Business Benefits of the Web Standards
</cite> 
at 
<a href="http://blog.tn38.net">
  TN38
</a>

The <BLOCKQUOTE> tag represents long quotations. When quoting information from another resource, wrap the text in a <BLOCKQUOTE> tag and use the cite attribute to link to the author as shown below.

<blockquote cite="http://blog.tn38.net">
  ...but the information within the two
  most popular META tags, keywords and
  description, is largely ignored by
  Google...
</blockquote>

What's the difference between <CODE> and <PRE>?

<CODE> is used to display computer code in a monospace font. Although I should really use <CODE> for displaying the examples on this page I actually use <PRE> as it preserves formatting such as fixed width fonts, breaks and whitespace. Call it laziness if you like but <PRE> is more useful to me than <CODE> and others agree as I rarely see <CODE> used.

What's the difference between the ALT and TITLE attributes?

This is one of the biggest mixups I come across and it affects most websites so let's set this straight.

The alt attribute is used to represent alternative text for elements that may be inaccessible such as objects, forms and mostly images. That's all they are for, replacing elements. I switch images off when browsing the web on my phone for example.

The title attribute is the descriptive one where you can add your information describing an element to assist understanding. The tooltip you see when you hover over an image in IE is caused by the alt attribute. Not all browsers show this so if you intend to create a useful tooltip, please use the correct attribute which is title.

Finally...

I've covered the biggest semantic points above but there are many more such as the way you should word your copy to be easy to understand, written plainly and clearly etc.

It's a common misconception that we all know HTML. In fact, syntax apart, few people really use HTML properly. Laziness plays a part on my side although commercially I would always do my utmost to be spot on but there is a lot to learn when building a better website.

Semantics play a major part in accessibility and usability and is something all developers should spend more time to fully understand.

Further reading

• Accessify.com
• W3 text structure