cult3

Introduction to HTML5

Sep 10, 2012

Table of contents:

  1. Simplified tags
  2. New HTML5 semantic tags
  3. Compatibility

HTML5 is the latest iteration of HTML and it brings with it some interesting new technologies and native abilities that make creating website a whole lot better.

As HTML and CSS continue to evolve, many of the laborious things of the previous versions are simplified for the better. HTML5 also introduces some interesting new features, such as:

  • The Canvas
  • Media playback
  • Offline web applications
  • Native drag and drop
  • Storage
  • Much, much more

Whilst HTML5 offers some powerful new abilities, it is of course too much to include in one tutorial.

For me, some of the best bits of HTML5 are the simplified and more semantic tags that allow you to markup your pages in a much cleaner way.

In this tutorial I will be covering the simplified bits of HTML5 and the new semantic tags that you can start using today!

Simplified tags

Up until HTML5, whenever I was creating a new website, I would always just copy and paste the doctype into a new page. I don’t believe any web developer in the world could actually write out all the doctype stuff at the top of a new page.

If you’ve been making websites for a while now, you will probably recognise this:

Not very pretty huh?

With HTML5, all you have to write is this:

Next, the HTML opening tag has also been simplified.

Previously you had to write this:

<html xmlns="https://www.w3.org/1999/xhtml" lang="en" xml:lang="en"></html>

Now all you have to do is write this:

<html lang="en"></html>

Next, character encoding is simplified.

Instead of this:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

You can simply write:

<meta charset="UTF-8" />

Finally, you can also make your links to resources shorter.

For example, previously to link to a stylesheet, you would write:

<link rel="stylesheet" href="style.css" type="text/css" />

Now you can just write:

<link rel="stylesheet" href="style.css" />

HTML5 builds upon the foundation of the previous versions of HTML. This means that you can use all of these new cleaner tags with all of your old markup.

New HTML5 semantic tags

HTML5 introduces some new tags that allow you to markup your pages in a more intuitive way.

Some of the most common new tags are:

  • header
  • nav
  • section
  • article
  • aside
  • footer

Here is an explanation of each of them, and examples of how you would use them.

The header tag should be used to contain introductory content or navigational items at the top of a document or at the start of a section.

In previous versions of HTML, you probably had a section that looked like this at the top of your page.

<div id="header">
  <h1>Culttt</h1>
</div>

This is still perfectly fine and valid, but now you can use the more semantic HTML header tag, like this:

<header>
  <h1>Culttt</h1>
</header>

You can also use the new header tag as the header within a section of the page. In other words, you can use multiple header elements on the same page. This allows you to make header sections so that each element is more semantically defined.

For example:

<section>
  <header>
    <h1>About Culttt</h1>
  </header>
</section>

Finally, if you want to group HTML header elements together, you can use the hgroup tag, like this:

<header>
  <hgroup>
    <h1>Culttt</h1>
    <h2>Articles on business, technology and the Internet</h2>
  </hgroup>
</header>

The nav tag should be used to contain navigational links to other pages of the website, or other sections of the page.

Previously you might have used something this:

<div id="nav">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>

This is perfectly fine, but what if you also have another section with navigational type links? Previously, this would be just an element containing links, it would not be semantically defined as a navigational area.

The HTML5 nav tag allows you to define multiple navigational elements of your page, like this:

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

<nav>
  <ul>
    <li><a href="#">Our mission</a></li>
    <li><a href="#">About the team</a></li>
    <li><a href="#">About the company</a></li>
  </ul>
</nav>

Section

The section tag is used to contain content that is centred around a theme. Normally section elements would replace div elements. However, a section must make sense on it’s own outside of the context of the rest of the page.

For example, if you had the following on your about page:

<div id="about">
  <h1>About</h1>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec magna
    augue.
  </p>
</div>

You could replace this div element with a section element, like this:

<section id="about">
  <header>
    <h1>About</h1>
  </header>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec magna
    augue.
  </p>
</section>

Article

The article tag is used to contain independent content. For example, you would use article tags to markup blog posts or news stories.

The difference between Sections and Articles is, Sections can contain Articles, whilst Articles should be independent. So for example, you could use a section tag to contain your blog post comments, but each comment should be wrapped in an article tag because each comment is an independent piece of content.

So for example, your comment section might have previously looked like this:

<div id="comments">
  <div class="comment">Great post!</div>
  <div class="comment">I agree!</div>
</div>

In HTML5, you can mark it up like this:

<section id="comments">
  <article class="comment">Great post!</article>
  <article class="comment">I agree!</article>
</section>

Aside

The aside tag is used for relating content to an article that is not critical to it’s understanding.

For example, you might use an aside tag to markup some extra article content in an interview.

For example:

<article>
  <header>
    <h1>Interview with John Smith</h1>
  </header>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec magna
    augue.
  </p>
  <aside>
    <p>John Smith is an author and singer from Brooklyn, New York.</p>
  </aside>
</article>

Finally, the footer tag is to be used to contain information at the end of a section or a page.

If you are currently making websites, you have probably written code very similar to the following in the past:

<div id="footer">
  <p>This website was made by Philip Brown</p>
</div>

With HTML5, you would markup the footer of the page like this:

<footer>
  <p>This website was made by Philip Brown</p>
</footer>

The interesting thing about the footer tag is, you can use it at the end of any containing element.

So for example, you could use it at the end of an article, like this:

<section>
  <article>
    <header>
      <h1>Latest news!</h1>
    </header>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec magna
      augue.
    </p>
    <footer>
      <p>This article was published on the 10th of September 2012</p>
    </footer>
  </article>
</section>

Compatibility

As I mentioned at the top of this tutorial, HTML5 is simply building on the foundations of all previous versions of HTML. So really, you can pick and choose which elements you want to integrate today, and you don’t have to worry about your old code becoming invalid.

HTML5 is supported on all of the latest versions of each of the major browsers (including IE9!). However, it is not supported in IE8 and below.

To use HTML5 in unsupported legacy browsers like IE8 and below, you need to use HTML5 Shiv.

HTMLShiv is a file that ensures old legacy browsers will recognise the new HTML5 elements. To use HTML5 Shiv, simply include the following at the top of your page.

<!-[if IE]>
<script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]->
Philip Brown

@philipbrown

© Yellow Flag Ltd 2024.