New HTML5 Elements

28th December 2016

A wide variety of new HTML5 elements have been introduced in the latest version of HTML. We can break some of the more commonly used new elements down into three different groups: Structural, Input Attribute Syntax and Media.

Structural

The <article> tag is used for self-contained content, such as a blog post or a news story.

<article>
    <h1>News Title</h1>
    <p>Some introduction text</p>
</article>

The <aside> tag represents a section of the page with content that is connected to the main content of the page, however could also be considered separate from the main content. For example, you might have some content representing some information about an animal, but in a sidebar, have some facts about that animal.

<article>
  <h1>Cheetah</h1>
  <p>The cheetah is a member of the cat family that reside in Africa</p>
  <aside>
    <p>Cheetahs can reach speeds of 110 – 120 km/h</p>
  </aside>
</article>

The <header> tag represents a container for introductory content or a group of navigation links. It is used to replace the commonly used <div class=”header”> in previous versions of HTML.

<header>
    <ul>
        <li>Menu Item</li>
        <li><Second Menu Item</li>
        <li>Third Menu Item</li>
    </ul>
</header>

The <footer> tag represents a footer for a document or section. It is used to replace the commonly used <div class=”footer”> in previous versions of HTML.

<footer>
  <p>Copyright Some Company 2016</p>
</footer>

The <main> tag specifies the main content of the document. There must not be more than one <main< element in a document and the content inside this tag should not be repeated anywhere else in the page, such as in sidebars and the header.

<main>
  <h1>Welcome to the Home Page!</h1>
  <p>Here's some content.</p>
</main>

The <nav> tag is intended only for major block of navigation links, therefore not all navigation links need to reside within this tag.

<nav>
  <a href="/html/">HTML</a> |
  <a href="/css/">CSS</a> |
  <a href="/js/">JavaScript</a> |
  <a href="/jquery/">jQuery</a>
</nav>

The <section> tag defines sections in a document. A Web site’s home page could be split into sections for an introduction, news items, and contact information.

<section>
    <h1>Introduction</h1>
    <p>Some intro text</p>
</section>
<section>
    <h1>News</h1>
    <p>Some news text</p>
</section>
<section>
    <h1>Contact</h1>
    <p>Some contact text</p>
</section>

Input Attribute Syntax

A common complication in previous versions of HTML was quoting around input attributes. Should we stick to double quotes, use single quotes or use no quotes at all? Thankfully, HTML5 will allow all of the above options.

<!-- Empty -->
<input type="text" value="John" disabled>

<!-- Unquoted -->
<input type="text" value=John>

<!-- Double Quoted -->
<input type="text" value="John Doe">

<!-- Single Quoted -->
<input type="text" value='John Doe'>

Media

The <audio> tag defines sound content.

<audio src="audio.mp3" type="audio/mpeg" controls autoplay loop> <!-- Other file formats: Ogg = audio/ogg, Wav = audio/wav -->
<p>Your browser does not support the <audio> element</p>
</audio>

The <embed> tag defines containers for external applications (like plug-ins).

<embed width="400" height="50" src="plugin.swf">

The <video> tag allows you to embed a video into the web page.

<video width="320" height="240" autoplay controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>