Blind Acre

This site uses new HTML5 technology. To ensure proper viewing of this site and its content, please use a modern browser such as

Hear us out...

Semantics vs. Presentation in HTML

One of the holy grails in modern web development is separation of content and presentation. This is often understood to mean a separation of HTML and CSS, but it goes deeper than that. In order to take full advantage of the concept, first we need to understand the difference between semantic and presentational markup in HTML. Semantic markup describes the purpose of content, while presentational markup describes how it is rendered on the page. For an example of the difference, let's take a look at two methods of displaying a header on a web page. A semantic approach:

<h1>My Page Title</h1>

The h1 tag identifies this element as a top-level header, but does not dictate how headers should be displayed (font size, color, etc.). The presentation rules can then be controlled in a linked stylesheet instead of inside the HTML. A presentational approach:

<font size="24" color="black">My Page Title</font>

The font tag dictates how the element should be displayed, but does not identify what part of the document the element is (a header, a subheader, a paragraph, etc.). If we want to change the way headers are displayed, we need to change the font attributes for every header on every page of the site. Keep in mind, however, that writing semantic HTML means more than just moving presentation to CSS. Consider the following:

<div class="header">My Page Title</div>

This approach lets us separate content from presentation, since we can control the .header style in CSS; but it's less useful to any software that might make use of the document, since the software would be more likely to look for a primary header in a standard h1 element than a div.header element.

Benefits of Semantic HTML

  • Semantic markup makes it easier to control layouts. Presentational rules can be delegated to linked stylesheets, minimizing the need to modify the documents themselves.
  • It promotes interoperability. Semantic markup allows programs to share, analyze, and process documents more effectively. Modern web developers need to be concerned with more than how the pages look in a browser. We need to consider how well spiders, aggregators, and other applications can make use of our content.
  • Semantic markup is good for SEO. Content in an h1 element provides a hint about the document's primary topic, which can help search engines determine how it should be categorized.

The Microformats web site provides useful information about semantic HTML and a list of semantic elements.

Archives