Many people make the mistake of using tags for appearance only in their websites, but with semantics you get the benefit of describing your data as well. This makes it more accessible and of a higher quality, and of course fulfills the main objective; separating content from presentation.

This article is aimed at semantic mark-up beginners, including clients who want to learn more about code so they can ensure their sites are semantically correct. It also shows the mark-up available and it’s usage.

What is Semantic Mark-up

In web development, Semantic Mark-up is the name given to ‘marking up’ (coding) your sites with code that represents the information contained in elements, and is descriptive. More importantly, in my opinion, it makes reading code much, much easier because you can see and understand what is happening, rather that being swamped with meaningless code.

An example would be, say I wish to make an important point stand out by making it bold.
I could use the <b> tag, but as ‘b’ says nothing about the content it holds it is not semantically correct, it simply tells the browser to render the text in bold.

The semantic way would be to use <strong>, as it tell you that the contained code is important and ’strong’.

Another example is <i> for italic, it doesn’t explain what the content represents, however the <em> tag does (emphasis).

Another aspect of semantics is using the correct tags for the correct content, for example, if I want to make a bulleted list I would use the <ul> tag (unordered list). If I wanted to have a main heading I would use the <h1> tag (heading 1).

Why bother

There are many valid reasons for making your mark-up semantic, rather than presentation based, here are the main points in my opinion.

Ease of updating

At some point you are going to want to update the look of your site, making your site semantic will make this task seriously simpler. Take this for example, say you have a site with many pages with lists of content on them, and you want to make the list items have uppercase text, but you have used presentational mark-up:

<p>
-	list item</br>
-	list item</br>
-	list item
</p> 

To do this you would have to go through all of your pages, updating the content to have upper case letters instead of lower. Ouch.

Now consider you used an unordered list:

<ul>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>

Now you could convert to upper case with a simple line of CSS, without touching the mark-up itself.

ul {text-transform: uppercase ;}

Simple, separating content from presentation is definitely beneficial.

Presentational mark-up is inaccessible

Presentational mark-up does nothing to say what the content it holds is for. This can reduce understanding, and meaning, of the text.

You can look at this from a few different ways.

To someone reading the code, for example a web programmer, if a code is presentational it makes it very hard to make sense of. For example:

<font size=”14px” color=”#000”><b>Welcome to the site</b></font>

This would mean very little to anybody reading. What is the text for? What does it represent? The semantic, better way would be:

<h1>Welcome to the site</h1>

Now it actually means something, it is a heading.

You can also see that in the above example the semantic code was much more organised and compact, and would make the file size lower.

Computers understanding the content

If a program wants to understand the code, presentational mark-up does little to help. Semantic mark-up however describes the content making it much easier and more meaningful to a program.

An example would be a screen reader program for the blind. They would not benefit from the presentation of an element, they would rely on what the element is to make sense of it, therefore semantics would be very important in that case.

You should also realise that search engines need to read you page, so by impoving your site’s semantics you are also improving your visibility to the search engines.

Search engine optimisation

Most search engines weight keyword importance by what they are e.g. paragraph text. By using semantics you are essentially telling the search engine what is important, and what is less important. For example, keywords in the headings are deemed more important than keywords in the paragraphs.

Semantic elements – A guide

This section describes and lists common elements, and what they should be used for in web documents.

Block-level elements

Block level elements usually render on a new line, and can contain inline elements and other block elements.

Headings

The heading elements (h1, h2, h3 and so on) should be used for headings in your document.
As the heading number increases, the importance of the heading is reduced.

As a general rule, it is wise to use <h1> once, for the main page title, then use h2 and possibly h3 for the page headings.
But remember, what ever you do, keep it consistent.

Paragraphs

Paragraphs of text should always be wrapped in the paragraph (<p>) tag. The ‘p’ tag. By default, starts on a new line, so this is the correct method of making paragraphs; do not use the <br /> element to do the same thing, as this is not semantic. Example:

