Blog: Semantics and Sections

Semantics

The term semantics refers to the practice of labeling content by its type. In HTML, it essentially means using the HTML element that best describes the content it is enclosing. For example, using a <p> tag for identifying a paragraph of text or a <li> for identifying a list item in an un/ordered list.

Sectioning elements are a class of HTML tags that group related content together and describe what kind of group that content is. Below is a brief description of each of the sectioning elements.

Sectioning content

The sectioning elements include:

body

  • The body is the über section element.
  • It describes the section of the document that contains all of the content of the page.
  • There can be only one body element in an HTML document.

main

  • The main element describes the main content section of a page: where the meat of the page is.
  • Like body, there can be only one main section of the page.
  • Other sections, like header, footer, and nav, can sit alongside of the main section (unlike body which contains all the content).

header

  • The header is used to identify introductory-type content and/or navigational aids.
  • It functions much like we used to use <div id="header">
  • If a block of content can be described as an introduction and/or navigational aid, you can use a header.
  • However, unlike its predecessor, the header element can appear in multiple places in a web page--wherever it is specific to a section of content or to the entire page.

footer

  • The footer element is for content 'closes' a section (or article, aside, or body).
  • It can also appear multiple times and places within a document.
  • Some examples of footer content include copyright information, author information, related links, etc.

section

  • Sections typically include headers.
  • The section element groups together a collection of related content.
  • It is a generic element and can be used whenever a collection of content can be described as relating to each other and that collection can be labeled meaningfully.
  • Sections can also be nested. For example, a news site home page may have sub sections for national news, local news, sports news, and entertainment news. All of these might be contained in a section identified as news.

article

  • The article element represents a discreet nugget of content that can stand on its own, wherever it is placed.
  • Examples of content that might use the article tag include blog posts, and tweets from a twitter feed.
  • Articles can be nested. They can be nested in sections. Sections, likewise, can be nested within articles.

aside

  • There can be multiple aside elements within a page.
  • Asides are typically used for content that is tangential, but related to, content present on the page.
  • This might include things like sidebars, advertising areas, or "You might also like" content connected to a blog post.

nav

  • The nav identifies a collection of links that serve as some sort of navigation.
  • This can include various levels of site or page navigation.
  • Nav elements can appear in multiple places within a web page, including inside other sectioning elements.
  • Whenever you can describe a collection of elements as navigation, then the nav element is a good choice.

What about div?

  • The div element is 'semantically neutral'.
  • User agents (browsers) ignore the div when creating outlines of page content.
  • Divs are best used for grouping other tags for style or behavior purposes like centering page content or show/hiding elements with jQuery.

The HTML5 specification working draft offers a collection of elements for semantically describing content on a page.