HTML5 Elements

HTML5 offers new elements for improving semantics of code as well as better document structure. These elements could now be used to replace traditional HTML code like <div id=”nav”> <div class=”header”> <div id=”footer”>.

Here are few examples:

  • <section>
  • <article>
  • <aside>
  • <details>
  • <description>
  • <nav>

SECTION

W3C Specification:

The section element represents a generic document or application section.

This sounds a lot like the definition for a div but div has no semantic meaning.

SECTION VS. DIV

A div has no semantic meaning, but the section element does. It’s used for grouping together thematically related content.

Example usage of the section tag:

<div class="section">
	<h2>The Gallery</h2>
	<!-- ... -->
</div>

This can be replaced with a section tag.

<section>
	<h2>The Gallery</h2>
	<!-- ... -->
</section>	

THE DOCUMENT OUTLINE

The document outline produces an outline summary of an HTML document based on how it is marked up.

The following elements have their own self-contained outline:

  • Article
  • Aside
  • Nav
  • Section

Take the following example:

<h1>This is the title of the page.</h1>
<section>
	<h2>This is the title of a sub-section.</h2>
</section>	

The ouput of the above, will look like follows:

1. This is the title of the page.
	1.1 This is the title of a sub-section.

We can use h1 inside of the section tag, and the document outline is unchanged.

HEADER

W3C Specification:

A group of introductory or navigational aids.

There can be many different headers on a page. They usually appears at the top of a document or section, but is defined by its content rather than its position.

Example usage of the header tag:

<div class="header">
	<!-- ... -->
</div>	

This can be done in HTML5 using the header tag:

<header>
<!-- ... -->
</header>	

Example usage of the header tag within a section:

<section>
	<header>
		<h1>The heading of the section</h1>
		<p>This is content in the header.</p>
	</header>
	<p>This is some information within the section.</p>
</section>	

FOOTER

W3C Specification:

Like the header, the footer element is not position-dependent. It should describe the content it is contained within.

Example usage of the footer tag:

<div class="footer">
	<!-- ... -->
</div>

This can be done in HTML5 using the footer tag:

<footer>
<!-- ... -->
</footer>	

Example usage of the footer tag within a section tag:

<section>
	<header>
		<h1>The heading of the section</h1>
		<p>This is content in the header.</p>
	</header>
	<p>This is some information within the section.</p>
	<footer>
		<p>By "Author Name"</p>
	</footer>
</section>	

ASIDE

W3C Specification:

Initially, the HTML5 spec defined the aside element as being “tangentially related to the content surrounding it.”

The aside now covers various contexts:

  • When used within an article element, the aside contents should be related to that particular article it is contained within.
  • When used outside an article element, the aside contents should be specifically related to the site.

An aside element is appropriate when it is used to represent content that is not the primary focus of an article or page, but it is still related to the article or page.

Example usage of the aside tag:

<div class="sidebar">">
	<!-- ... -->
</div>

This can be done in HTML5 using the footer tag:

<aside>
<!-- ... -->
</aside>	

Example usage of the aside tag within a section tag:

<section>
	<header>
		<h1>The heading of the section</h1>
		<p>This is content in the header.</p>
	</header>
	<p>This is some information within the section.</p>
	<aside>
		<p>Some secondary information.</p>
	</aside>
	<footer>
		<p>By "Author Name"</p>
	</footer>
</section>	

NAV

W3C Specification:

The nav element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.

The nav element is intended for “major navigation.”

Example usage of the aside tag:

<div class="nav">">
	<!-- ... -->
</div>

This can be done in HTML5 using the nav tag:

<nav>
<!-- ... -->
</nav>	

ARTICLE

W3C Specification:

The article element represents a complete, or self contained, composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication.

The article element is another type of section. It is used for self-contained related content.

Some uses for the article tag:

  • A blog post
  • A news story
  • A comment on a post
  • A review

Example usage of the article tag:

<div class="article">">
	<!-- ... -->
</div>

This can be done in HTML5 using the article tag:

<article>
<!-- ... -->
</article>	

MAIN

W3C Specification:

The main element represents the main content of the body of a document or application.

Main should not be allowed in following places:

  • Do not include more than one main element in a document.
  • Do not include the main element inside of an article, aside,
    footer, header, or nav element
  • Example usage of the main tag:

    <div class="main">">
    	<!-- ... -->
    </div>
    

    This can be done in HTML5 using the main tag:

    <main>
    <!-- ... -->
    </main>	
    

    FIGURE

    W3C Specification:

    “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.”

    A common use of the figure tag is for an image within an article:

    <figure>
    	<img src="image.jpg" alt="My Picture" />
    </figure>
    

    Example usage of the figcaption tag:

    <figure>
    	<img src="image.jpg" alt="My Picture" />
    	<figcaption>This is a caption for the picture.</figcaption>
    </figure>
    

    TIME

    W3C Specification:

    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.

    The article element is another type of section. It is used for self-contained related content.

    Some uses for the article tag:

    • A blog post
    • A news story
    • A comment on a post
    • A review

    Example usage of the time tag: (US time)

    	<time>2015-01-31</time>
    

    We can format the time to “mm/dd/yyyy”:

    <time>09/16/2013</time>
    

    We use the datetime attribute to get our desired format:

    <time datetime="2015-01-31">01/31/2015</time>	
    

    Be first to comment

    Leave a Reply