<HTML5 id='semantic' />

Kevin Flanagan…

These are the semantic tags that were introduced with HTML5:

  • article
  • section
  • details
  • figcaption
  • figure
  • footer
  • header
  • main
  • nav
  • section
  • summary
  • time

In addition, consider the following tag sets for structures and determine which would be most appropriate for use with semantical meanings:

Page Heading:

tags: only use 1 h1 tag per page and use concurrent tags in cardinal sequence going up.  Never skip an increment while progressing through a page, but you can skip while going backward.  For example, this order is appropriate:

Page Title:

first heading:

second heading:

next size smaller heading:

the next size down

jump back up and make a 3rd page heading:

the smaller size introduced above:

... Because we are matching meaning to its style and the 4th level has already been declared in the document

because we want a smaller

the sub-heading level:

and still smaller of a heading

You get the point by now, but just in case ...

We just jumped all the way:


way up to the top level page header

The best is the enemy of the good. ~ Voltaire

Just because you get cool indents with that is no excuse for misusing this semantic tag! Get a clue! use left and right margin!