HTML5 New Semantic Elements
Let’s take a look at some of the new html5 semantic elements.
Structural Elements (Block Level Elements)
<main>
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 <article>, <aside>, <footer>, <header>, or <nav> element.
<section>
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>
The 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>
The 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>
The nav element should be used as a container for major navigational aids within a site.
<aside>
The 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>
The 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>
The 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>
The 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., <img> or<code>).
View a sample layout using the new html5 structural elements.
Text-Level Semantics (Inline Elements)
<time>
The 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.
Example
[crayon]
[/crayon]
<mark>
The mark element represents a run of text in one document marked or highlighted for reference purposes.
<meter>
The meter element is used to mark up measurement values on a fixed scale.
Attributes
- value
- min
- max
- high
- low
- optimum
<progress>
The progress element is used to mark up information in the process of changing.
Attributes
- value
- min
- max
Example
[crayon] [/crayon]