I had been introduced to the concept of Semantic Markup much earlier. But it is one of the things that is not a technical necessity, so I remained at the surface for a long time. I recently got chance to delve into the whys and hows that I would like to share with you, or rather discuss with you. Semantic Markup, by itself, is a vast subject, we will focus on the web design subset of it for the purpose of this article, lets call it Semantic HTML.

What Is Semantic HTML

Semantic Markup is a way of writing your markup so that the reader understands what the data is about. The term reader includes machines like the search engine bots or parsers along with the humans.

Semantic HTML is a way of writing your HTML code such that the HTML tags express what the data is that is enclosed between them. It is about using HTML tags for what they stand for. For example, using h1 instead of div for the title of an article indicates that it is a heading. Ofcourse you can always use <div class="heading"> to make it more expressive, however there two problems to it:

• h1 is globally known as a tag for heading, as a standard, rather than our custom tag. If each of us created custom tags, there would be no common software programs that we would work for us.
• h1 is still more expressive and space-saving than the div

Some of the other examples are using div for block elements which are usually rendered on a new line, cite to cite source of information, p for paragraphs, code for source code and so on. The HTML tags are named such that their meaning is quite apparent.

To be able to follow Semantic HTML, the underlying markup has to be extensible. This is one of the reasons we are slowly migrating to XHTML from HTML. HTML is inherently presentational, i.e., it provides information of how to present the data. Whereas Semantic HTML should convey what is the data about.

Benefits

The two points mentioned earlier are the basic benefits of using semantic code. If we use globally known tags, others understand without any additional effort. Any software program that uses the globally known tags will not be able to understand our page.

A working example of this is that search engines weigh keyword importance according to what they are. For example, and article title enclosed in one of the headings (h1 and its hierarchy) would get higher importance and hence visibility than spans. Semantic HTML enables effective Search Engine Optimization (SEO).

The semantic data extractor is a good demonstration of the possibilities of using Semantic HTML and software automation.

The semantic data extractor is a good demonstration of what can be achieved by Semantic HTML and software automation.

A side effect of excluding presentational information from the semantic markup is that now data and its presentation can be decoupled in implementation. Which means that you can change presentation without touching the data, or apply the presentation to multiple types of data. This is exactly what technologies like CSS and XHTML together achieve. Of course Semantic HTML is not necessary for this decoupling, but provides for by being semantic it enforces exclusion of presentational information.

Benefit To Developers/Designers

Another unintended benefit of Semantic HTML that I have realised is that it can be used for communication between developers and designers in a project. When I, as a content engineer, want to design a page, I first try to realise all the content that has to be in there. Somewhere the content priorities also have to be decided, e.g., primary, secondary, …. Then I prepare pure markup, without thinking about the styles or the presentation. This markup contains two important pieces of information - structure of different content types and different content types to include in the page. If this markup is semantic, then the designer can understand it better, reducing requirements for documentation. I might end up playing both the roles, but it gives me an opportunity to focus on the two different things exclusively.

Nate Koechley talks about Layered Semantic Markup (LSM). LSM is a framework of web technologies with the philosophy of structured semantic markup as core of web development. By building layers of presentation and behavior above the core of semantic markup, the framework builds flexible and future-ready web pages.

The XFN and FOAF projects are extensions of the Semantic HTML that use semantics not only in the tags but also in the attributes. In my opinion they are just a tip of the iceberg of possibilities with Semantic Web.

Epilogue

Semantic HTML is a way of building and participating in the semantic Web. This will ensure higher visibility and future readiness. Semantic HTML also makes your web pages open to automation. However, Semantic HTML is not mandatory, it is a best practice, a code of conduct. The beginning might be a little tough, but the advantages are many, if you follow the Semantic Code.

Share This

↑ Jump up to the comment form

The posts Print In Style, CSS Hacks: Are They Cool or Not?, Toggling Web Trends.., Draft Blogger’s Code of Conduct, Branding your CSS Stylesheets, are related to this post.

Or why not take time out to find out about the author of the post.