Correct usage:

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus libero felis, iaculis vitae, elementum id, laoreet sit amet, elit. Cras iaculis aliquet augue.</p>
<p>Quisque lacus velit, tempus at, faucibus eget, lacinia id, libero. Duis aliquam, eros a consequat imperdiet, sapien ante ullamcorper sapien, id venenatis lacus augue in lorem.</p>

Output:

Incorrect usage:

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus libero felis, iaculis vitae, elementum id, laoreet sit amet, elit. Cras iaculis aliquet augue. <br />Quisque lacus velit, tempus at, faucibus eget, lacinia id, libero. Duis aliquam, eros a consequat imperdiet, sapien ante ullamcorper sapien, id venenatis lacus augue in lorem.</p>

Output:

They make look the same, but the 2nd is not semantically correct, and also does not separate content from presentation, as you are forcing the presentation to be changed with a ‘break’.

Blockquote

Quotation

Used, usually along with ‘cite’, to quote a source of information. By default, the block quote element is displayed as a block level element, and has margins/indentation.

Blockquote can also have the attributes title and cite. Even though it has a ‘cite’ attribute, not many browsers use this, so it is wise to use the ‘cite’ element with it also, so the source is visible.

Example:

<blockquote cite="http://www.source.com">
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus libero felis, iaculis vitae, elementum id, laoreet sit amet, elit.</p>
<p><cite><a href=" http://www.source.com ">http://www.source.com </a></cite></p>
</blockquote>	

Output:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus libero felis, iaculis vitae, elementum id, laoreet sit amet, elit.

http://www.source.com

Inline Elements

Inline elements can usually only contain text, and other inline elements. They do not begin on a new line, like block elements.
I will outline the most common elements, with alternatives for use if you just want to change style; do not use these tags if you are just after the styling and not the meaning of the tag.

Abbr

abbreviated text

The ‘abbr’ tag is used to mark-up abbreviations, and by using its ‘title’ attribute you can display the full meaning as a tool tip.

Acronym

acronyms

The acronym tag works in exactly the same way as the abbr tag, but is specifically for acronyms.

Cite

Citation

Used for referencing a source of information.

Code

Computer code

The code tag should be used when displaying an extract of code, by default some browsers render it in a mono-space font such as courier.

Del

Deleted

If you delete, or retract, some text on your page, but still want it visible, you should use the ‘del’ tag. By default, most browsers show deleted text with a strike-through.

Del can also be a block-level element.

Alternative: <s> or <strike> - strikethrough tag (deprecated), alternatively use CSS - text-decoration: line-through;

DFN

Definition Term

The ‘definition term’ tag is quite uncommon, but is used for defining a term for the first time in a document. It can be used with the title attribute to define its contents.

Example:

<dfn title="Opera's web browser">Opera</dfn> is available on desktop pc's and mobile devices.

Output:

EM

Emphasis

Used for emphasising the text inside. By default the emphasised text is represented with an italic style.

Alternative: CSS - font-style: italic ;

Ins

Inserted text

This tag can be used to identify text you have inserted at a later date, and is especially useful when using along with the ‘del’ tag, so show what you have replaced the deleted text with.

Ins can also be a block-level element.

Kbd

Keyboard instructions

This tag is for marking up keyboard instructions for the user to perform.

Samp

Sample output

This rarely used tag is for marking up sample output from a program/script, for example an error message in windows.

Var

Variable

The ‘var’ tag can be used to indicate a variable name when writing about computer code.

Example:

The users name is stored in <var>$name</var>.

Output:

Strong

Stronger emphasis

Used for a stronger emphasis on the text inside. By default the ’strong’ text is represented with a bold styling.

Alternative: CSS - font-weight: bold;

Lists

There are three types of lists:

UL

