Let’s take a look at some of the new html5 semantic elements.
Structural Elements (Block Level Elements)
The main content of the body of a document or application. The main content area consists of content that is directly related to or expands upon the central topic of a document or central functionality of an application. Can only be used once per page. Another stipulation of
<main> is that it can’t be used as a descendant of an
Encapsulates a thematic grouping of content. All content in a declared
section should be related. Examples uses of the
section element…chapers of a book, the content of a tab.
header element represents a group of introductory or navigational aids. In html5 a document can have multiple
header elements if necessary. For example each section might contain a
header element rather than a single
header element for the entire page as we are accustom to in previous versions of HTML. Do not confuse the name with its location within the document.
footer element should contain information about its containing element (copyright, related links, additional resources). Like the
header element, the
footer element can be used within sections and on their own. The focus should be on the content included rather than it position in the document.
nav element should be used as a container for major navigational aids within a site.
aside element represents a section of a page that consists of content that is tangentially related to the content around the
aside element, and which could be considered separate from that content. We might use the
aside much like we use a sidebar. Jeremy Keith suggests that aside content should be able to be removed without diminishing the meaning of the main content of a document.
article element was designed to hold content that could be considered self-contained or stand alone. Some examples of content that might be wrapped in an
article element include blog posts, news stories, anything that might be delivered via RSS.
figure element represents a unit of content, optionally with a caption, that is self-contained, that is typically referenced as a single unit from the main flow of the document, and that can be moved away from the main flow of the document without affecting the document’s meaning.
figcaption element represents a caption or legend for a figure. The
<figcaption> element is optional and can appear before or after the content within the
<figure>. Only one
<figcaption> element may be nested within a
<figure>, although the
<figure> element itself may contain multiple other child elements (e.g.,
Text-Level Semantics (Inline Elements)
time element represents either a time on a 24 hour clock, or a precise date in the proleptic Gregorian calendar, optionally with a time and a time-zone offset.
<time datetime="2012-10-12">October 12th, 2012</time>
<time datetime="2012-10-12T14:00">2pm on October 12th</time>
mark element represents a run of text in one document marked or highlighted for reference purposes.
meter element is used to mark up measurement values on a fixed scale.
progress element is used to mark up information in the process of changing.
<progress value="3"></progress> <progress value="35" max="100"></progress> <progress value="0"></progress> <progress></progress>