Barbarian Meets Codingbarbarianmeetscoding

WebDev, UX & a Pinch of Fantasy

2 minutes read

HTML5 Semantic Elements

This article is part of my personal wiki where I write personal notes while I am learning new technologies. You are welcome to use it for your own learning!

New Semantic Elements

HTML5 defines new semantic elements to provide more meaningful content semantics to your websites. These are:

  • <section>: represents a generic document or application section. It is a thematic grouping of content, typically with a heading. Some examples of sections could be chapters within a book or tabs within a tabbed web application.
  • <nav>: represents the navigation of a website. It should contain links to other pages or parts of the website. Only sections that contain major navigation blocks within a website are appropriate for the nav element.
  • <article>: represents a component of a page that consists of a self-contained composition within a document, page, application or site and that is intended to be independent, and as such, distributable, shareable and reusable. Examples: blog post, comment, forum post, news article, etc.
  • <aside>: represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which should be considered as separate from the main content. Examples are pull quotes, sidebars, bios, advertising, groups of nav elements, etc.
  • <hgroup>: represents the heading of a section. It is used to group <h1>-<h6> elements when the heading has multiple levels, such as subheadings or taglines.
  • <header>: represents a group of introductory or navigation aids. It is intended to contain a section’s heading (<h1>-<h6> or a <hgroup>) but it is not required. It can also be used to wrap a section’s table of contents, a search form or any relevant logos.
  • <footer>: represents the footer that contains additional information about a section, like who wrote it and when, related links, copyright, etc. When the footer contains entire sections it represents an appendix, indexes, etc.
  • <time>: represents either a time or a date.
  • <mark>: represents a highlighted run of text within a document.

New Form Elements


Jaime González García

Written by Jaime González García , Dad, Husband, Front-end software engineer, UX designer, amateur pixel artist, tinkerer and master of the arcane arts. You should follow him on Twitter where he shares useful stuff! (and is funny too).Jaime González García