site logoTune The Web

Semantic HTML

Introduction

Semantic HTML refers to writing HTML which not only displays as you expect, but also conveys some underlying structure to the web browser. For example this HTML:

<p style="font-size:16px;">My page</p> <p style="font-size:14px;">Welcome to my page</p> <p>Hi, this is my page!</p> <p style="font-size:14px;">History of my page</p> <p>This page started in...</p>

...and this HTML:

<h1>My page</h1> <h2>Welcome to my page</h2> <p>Hi, this is my page!</p> <h2>History of my page</h2> <p>This page started in...</p>

pretty much will display the same contents. However the second snippet of HTML is immediately easier to understand that it is made up of a title (shown by the <h1> tag), and a couple of sub sections with sub titles (shown by the <h2> tags). Semantic HTML makes a page easier to understand, especially for a non-human, such as a search engine crawler. Creating a page that not only looks good from the outside, but is also made up of good structured code, has many benefits and there is evidence these pages are treated better by search engines. Additionally this improves accessibility, with screen readers better able to understand and handle your page.

In the old days, prior to all the standardisation of HTML, web development was mostly about writing whatever you had to, to get the page to display as it should. This often led to a complete mess in the underlying code that was difficult to read and to maintain. Nowadays, with the introduction of HTML5, most browsers having a fairly similar understanding of HTML so there is no need for as many hacks, and there is also an opportunity to structure your HTML code in a semantic way to make it easier to understand.

How to set it up

Using semantic HTML doesn't really require any special set up, but just a better understanding of the HTML5 tags available to you, and some discipline to use them . I highly recommend Matthew MacDonald's HTML5: The Missing Manual, which goes into great detail about HTML5 and the opportunities to write better HTML.

How an HTML page should be structured

As a (very brief) summary of writing good, structured HTML, you should do the following:

This is the basic structure pretty much every page on the internet should follow. The page will display fine without this structure, but doing it properly takes little effort and makes your HTML much easier for the search engine, and for other developers who may work on your site in future, to understand.

Inline styling

The other thing you should do as an HTML developer, is to stop using inline styling, by which I mean specifying the styling in the HTML:

<h2 style="font-size:14px;">Welcome to my page</h2>

It is much better to use CSS to define this

<h2>Welcome to my page</h2>

and then in a CSS stylesheet define what that means:

h2 { font-size:14px; }

As well as cleaning up your HTML code to make this easier to read, it adds consistency across pages, and allows you to change your site's style by updating this in one place. If a particular element does require it's own style then use classes to define this:

<h2 class="special_h2">Welcome to my page</h2>

.special_h2 { font-size:14px; font-weight: bold; }

Support

HTML has always had the basic concept of semantic HTML, but HTML5 really brought this to the for. Support for HTML5 semantic elements is very strong, with only IE 8 or below not supporting them. If you still need to support these browsers you can add this Javascript (to the HEAD and not at the bottom of the page where Javascript normally resides):

<!--[if lt IE 9]> <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->

Semantic HTML is also fully supported by the W3C HTML validator tool.

The Downsides

As support is near universal, and can easily be added to those browser that do not support it, the main downside is the time it would take to upgrade your site, for potentially limited noticeably improvements and potentially to break what is currently working. Certainly any new site or page should be written with Semantic HTML to avoid this issue in future.

You may also not be in control of all the HTML in your page, for example if using some plug-ins or other code written elsewhere.

Summary

Semantic HTML is just good coding practice and there are no real reasons not to use it (on new pages at least), except a lack of understanding or care about the code. There are numerous benefits in terms or improved SEO and accessibility. Learn about HTML5 and use it going forward!

Want to read more?

More resources on Semantic HTML:

This page was originally created on and last edited on .

How useful was this page?