Introduction to HTML5

Laying down the foundation on which we'll be building all of our HTML knowledge.

Scroll down...

Content

Resources

Comments

Welcome to HTML5! In this lesson, we'll give a brief overview of some of the new features of HTML5 which expand upon what was available in the HTML4 spec. Some features give you more modular ways to structure the semantics of your pages and others enhance the functionality available to you without the use of 3rd-party plug-ins.

All major browsers have supported most HTML5 features for several years now so you can feel free to experiment with them. Using the new semantic tags will help you build more semantic pages which also have better SEO. Some of the other functionality falls more under the category of "explore it later", but is included here so you know what is potentially out there.

The next few lessons will talk about the specifics of these new tags and functionalities.

Prerequisites

Before getting started, make sure you understand the basics of HTML from HTMLDog. The Advanced guide will get into what we cover below:

  1. Scan the Basic HTML Guide
  2. Scan the Intermediate HTML Guide
  3. Read the Advanced HTML Guide

About HTML5

HTML4 was the standard for a very long time. For the historically-minded, this long article talks about the journey to HTML5 and about how remarkable and tenuous the path was. For the rest of you, suffice it to say that HTML5 layers additional functionality on top of HTML4 without actually breaking it, so old markup works just as well now as it did before.

If you want to know which browsers and versions a specific tag is supported by, check out caniuse.com.

The new features of HTML5 generally fall into two buckets -- semantic tags and new functionality.

The semantic tags are designed to help you organize your pages in a more logical way which plays nice with large websites, assistive devices and screen readers. A nice feature of the new spec is that browsers no longer treat the webpage explicitly as a single HTML document. They acknowledge that a page can be made up of multiple sub-pages (like the individual posts of a blog), which better reflects how dynamic web applications work these days. As you'll see, the "sectioning elements" (types of semantic tags) help you create this separation.

On the new functionality side, you have access to additional media and form tags and a wider array of APIs for communicating between the DOM and the browser (typically using JavaScript). You can also produce some very flash-like games and graphics made using the versatile JavaScript-friendly <canvas> tags. HTML5 blurs the lines between JavaScript and markup.

HTML5 also spruces up some existing tags with additional attributes, for instance by providing new input controls like sliders and date pickers. The new "email" input field looks just like a text field but mobile browsers will alter their keyboards to accommodate it (e.g. adding the @ key). Older browsers just treat it like a text field.

Using HTML5

We've already been using HTML5 in our HTML documents, whether you realized it or not. Any time you declare the <!DOCTYPE html> atop your new document, it's set up for HTML5. In HTML4 you had to be much more specific about picking the doctype.

MIME-Types

As a brief aside, how does your browser know to use HTML in the first place when it receives a page from the server?

Basically, your web server will include the all-important "content-type" or "MIME-type" in the HTTP header, for example:

Content-Type: text/html

Images, stylesheets, and javascript files each have their own separate MIME types. Almost all web servers still send HTML pages with the MIME type "text/html".

A much stricter spec called XHTML still lingers because, for a while, forces in the standards development groups tried to push everyone into it. XHTML uses the "application/xhtml+xml" MIME type. It also blows up if any syntax errors are detected, which is a problem for the 99% of web pages that contain errors (see why it wasn't widely adopted?). Browsers displaying "text/html" are much more forgiving.

The XHTML push is why you might have been told that you need to "close" even unpaired tags like <br> and <img> with a trailing slash, e.g. <br />. That's not necessary in the more forgiving HTML4 or HTML5 specs and has largely been abandoned in practice.

Back to actually using HTML5 -- the DOCTYPE declaration tells the browser that you're using HTML5. You can then add some other helpful tags in the <head> to properly specify your page and avoid some security vulnerabilities.

A Sample Page in HTML5

Before we dive into the specific new features of HTML5 in the upcoming lessons, let's see an example. We'll start by looking at the difference between the structure of an HTML5 page and a traditional HTML page:

HTML5 blog index page structure with sectioning elements

As you can see, what was traditionally done using IDs and classes is now replaced by semantic tags. We can further dig into the structure of a specific post, which is treated like a new page of its own:

HTML5 blog post page structure with sectioning elements

In Code

The code below represents a blog homepage similar to what was depicted in the diagrams above. The code is what would follow the <!DOCTYPE html>:

<html lang="en">
  <head>
    <meta charset="utf-8">
  </head>
  <body>

    <header>
      <h1>
        The World's Greatest Blog
      </h1>
    </header>

    <nav>
      <ol>
        <a href="#">
          <li>
            Home
          </li>
        </a>
        <a href="#">
          <li>
            Index
          </li>
        </a>
        ...
      </ol>
    </nav>

    <main>
      <h2>
        Posts:
      </h2>

      <article>
        <header>
          <h1>
            <a href="#"
               rel="bookmark"
               title="link to this post">
               Learning day
            </a>
          </h1>
          <h2>
            The best kind of day.
          </h2>
          <time datetime="2014-8-15" pubdate>
            August 15th, 2014
          </time>
        </header>

        <div>
          <p>
            Lorem ipsum dolor sit amet…
          </p>
          ...
        </div>
      </article>

      ... (other posts) ...

    </main>

    <footer>
      Copyright 2014
    </footer>

  </body>
</html>

Wrapping Up

In the next few lessons, we'll look at what each of these elements actually is. We'll start by working with the semantic tags in the next lesson and then we'll cover some of HTML5's functional tags and new functionality in the following lesson.



Sign up to track your progress for free

There are ( ) additional resources for this lesson. Check them out!

There are no additional resources for this lesson just yet!

Sorry, comments aren't active just yet!