Semantic HTML
This page was originally created on and last edited on .
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:
- The first thing on a page should be the doctype and for a HTML5 this should be just the below:
<!DOCTYPE html>
This tells the browser this is a HTML5 page. Older versions of HTML used have have long and complicated doc types but those are no longer necessary and will actually cause the browser to assume this is not HTML5 code. - Next up you should open the head tag and state your character encoding (though this can and should also be set in HTTP Header):
<head> <meta charset="utf-8" />
- After this you should have a title, such as this one for this page:
<title>Semantic HTML : Tune The Web</title>
This title is used in the address bar of the browser window, as a tab title, and as the title on search results. As Google displays the first 50 or so characters of the title you should try to keep to under this. Try to make your title a bit descriptive ("Home page" doesn't say very much), but avoid having a long and rambling title that is difficult to read. - After this should come the rest of the meta data, and in particular you should include the meta description:
<meta name="description" content="An explanation of semantic HTML: what it is and why you should use it. HTML5 introduces lots of new semantic elements that web developers should understand about and use.">
This is used in search engine results and if you don't specify one, then the search engine will pick a quote from your page that it thinks is most appropriate and will not will not always get a description right as Rand Paul's site shows!. A meta description should be up to 155 characters and is an opportunity for you to describe the page and explain why your page is the one people should click on when presented with a list of search results that all look fairly similar. - Moving on past the <head> tag, you now should start the main <body> tag and this should start with a <header> tag which is basically a <div> containing all your standard header details (your site icon which is typically in the top left, any navigation...etc) - though there are some who say header tag should not be used like this, even though most websites do use it like that. Navigations items should be in a <nav> tag.
- Every page should have one (and only one) <h1> tag which should be the title of the page, and fairly near the top but after any header and footer items.
- <h2>, <h3>...etc. tags can appear multiple time as sub section headers and should appear in order (e.g. you should not have a <h3> tag directly under a <h1> tag and there should be a <h2> in between).
- And finally we should end with a <footer> tag, which may also contain secondary navigations items which should also be in a <nav> tag (again there are some who say footer tag should not be used like this).
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:
- Optimizing Markup and Styles - excellent chapter from Lara Hogan's Designing For Performance book on this subject.
- Moz guide to title tags.
This page was originally created on and last edited on .
Tweet