For some time, web designers and developers have been talking about the “semantic web”. Ever since table based design went out the window, there has been an emphasis on using CSS to create semantic class names to mark up elements in a way that described the content and not the presentation. This is really an extension of the idea of separation of presentation and content. In “semantic” web design, HTML div tags are used to create the various blocks of content. The CSS class names are created to describe the contents. As a result, you might see a class called “menu” whereas a class name of “red link” would be considered poor design. This is because it describes the presentation and not the content.
The problem with this approach to the semantic web is that there is no standard for how to name your classes or content. This is a problem because one of the key concepts of the semantic web is that based on these tags that describe the type of content, automated systems such as search engines should be able to parse a page and categorize the content. While this sounds good in theory, it has never been possible with the current state of the semantic web. Searching through web sites that have been designed in this fashion, one can find a variety of class names that represent the same kind of content. For example, “menu”, “navbar”, “nav”, and “navigation” all describe navigational elements. Each designer has created semantic class names that technically describe the content but the inconsistency from one designer to another means that the likelihood of an automated system being able to parse the content is pretty slim.
Fortunately, this is one situation that the designers of HTML5 considered. To help solve this problem the designers of HTML5 created new structural elements that describe sections of content as they are commonly used today. While the
<div/> tag is still available in HTML5, it is now intended only for creating a generic block of content. The more specific HTML5 tags should be used in its place where appropriate. Some of these new tags include:
<header/> <footer/> <article/> <aside/> <nav/>
These new elements better describe the content that they contain. They also standardize how these types of content will be tagged. For example, menus will, in HTML 5, always be contained within
<nav></nav> tags. This helps improve the semantic web by creating a standard.
Another feature of HTML5 that improves the semantic meaning of sections of content is the new
<time> tag. This tag supports an attribute called “datetime” which accepts a machine readable formatted date, time or date and time. The goal behind this tag is to semantically note dates and times in your content, while providing a machine readable format that can be used by new applications such as one that adds an event to your calendar. The
<time> tag also has a “pubdate” attribute. Adding “pubdate” to a
<time> tag tells a machine reader that this is the date or time that the article was published. This is a useful attribute when an article may have more than one
These are just a few quick examples of some of the new semantic elements available in HTML 5. It is readily apparent that the designers of HTML5 understand the challenges of building semantically meaningful containers and that they have spent a great deal of time analyzing what elements are needed for today’s web sites. HTML5 is bound to greatly improve the state of the semantic web and will likely make it possible for new applications to be built for gathering information from web content.
Help us spread the word!
If you liked this article, consider enrolling in one of these related courses:
|Sep 12-13||HTML5 Training Course - Introduction|
|Nov 14-15||HTML5 Training Course - Introduction|
|- Classroom - Online|