How HTML5 Works

Semantic Elements

Semantic elements in HTML5 are, as their name implies, those that refer to the meaning of certain content. Just using <body> tags alone isn't enough, since most Web sites today contain several different types of content on a single page. Web developers need to apply separate rules for how each type of content should look or behave.

Without semantic elements, Web developers have used <div> and <span> elements to identify blocks of content, associating each with a particular class attribute. Each class could be associated with specific styles using CSS or with specific behavior using scripts.

Over time, certain content types became very common on Web sites, such as headers, footers, menus and navigation points. HTML5 incorporates these by adding standard semantic elements. This means you can break up your <body> block into helpful semantic elements rather than a series of <div> and <span> tags.

The following is the list of semantic page elements with a brief definition of each. Be sure to find an HTML5 reference you can trust for a complete list of valid attributes and child elements for each semantic element.

Block elements:

  • section -- a generic page division used to help break up a larger block of content
  • article -- content that is originally from an outside source, sometimes added dynamically on page load by using an aggregator script
  • header and footer -- blocks that appear at the top and bottom of each page
  • hgroup -- a grouping of multiple related headers, such as a title and subtitle
  • menu -- a list of commands (see the command element), and attributes that specify the menu's behavior
  • nav -- identifies a block that's strictly for Web site navigation, typically some unordered list of links to other pages on the site
  • address -- includes contact information for the author of the content within a block, such as an article, section or entire page body
  • aside -- indicates that the content should be treated as a sidebar

Inline elements:

  • summary and details -- toggle between a teaser/summary and full details for the same content
  • figure and figcaption -- elements used to apply common behavior to images, no matter what media elements (img, svg or canvas) are used to include them
  • time -- text representing a calendar date, clock time or both, formatted so that the browser can adjust for time zone differences if necessary
  • command -- a label and a behavior associated with that label when you use the keyboard or mouse to interact with it, typically used inside a menu block
  • dfn -- a term that's being defined within the content
  • wbr -- a tag indicating an acceptable place to break text within a word when it wraps across multiple lines

Semantic elements were created as an improvement over more generic HTML elements. The next new element type, though, aims to be an all-out replacement for third-party media extensions in Web browsers.