New HTML5 Structural Tags

Contact Us or call 1-877-932-8228
New HTML5 Structural Tags

New HTML5 Structural Tags

We mentioned that we used meaningful ids for meaningless divs in the HTML 4 layout. However, these ids were only meaningful to us. The browser doesn't have any awareness of their meaning. HTML5 fixes this. Many of the structural tags coincide (and not coincidentally) with the most common values existing web pages use for the id and class attributes. Opera researched the most common class values from more than 2 million URLs. The table below shows the 200 most popular (with some gaps). Most Commonly Used Class Values

The highlighted rows show class names that have corresponding structural elements in HTML5:

  1. header - holds the header content of the document or a section in the document
  2. footer - holds the footer content of the document or a section in the document.
  3. menu - deprecated in HTML 4. Brought back to life in HTML5 to hold form controls (think of the File menu on a desktop application).
  4. nav - holds navigational links.
  5. section - holds a section of the document.
  6. article - holds an article.

The header, footer, and nav elements are shown in the demo above. We'll cover section and article later in the course.

Notably missing from the popular class names is aside. However, both left and right were in the top 25. "Aside" is a better name for an element as it catches the semantic meaning without implying page position.

A couple of notes on other popular class names in the list:

  1. content (number 6) and main (number 12). When designing pages, we often break them up into header, footer, one or two side columns and a main content area. It is very helpful to be able to section off this main content area for CSS styling and for accessibility purposes (e.g., Skip Navigation links). However, for some reason there is no HTML5 element corresponding to this area.
  2. small (number 14). The <small> tag is not new to HTML5, but it carries new significance. It is used to mark up the "small print" or side comments. The <big> tag, on the other hand, is deprecated in HTML5.