Semantic tags are now an implicit part of HTML.

The latent infrastructure for the systematic presentation of meaning is in place. But it doesn’t mean anything if you don’t use it.

Best Practices standards for semantic markup are still a moving target.

It may be that universal history is the history of the different intonations given a handful of metaphors.

Jorge Luis Borges

Markup as StyleGuide

HTML & Cascading Stylesheets are often used for defining the presentational styling of a webpage.

Markup as Information Architecture

HTML & Cascading Stylesheet tags can also be used to identify the underlying structure of page content.

se·man·tic : of or relating to the meanings of words, phrases or symbols

Meaningful Design

Semantic coding makes sense theoretically, but actually doing it can be a bit of a chore. How it is actually implemented in page design and templates is still a work-in-progress.

And there’s always The So What Factor. Why bother with annotation that will be used only by machines?

  • Web Compliance and Assistive Technologies (Pages that “speak to me”)
  • Agency (Who?)
  • Geo-Location (Where?)
  • Timestamp (When?)
  • Less confusion (i.e. How do you label a food “menu” in a restaurant site that has a navigation “menu”?)
  • Content Mashups (Creating new meaning “on the fly”)

Semantics do matter. Semantics communicate meaning, and once that is established, machines can do something meaningful with that data, without having to develop and use algorithms to guess.

Bruce Lawson Smashing Magazine 2011/11/18


semantic page layout

A Visual Map

And here’s a visual map of how HTML5 semantic tags are applied to this website. This image shows the basic layout of my Portfolio template, which includes the targeted “aside” components (Deliverables, IMHO, Tools and Techniques) that are a feature of that particular template.

The visual map shows how the semantic tags identify “containers” of information, as well as how some of the information is logically “nested”.

The H1, H2, H3 and H4 HTML tags show how the information hierarchy structure is reflected in the design.

The Simple Subset

I offer below a simple subset of “useful” semantic coding. It’s targeted to content editors rather than page designers. It’s effective for marking up documents that will be searched and referenced online.


Delineates the primary content container of a document.

You may have only 1 <main> element on any given web page per document.


Specifies a concise descriptive title for a document, section, article or even an aside

The content of any web page can have more than one header. For instance, every section element can have a header




Content that is a thematic section or subset of the primary content in a document s.a. a Chapter. It usually has its own header.

The section element is appropriate when the element’s contents would be listed explicitly in the document’s outline.




Content that is a self-contained composition within a document. It usually has its own header.

Any kind of content can be placed in an article element.  That content should be able to stand on its own yet still make sense to the reader.




Content that is tangentially related to the primary content and which could be considered separate from that content. It may have its own header.

Often represented – visually – as a sidebar.







This is the format for a citation. Yes, the terminology is a little awkward, but this is how you identify it:

<figure> = The entire citation element

<blockquote> = the text being quoted

<figcaption> = the person who is the source author

<cite> = the source material/document

Note: the old format <cite>now refers only to a document, not a person.


Used for less-engineered inline quotations within a section.

Can include a <cite> reference to the source, but generally the source is identified within the body of the content, and the quote itself is simply bounded by quotation “” characters.


Can be used as a timestamp for the document.

Can be used granularly to timestamp elements within a document.


General Principles

… to be applied to Templates

As little HTML in a page as possible.

HTML elements (tables and div tags) are used primarily to control gross layout (i.e. the placement and sizing of large “chunks” of information). These areas include:

  • Navbar at the top of the page
  • Search – (optional)
  • Content – the focal area
  • Area-footer –

Avoid nesting tables whenever possible.

Responsiveness and Animation

There are valid arguments for HTML 5’s ability to deal with responsiveness (accessibility) and animation (special effects).

Responsiveness is absolutely critical to an efficient environment and animation is certainly a presentational nice-to-have.

Semantic : Information Architecture

Semantic has implications for the underlying information architecture , which allows websites to be

  • self-aware (i.e. “responsive” on another level)
  • easily translate-able (across languages)
  • migrate-able (across applications)

The Semantic capabilities of HTML 5 are a step towards integrating the power of XML into a common standard of notation.


GoodStuff: the Nielsen Norman Group

Mini-IA: Structuring the Information About a Concept

Workflow Expectations: Presenting Steps at the Right Time



© The Communication Studio LLC