HTML5 Semantics

By Nathan Segal

In an earlier article we did an overview of HTML5. In this article we're going to look at the changes with HTML5 Semantics. Note that HTML5 is a still a draft and that changes are happening all the time.

In the first section we're going to look at some HTML tags that have been removed, for one of many reasons, such as having a CSS based equivalent, confusing features or because they're problematic for usability or accessibility. Here's the list. Note that it's best to implement these effects by using CSS, if that's available.

All of the elements in this list are obsolete and should not be used:

• applet: Replace with embed or object
• acronymf: Replace with abbr
• bgsound: Replace with audio
• dir: Replace with ul
• isindex: Replace with a form and text field combination
• listing: Replace with pre and code
• nextid: Replace with GUID's
• noembed: Replace with object
• plaintext: Replace with "text/plain" MIME
• rb: Using the ruby base inside the ruby element is enough. Omit rb.
• strike: Replace with del for an edit or use s instead.
• xmp; Replace with code and change escape "<" and "&" characters to "<" and "&"
• basefont
• big
• blink
• center
• font
• marquee
• multicol
• nobr
• spacer
• strike
• tt

If you have a need for frames, avoid using: frame, frameset or noframes. Instead, use iframe. You use this to embed an HTML document inside another one. One such usage of this is for opt-in forms with email autoresponders. In this case it could be used with either the JavaScript or HTML. Here's some more information about the iframe element.

Some More Obsolete Features
If you use these features they'll trigger warnings with conformance checkers. Here are some examples: You should not specify a attribute on an element. Don't use the border attribute on img elements. Instead, use the value of "0" It's better to use CSS. You should not specify language attribute on a element.  In the HTML syntax, if you use an obsolete DOCTYPE this will also trigger a warning. Here's some more information about <a href="http://www.w3.org/TR/2011/WD-html5-author-20110809/syntax.html#the-doctype" target="_blank">DOCTYPE'S</a>


New Elements in HTML5
The following elements have been introduced for better structure:

• section: Can be used for a generic document it works with the h1, h2, h3, h4, h5, and h6 elements.
• article: Used or a piece of content, such as a blog post or magazine article.
• aside This refers to a piece content that's related to the rest of the page, but only a little.
• hgroup: This is used as a section header.
• header: This is used for navigational aids.
• footer: Used for the end of a section and would contain information such as: Author, copyright, biography, etc.
• nav: This is used for document navigation.
• figure: This is used for single unit or self-contained flow content.
Then there are the audio and video elements for multimedia content.
Of the last two elements I want to look at the setting for the video element.
One of the major changes in HTML5 is reduced DOCTYPE

Other changes in include the charset. Previously, it would read like this:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

Now,it would be:

<meta charset="utf-8">

And with links to style sheets and scripts, the old way was:

<link href="assets/css/main.css" rel="stylesheet" type="text/css" />

<script src="assets/js/modernizr.custom.js" type="text/javascript"></script>

Here's the new version:

Now when you put all of that into a document, your page will look like the above.

One interesting new feature is the spellcheck attribute. This is enabled by default on textarea elements, or contenteditable elements. This can be enabled or disabed using the spellcheck attribute.

You have three states to choose from:

  • true: Spell checking is applied to the field
  • false: Spell checking is not applied
  • none: If there's no attribule spell checking will be taken from the parent element

Here's a demo of the spellcheck attribute in action.

One interesting feature is the a element. According to the HTML5: Edition for Web Authors, "the a element may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links)."

Here's an example of how that would work on an advertising block.



Understanding HTML5 Semantics: Part 3

HTML5 Differences from HTML4

Here's an in-depth list of non-conforming features.

HTML5 Cheat Sheets

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
Thanks for your registration, follow us on our social networks to keep up-to-date