Unordered lists, a.k.a bulleted lists. Use these when your list doesn’t need to be numbered. List items in the unordered list are specified with the ‘li’ tag. A popular usage is with navigation links, as they are listed in a ul (and usually styled with css). The blue anvil navigation bar is a UL.

OL

Ordered lists, a.k.a numbered lists. Use this when you want list items (defined again by ‘li’) to be numbered.

DL

Definition lists. These use the tags ‘DL’ (Definition list), ‘DT’ (Definition term), and ‘DD’ (definition description), and are used to show terms and definitions. The list you are currently reading is a definition list! See below for the code.

Definition list example

<dl>
<dt>Term</dt>
<dd>Term definition.</dd>
<dt>Another term</dt>
<dt>Another term</dt>
<dd>Definition for both terms above.</dd>
</dl>

Output:

Term

Term definition.

Another term

Another term

Definition for both terms above.

Ordered list example

<ol>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ol>

Output

1. List item
2. List item
3. List item
4. List item

Unordered list example

<ul>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>

Output

• List item
• List item
• List item
• List item

Basic Semantic examples

Code listing Example

If you wanted to show some code on your web page, to do it semantically you could do the following.

<code>$name = 'Bob'; $name.=' Smith';</code>
When you echo <var>$name</var> it will display <samp>Bob Smith</samp>.

Example Output

As you can see, the code is easy to read and is clearly labelled, even if the difference to the presentation is minimal.

Navigation bar example

A well laid out navigation would look like the following:

<ul id=”navexample”>

<li><a href="http://www.blue-anvil.com/index.php" >Journal</a></li>

<li><a href="http://www.blue-anvil.com/services” >Services</a></li>

<li><a href="http://www.blue-anvil.com/contact">Contact</a></li>

</ul>

Un-styled, this mark-up will output like this:

• Journal
• Services
• Contact

The list based navigation could then be styled via CSS to change the look, read on for more information.

CSS the holy grail

So far this article has focussed on the mark-up of the web page, but it doesn’t end there. Now you know how to write a solid base for a page, you can style the presentation using the power of CSS. This section has some examples.

How to style an element

To style an element, just put the element name in your css document and add styles, for example, have you noticed my ‘code’ elements?

Code goes here

To achieve this effect, I have the following in the style sheet:

code{ styles go here }

This applies to all of the semantic tags, style as you please!

Applying CSS to the navigation example

Earlier, I showed an example navigation list, now we can go a step further and give it some styles!

First let’s remove the bullets from the list:

Ul#navexample { list-style:none; }

We will now see something like this:

• Journal
• Services
• Contact

Now let’s style all of the elements to make a vertical navigation bar with a ‘hover’ effect.

Ul#navexample {
list-style:none;
margin:0;
padding:0;
width:200px;
}

Ul#navexample li {
margin:0;
padding:0;
padding-bottom:2px;
display:block;
}

Ul#navexample li a{
display:block;
text-align:center;
padding:4px;
background-color:#111;
color:#fff;
}

Ul#navexample li a:hover{
	Background-color:#444;
}

Our navigation list now looks like this:

• Journal
• Services
• Contact

Why not try experimenting and see what you can come up with?

Closing statement

I hope this article has helped give you an insight into the world of semantics, and that the points raised benefit you web site’s design.

Feel free to leave any comments related to this article!

Further Reading

I recommend DesignBits “Create a Semantic web page” as a good follow up to this article.

Found this post useful? Why not buy me a coffee!

Related Entries

• Introduction to Microformats + a look at hCard & hAtom
• Window Resize/Mobile Browser Background Bugs
• Using Image replacement techniques
• Wordpress development techniques #2 - Fetching RSS feeds with wordpress
• Wordpress development techniques #1 - Running custom queries using the ‘wpdb’ class

Popular Entries

• Anti-aliased Rounded corners with JQuery
• JQuery Curvy Corners Update (v1.1.1)
• The great wordpress plugin update extravaganza of the year
• Book Review - Learning jQuery
• Back with a New look