The Ultimate Guide to HTML5

HTML5 History and Introduction

HTML5 is the current version of the HTML standard. HTML, the HyperText Markup Language, is the markup language used for web documents and applications. HTML5 includes a number of major additions and changes to the language.

A Brief History of HTML 1-4

HTML was invented by Tim Berners-Lee in the late 1980s and early 1990s. The first "public" release was in 1991. It was based on an earlier markup language, SGML (Standardized General Markup Language).

The major innovation of HTML was its use of the hyperlink. We are so used to this now that it is hard to understand how revolutionary this idea was at the time.

The hyperlink allows any document to reference any other document, and provides immediate access to that other document. Hyperlinks are what make the World Wide Web a web, and not just a library or database.

The IETF took up HTML as a standard and published the first HTML proposal in 1993. HTML 2.0, the first full official specification was released in 1995. By 1997, the W3C had taken over stewardship of the standard, and HTML 3.2 was released.

HTML 4.0 was released towards the end of 1997, and again the following year with a few updates. This version of the standard, with its three variations (strict, transitional, and frameset) defined HTML most of the next decade.

It was the version in force during the rise of the web's most iconic properties: Wikipedia, Google, Facebook, WordPress, Myspace, AOL. If you learned how to build web pages before 2008, you almost certainly learned this version.

Alongside HTML 4.0 was a related project called XHTML. This was first released in 2000 and 2001, as an XML-based implementation of HTML 4.0. Since XML had a stricter syntax than HTML, and could be easily validated by an XML parser, it was thought that introducing XHTML would force web content authors to create more precise documents.

For the most part, this did not happen. In practice, XHTML — along with the three varieties of HTML4, and the wild variation in browser rendering — contributed to the general confusion concerning what was and wasn't "standard" HTML.

One notable effect of XHTML is the idea that you must "close" empty tags with a trailing slash. If you are in the habit of typing <br /> instead of just <br>, you can thank XHTML — it was an XML syntax requirement that all tags must be closed.

The Road to HTML 5

During the early years of the public adoption of the web, the major browser providers developed their own proprietary HTML elements and their own approach to rendering.

HTML documents created for one browser were nearly unusable in others, especially if the HTML pages contained interactive elements such as form controls.

As HTML 4.0 and XHTML stabilized, the Web Standards movement pushed the browser makers to adopt open standards, so that web pages would be compatible with any browser.

This work was largely successful, but two trends pushed the boundaries of HTML, threatening the whole principles of openness and interoperability.

The first was the collective bad habits of "quirks mode" browser-targeting. After so many years of having to tweak designs for specific browsers, many designers continued to code this way.

The second was an increasing desire for rich, interactive content that wasn't supported in HTML. This led to widespread use of Flash.

In 2004, Mozilla and Opera presented W3C a position paper advocating for what would later become HTML5. The new iteration of the language would support new interactive functionality and rich media, while being backwards compatible with standards-compliant web browsers.

This last point was crucial — the new version had to degrade gracefully and contain valid HTML 4.0 as a subset; otherwise, it would become just another confusing variant of an already crowded ecosystem.

WHATWG began working on HTML5 almost immediately, and the first public draft was published in 2008. Browser makers began to experimentally implement portions of the standard, which continued to evolve.

A stable "Candidate Recommendation" was released in 2012, and the fully stable W3C Recommendation was released in 2014. By that time, all major browsers were supporting the most critical parts of the standard.

The HTML5 standard now has two parallel development tracks. W3C has a stable release cycle with incremental version numbers — a series of "snapshots." WHATWG maintains an evolving " living standard " with new features added continuously.

What's New in HTML5?

There's a lot new in HTML5, including the nature of the specification itself. HTML 4.0 was, in essence, an inventory of available markup tags. HTML5 includes that, but that is just one piece of a modular ecosystem of browser-based technologies defined in the standard.

Markup

The changes in the markup for HTML5 fall generally into a few categories.

Semantics

Semantic markup means markup that carries meaning. For example, the only major page-layout element in HTML 4.0 was <div>. A <div> could be anything: a header, a footer, a column, a sidebar, a menu. In HTML5, a number of semantic page-layout elements have been added:

  • <header>

  • <footer>

  • <main>

  • <article>

  • <aside>

  • <nav>

  • <section>.

Other semantic elements added in HTML5 include:

  • <figure> and <figcaption>, which are used for illustrations and diagrams;

  • <mark> which defines highlighted or marked text;

  • <time> which defines a datetime.

HTML5 also makes explicit that <strong> and <em> should be preferred over <b> and <i>.

Multimedia

New elements were added to HTML5 to support media:

  • <video>

  • <audio>

  • <canvas>.

The <audio> and <video> elements allow native playback of media without JavaScript, Flash, or embedding of any kind — it is as simple as including an image. The <canvas> element works with JavaScript to create on-page graphics programatically.

HTML5 also has explicit support for Scalable Vector Graphics (SVG).

Interactivity

HTML5 has a number of new form elements and input types which help support the language as an application platform. These include:

  • <datalist>

  • <keygen>

  • <output>.

Input types now include: color, date, datetime, datetime-local, email, month, number, range, search, tel, time, url, and week.

Along with new form controls, HTML5 introduced <meter> and <progress>, which provide visual feedback and can be used outside of forms. Additionally, several new global attributes enable interactive features:

  • contenteditable

  • contextmenu

  • data-*

  • draggable

  • dropzone

  • spellcheck.

Lexing and Parsing Rules

Aside from changes to the catalog of available elements, HTML5 markup is subject to a much stricter and better-defined set of lexing and parsing rules. It is no longer a version of XML or SGML, but a fully-specified markup language in its own right.

Syntax errors or poorly-formed markup are expected to fail consistently, providing similar behavior across compliant browsers.

Browser and DOM APIs

HTML5 specifies a number of JavaScript APIs for interacting with the DOM (Document Object Model — the on-page content) and with the browser. These include:

  • Canvas, mentioned above, for in-page graphics rendering.

  • Timed Media Playback, for use with <video> and <audio>.

  • Online/Offline status checks.

  • MIME type and protocol handler registration, which allows a browser to select a website as the default way to handle a particular filetype or communications protocol. For example, allowing a webmail application to handle mailto: links.

  • Microdata, which allows nesting of semantic metadata as attributes.

  • Cross-document Messaging, which allows two pages from two different domain sources, open in two different browser contexts, to communicate with each other.

  • Web Storage, a persistent key-value pair data store similar to cookies, but easier to use and with a larger storage capacity.

The Success of HTML5

The success of HTML5 can be judged on two counts:

  • how well the specification accomplishes its goals

  • how widespread its adoption is.

On both counts, HTML5 has been highly successful.

The goals of HTML5 were:

  • browser interoperability

  • reduced or eliminated need for plugins

  • backwards compatibility with existing standards.

These have largely been achieved. Rendering engines and JavaScript implementations in the major browsers have all converged to the point that visiting a web page will produce a consistent experience across all browsers.

Support for multimedia, browser storage, and other application-focused features has eliminated the need for Flash and given rise to an explosion in native HTML5 web applications.

Documents created in HTML5 render well in legacy browsers, even if more advanced web applications don't work.

Adoption has been swift, starting even before the standard was made official. As of this writing, the majority of the top 10 million websites uses HTML5. What's more, the majority of new web content is being produced in HTML5.

Even more exciting has been the use of HTML5 outside of the browser. Platforms like Electron for desktop and Phonegap for mobile have turned HTML5 (with CSS3 and JavaScript) into a native application language.

HTML5 Resources

Summary

HTML5 is the present and future of the web. If you work with web technologies or publish web content, you need to be familiar with the standard. If you learned web design before 2010, and haven't kept up with changes, there's a lot of great stuff in HTML5 that is worth checking out.

HTML5 Audio and Video Resource

Before HTML5 came along, embedding audio and video in web pages was not straightforward. Different technologies and MIME types required different plugins.

Also, media sometimes had to be embedded using iframes. This is not ideal because it's a technique which hackers also use to embed malicious code.

HTML5 introduces new tags that make media management easier, primarily because they introduce standards that can be used on practically any site. As with all HTML5 tags, some caution is required, since the tags may not be compatible with older browsers.

To embed audio or video, you can use the new <audio> and <video> elements in HTML5. Here's an example:


<audio autoplay>
  <source src="madeleine-brel.ogg" type="audio/ogg">
  <source src="madeleine-brel.mp3" type="audio/mpeg">
  Please upgrade your browser.
</audio>

Below, we've broken down each element with its attributes.

Embedding Video

HTML5 introduces a new element, <video>, which does away with the need for browser plugins.

Between the opening and closing tags of the element, you can specify alternate text. This is only displayed if the browser does not support the <video> element.

The <video> Element Attributes

Within the element, you can specify various attributes:

width, height

These attributes set the dimensions of the video on screen. While they are optional, it's best to include them so that the rest of the page renders correctly while it is loading.

The width and height of a video must be specified in pixels.

controls

The controls attribute tells the browser to display a play/ pause button and a volume control slider. To display the video without controls, omit the attribute.

autoplay

Autoplay will force the video to start playing on desktop devices, without any intervention from the user. To display without autoplay, simply omit the attribute.

On mobile devices, the autoplay attribute is ignored.

Embedding Audio

To embed audio, use the <audio> element. It's very similar to the <video> element.

Between the opening and closing tags of the element, you can specify alternate text. This is displayed only if the browser doesn't support the <audio> element.

The <audio> Element Attributes

Within the element, you can specify various attributes:

loop

The loop attribute tells the browser to restart the audio track from the beginning once it has finished playing.

controls

The controls attribute tells the browser to display the same play/pause button and volume control slider as with the video tag. Simply omit the attribute to display the audio without controls.

autoplay

The autoplay attribute will force the audio to start playing automatically. To embed the audio without autoplay, simply omit the attribute.

muted

The muted attribute will mute the volume when the audio loads.

preload

The preload attribute allows you to load the audio before the page content. Acceptable values are auto, metadata, or none.

The <source> Element

The <source> element defines the file and MIME type, and must be used within the <video> or <audio> element. There must be at least one <source> element. You may add additional <source> elements if you want to specify alternate versions of a file.

For example:

<video autoplay controls>
  <source src="madeleine-brel.mp3" type="video/mpeg">
  <source src="madeleine-brel.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>

The <source> Element Attributes

The <source> has the following attributes:

src

The src attribute specifies source path and filename for the video or audio file.

type

The MIME type of the file.

For video, acceptable values are video/mp4, video/webm, and video/ogg. For audio, acceptable values are audio/mpeg, audio/wav, and audio/ogg.

While modern browsers theoretically support the element itself, some may struggle with certain MIME types.

For the best chance of cross-browser compatibility, the video/mp4 MIME type is recommended for video, and the audio/mpeg MIME type is the best for audio. You can specify multiple <source> elements if you want to provide an ogg and an mp4 version of the same video, for example.

The <track> Element

The <track> element allows you to specify a text resource that is served along with your audio or video. The most common use for <track> is to specify a subtitle file, or captions.

You can specify more than one track for each video or audio element. For example, you might want to add <track> elements for different languages:

<video autoplay controls>
  <source src="madeleine-brel.mp3" type="video/mpeg">
  <source src="madeleine-brel.ogg" type="video/ogg">
  <track srclang="en" label="English" src="madeleine_en.vtt" kind="subtitles" default>
  <track srclang="fr" label="French" src="madeleine_fr.vtt" kind="subtitles">
</video>

The <track> Element Attributes

The <track> element has the following attributes:

src

The source path and filename for the text file.

kind

Similar to the type attribute, the kind attribute specifies the nature of the file. You can use captions, chapters, descriptions, metadata, or subtitles.

srclang

The srclang attribute lets you specify the language of the text file. Use the appropriate language code.

default

Use the default attribute to specify which <track> should be the default choice.

label

Gives the text track a name.

Resources

HTML5 Application Cache

HTML5 didn't just change markup syntax. It also defined a number of browser-based technologies, including several related to offline use of web applications.

Application Cache (or "AppCache") is a feature that allows developers to specify resources to be pre-fetched and stored locally.

These resources are declared in a cache manifest file, linked from the header of a web page. This can be used to design a web application that works offline, or simply to speed up the user experience.

AppCache is a feature with a lot of potential, especially in the context of single-page web apps. Unfortunately, the feature also has a lot of problems, and is in the process of being deprecated and removed from the standard.

That being said, AppCache is still usable and the only way to accomplish certain effects.

To help you deal with this confusion, we've pulled together the best tutorials and resources on Application Cache, which explore the topic from a variety of angles.

Tutorials

Additional Learning Materials

Reference

Tools for Working with Application Cache

Moving Forward with Application Cache

Should you learn how to use Application Cache? If you are a front-end developer working on web applications — absolutely yes. But you also need to know what's coming and how offline browser storage is evolving.

The intended replacement for AppCache is Service Workers. You can already use Service Workers in some browsers, and there are great tools for implementing them easily. On the other hand, some browsers haven't even decided if or when they will implement the feature.

So what should you be doing in your own web applications?

For now, use AppCache, but prepare for Service Workers.

HTML5 Games, Graphics, and Animations

Scalable vector graphics (SVG) and the HTML5 canvas element are two powerful tools for creating graphics, animations, and even browser-based games. While both of these technologies can be used for some of the same purposes, they work in fundamentally different ways.

  • A canvas element is a bitmap space where you can draw and manipulate rasterized images on a pixel-by-pixel basis.

  • An SVG is code that describes a resolution-independent vector graphic.

Both canvas elements and SVGs can be created programmatically with scripting and designed to respond to user input. As a result, SVGs and canvas elements can be used to create static graphics and interactive animations.

SVG vs Canvas

First things first, SVG isn't part of the HTML5 specification while canvas is. SVG is a language used to describe two-dimensional graphics. It is a standalone web standard that can be embedded in HTML and XML documents.

When embedded in an HTML document, SVG employs a syntax that matches HTML5 syntax, thus leading some to incorrectly assume that SVG is an HTML element.

SVGs and HTML5 canvas elements are rendered quite differently by browsers:

  • Canvas elements are rendered "on the fly." This means that canvas elements are drawn in real time as they are processed by the browser.

  • SVG are not drawn immediately. When a browser encounters an SVG it first builds a DOM for the SVG and then renders the DOM.

That might seem like a minor difference, but it isn't. This means that a browser doesn't have to build a DOM when it encounters a canvas, but it does have to when an SVG is rendered.

For simple animations, the difference is negligible. However, exceptionally complex canvas animations require dramatically fewer browser resources than SVGs.

On the other hand, if you want to make a small change to an SVG you can traverse the DOM and make the change, while an entire canvas element must be redrawn to make any change.

Another way that canvas elements and SVGs differ is resolution. Canvas elements are resolution-dependent. That means is that when you zoom in on a canvas element the resolution degrades. An SVG, on the other hand, is resolution-independent and will look pixel-perfect at any resoultion.

When to Use SVGs and Canvases

All of this invites the question: when should SVGs and canvas elements each be used? While there is some crossover in the application of these tools, in general, follow these guidelines:

  • Use SVGs for pixel-perfect animations and graphics that must look sharp on devices of any size.

  • Use SVGs if you need to avoid using JavaScript or if accessibility of animation content is critical.

  • Use HTML5 canvas to create complex animations and games that incorporate a great deal of user input.

If you want to learn more about using SVGs take a look at our article comparing SVGs and SWFs which includes a list of SVG resources. To learn more about the HTML5 canvas element, read on.

HTML5 Canvas Resources

Let's start with the basics:

  • Mozilla Developer Network Canvas Tutorial: this tutorial starts with basic usage and moves on to cover drawing shapes, text, using images, creating transformations and animations, pixel manipulation, and more. By the end of this tutorial you will have created advanced animations, a continuously panning panorama, and a color picker app.

  • Dev.Opera HTML5 Canvas — the Basics: this thorough introduction to canvas covers drawing techniques, working with images, pixel-based manipulation, as well as text, shadows, and gradients.

  • W3Schools Canvas Tutorial: Learn the basics of drawing, working with coordinates, gradients, drawing text, and working with images. Then, apply what you've learned by building a canvas clock. Finally, put it all together and create a few different basic HTML5 games.

  • Eloquent JavaScript, Chapter 16: Drawing on Canvas: this text is designed to educate JavaScript programmers, not just teach web developers simple tricks. This entire interactive ebook is a goldmine, but if your focus is squarely on learning how to work with the canvas element, chapter 16 will provide a firm grounding in how JavaScript and the HTML canvas element interact.

With a firm grasp of canvas basics, you'll want to move on to advanced techniques:

There's no better way to learn than to build something. These tutorials will put what you've learned to use and show you how to create some simple HTML5 games:

There's no better way to develop mastery of a topic than to work through one or two in-depth texts. Here are three of the best HTML5 canvas texts available today:

  • HTML5 Canvas (2013) by Fulton and Fulton: learn to build interactive multimedia web applications with canvas and JavaScript. This text covers simple 2D drawings, the use of algorithms to develop math-based movement, the use of video and images, making canvas apps responsive, and more.

  • Supercharged JavaScript Graphics: with HTML5 canvas, jQuery, and More (2011) by Raffaele Cecco: this advanced text will help you master HTML5 canvas and incorporate advanced techniques such as collision detection, object handling, smooth scrolling, and Google data visualization tools.

  • Core HTML5 Canvas: Graphics, Animation, and Game Development (2011) by David Geary: this is not a text for beginners. It is designed to be read by experienced developers who have an intermediate level grasp of JavaScript. While this text does cover canvas basics, it's focus is on advanced topics such as game development, custom app controls, the application of physics to HTML5 games, and the development of mobile apps.

HTML5 Interactive Elements

HTML5 has added a few attributes to make creating interactive webpages easier.

Details and Summary Tags

Using HTML5, it is possible to create lists that can be expanded and collapsed through the <details> and <summary> tags. Although bulleted lists can be created just as with previous versions of HTML by using the <ul> and <li> tags, these are static and cannot be collapsed.

<details> Element

To provide a starting point for the list, developers must start with the <details> element. This element works similarly to the <ul> tag. The following example shows a way to start a code segment with this tag:


    <details>
        ...
    </details>

Adding the details tags is not enough to complete the list. Summary tags needed to be added as well.

<summary> Element

The summary tag specifies the label that is applied to the list that can be expanded and collapsed. The items that can get collapsed and expanded are specified by the content right under the summary tag.

The summary tag content can be specified by any HTML element including <p> or <ul>. The following is a simple example of the usage of the <details> and <summary> tags:


    <details>
    <summary>List Label</summary>
    <p>Detail info goes here...</p>
    </details>

It is also possible to nest the <details> and <summary> tags within another set. This will create a collapsible/expandable list within another list.

Here is an example of a list within another list using the <details> and <summary> tags:


    <details>
    <summary>Items List</summary>
    <p>Item 1</p>
    <p>Item 2</p>
        <details>
        <summary>Item 3</summary>
        <p>Item a</p>
        <p>Item b</p>
        </details>
    <p>Item 4</p>
    </details>

The details and summary tags can used to create an effect of lists that dynamically open and close on a web page. This can be applied to a variety of scenarios including FAQs that feature answers to questions that can be opened or closed.

The summary tag would contain the question while the collapsible content would be populated with the answer.

Menu and Menuitem Tags

While browsing the web, users can access the browser's menu with a click of the right mouse button. The menu items that come up vary from browser to browser. With some new HTML5 tags, it is possible to customize the menu to add additional actions users can take.

Furthermore, the actions can be tailored to specific sections or locations on the web page itself. For example, different actions or menu items can be shown for the navigation area versus the main body of the web page.

The tags that make this possible are the <menu> and <menuitem> tags. Since these are experimental tags, they are not widely supported. Firefox is the only major browser that currently supports them.

<menu> Element

Anytime a menu item needs to get added, the series of items needs to begin with the <menu> tag. This series is ended with the closing tag, </menu>.

Developers should be careful using these tags as these are context menus and whether or not they show up depends on where the code is placed within the HTML file. This is especially true when developers use <div> elements. Consider the following code:


    <div id="tmpDiv">
        <menu label="menu1" type="context">
        ...
    </menu>
    </div>

In this case, elements of the custom menu will appear when the user right clicks the mouse button within the "tmpDiv." Like most HTML5 tags, the menu tag also has attributes called label and type.

The label is simply an identifier for the menu while the type can be specified as either context, list, or toolbar. Even though multiple menu types can be specified, only the context menu is supported.

<menuitem> Element

To add items to the menu, developers must specify the names of the items using the <menuitem> tag. The tag has some attributes that affect both the look and behavior of the menu item.

The attributes for the menuitem tag include label, icon, and onclick.

The label specifies the text the user will see for the menu item when the menu is activated from the browser. Developers can specify the icon used for the menu item which will appear to the left of the text. The onclick attribute controls the actions taken when the menu item is activated by the user.

The actions that the onclick attribute takes could execute javascript code. For example, users could see an alert box. Here is an example of how to setup a menuitem tag that will display a popup that says "hello":


    <div id="tmpDiv">
        <menu label="tmpMenu" type="context">
            <menuitem label="Say Hello", icon="hello.png", onclick="alert('Hello!')">
            </menuitem>
        </menu>
    </div>

The menu and menuitem tags could be used to create specialized menus. This will allow users to take various actions depending on the menu item clicked. However, beware of the limited support for these tags.

HTML5 Native Drag and Drop

Prior to HTLM5, developers had to use JavaScript libraries such as jQuery UI or Dojo to add drag and drop animations to web sites and apps.

However, HTML5 adds native browser support for drag and drop events, a JavaScript API, and dedicated markup to support these interactions. In this section, we'll take a look at drag and drop in HTML5 and code a basic implementation of this feature.

HTML5 Building Blocks

In order to build a drag and drop interaction, your HTML markup will need to include three type of elements:

  • A source element: the element to be dragged, designated as such by the HTML5 attribute draggable="true".

  • A target element: the element where the dragged element will be dropped, designated as such by the HTML5 attribute droppable="true".

  • A payload: the data to be transfered when a dragged element is dropped.

Drag and Drop API Events

The JavaScript API includes six events and one object that you will need to use to create a drag and drop interaction.

  • The dragstart event fires when a draggable object is selected.

  • The dragenter event fires when the mouse pointer enters a droppable object while a draggable object is selected.

  • The dragover event fires every time the mouse moves while a draggable object is selected and the mouse pointer is over a droppable object.

  • The dragleave event fires when a draggable object has been selected and the mouse pointer leaves a droppable object.

  • The dragend event fires when a draggable object is deselected by releasing the mouse button or leaving the browser window.

  • The drop event fires when a draggable object is dropped onto a droppable object.

  • The dataTransfer object is used to hold the dragged data.

A Drag and Drop Example

To demonstrate how you can use HTML5 drag and drop features on your website, lets create a simple widget that allows a website visitor to arrange three elements into the order that matches their preference.

The article that served as inspiration for this example is HTML5 Rocks: Native HTML5 Drag and Drop.

Let's start with the HTML

    <div id="boxes">
        <span class="heading">Favorite DnD Implementation</span>
        <div class="box" droppable="true" draggable="true"><span class="dnd-tech">HTML5</span><span class="position">1</span></div>
        <div class="box" droppable="true" draggable="true"><span class="dnd-tech">jQuery UI</span><span class="position">2</span></div>
        <div class="box" droppable="true" draggable="true"><span class="dnd-tech">Dojo</span><span class="position">3</span></div>
    </div>

We've created three divs, each containing a bit of text relating to a different drag and drop implementation. We've also gone ahead and arranged all three in a default order with an assigned preference of 1, 2, and 3.

Each div has been given an attribute of droppable="true" and draggable="true" to reflect the fact that we're going to make all three swappable with one another.

Lets add some basic styling.

    #boxes {
        text-align: center;
        width: 100%;
        max-width: 658px;
        margin: 0 auto;
        margin: 0 auto;
        font-family: 'Source Sans Pro',FreeSans,Arimo,"Droid Sans",Helvetica,Arial,sans-serif;
        overflow: auto;
    }
    .heading {
        display: block;
        font-size: 1.25em;
        padding: 10px;
    }
    .box {
        background-color: #bcd5e0;
        border: 2px solid #aaa;
        margin: 10px;
        cursor: move;
        overflow: auto;
    }
    .box .dnd-tech {
        font-size: 1em;
        display: inline-block;
        padding: 10px 0;
    }
    .box .position {
        font-size: 1em;
        float: left;
        padding: 10px;
        border-right: 2px solid #aaa;
        color: #fff;
        background-color: #0a5194;
    }

While we won't go over those styles line-by-line, in essence, what we've done is arrange the boxes side-by-side and applied some styling throughout. Here's what our boxes look like right now:

Drag-and-Drop

Let's create some styles that will be applied to draggable and droppable elements while they're being dragged and dropped.

    .box.dragged {
        opacity: .5;
    }
    .box.over {
        border: 2px dashed #222;
        opacity: .5;
    }

On to the JavaScript. Let's start by creating the functions that will handle the addition and removal of the dragged and over classes based on user activity.

    function dragStartHandler(e) {
        this.classList.add( 'dragged' );
    }

    function dragEnterHandler(e) {
        this.classList.add( 'over' );
    }

    function dragLeaveHandler(e) {
        this.classList.remove('over');
    }

    function dragEndHandler(e) {
        [].forEach.call(boxes, function (box) {
            box.classList.remove('over' , 'dragged');
        });
    }
    var boxes = document.querySelectorAll('#boxes .box');

Right now, these functions don't do anything. Momentarily, we'll tie each to an appropriate event. For now, let's see what each one does.

The first function, dragStartHandler, will add the dragged class to the dragged element.

The next two functions will add and remove the over class from droppable elements as a dragged element passes over them.

The final function iterates through all of the boxes and removes the over and dragged classes.

Next, we need to write a function that will perform a little cleanup work to address the dragover event.

    function dragOverHandler(e) {
        if (e.preventDefault) {
            e.preventDefault();
        }
        return false;
    }

Once we tie this function to dragover it will disable default browser behavior that can sometimes get in the way during a drag and drop interaction.

Next we need to add code to two different functions so that we can use the dataTransfer object to select the data that will be moved by the interaction.


    function dragStartHandler(e) {
        this.classList.add( 'dragged' );

        dragData = this;
        e.dataTransfer.setData('text/html', this.firstElementChild.innerHTML);
    }

    function dropHandler(e) {
        if (e.stopPropagation) {
            e.stopPropagation();
        }
        if (dragData != this) {
            dragData.firstElementChild.innerHTML = this.firstElementChild.innerHTML;
            this.firstElementChild.innerHTML = e.dataTransfer.getData('text/html');
        }
        return false;
    }

We've already seen the dragStartHandler function, but now we've added two lines. The first, assigns the dragged box to the variable dragData.

The second uses the setData method of the dataTransfer object to assign the inner HTML of the first child element of the selected box (the <span class="heading">Name</span> element) to the dataTransfer object.

The dropHandler function first stops the default behavior of the browser. Next, it checks to make sure that the dragged object isn't also the droppable object. If it isn't, the next two lines kick in and swap the names of the draggable and droppable boxes.

So, now we have all of our functions in place, and we need to tie them to the six drag and drop DOM events. We can do that with a single forEach function.

    [].forEach.call(boxes, function (box) {
        box.addEventListener('dragstart', dragStartHandler, false);
        box.addEventListener('dragenter', dragEnterHandler, false);
        box.addEventListener('dragover', dragOverHandler, false);
        box.addEventListener('dragleave', dragLeaveHandler, false);
        box.addEventListener('drop', dropHandler, false);
        box.addEventListener('dragend', dragEndHandler, false);
    });

What this code does is listen for all six drag and drop events on each box and then run a function based on any triggered events. Once we put all of that code together, we produce this nice set of draggable and droppable boxes. Give it a try:

Favorite DnD Implementation
HTML51
jQuery UI2
Dojo3

Summary

HTML5 adds native browser support for draggable and droppable elements. Implementing drag and drop functionality involves the manipulation of six different drag and drop events and one data object with JavaScript.

HTML5 Iframe

In essence, an iframe is an HTML element that creates a small browser window nested within a webpage in which you can load any HTML document.

What Are Iframes Used For?

One of the most common uses for iframes on the modern web is to embed streaming media on a webpage. Media streaming websites such as Spotify, Vimeo, and YouTube use iframes to allow their content to be embedded on other websites.

For example, go to YouTube, open up any video, right-click on the video and select Copy embed code. When you do, code that looks something like this will be copied to your clipboard:

<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/jNQXAC9IVRw" frameborder="0" allowfullscreen></iframe>

Add that bit of code to a webpage and an iframe will be used to load the YouTube video hosted at the URL referenced by the src attribute.

Streaming media isn't the only thing iframes are good for. Another way that iframes are used is to isolate content from the rest of the webpage. Here are two examples:

  • Sites that display lots of code in tutorials may use iframes to render that code without having to fight against the default styles and scripts that apply to their website.

  • Sites that display third-party advertisements often use iframes to load these ads, that way the ads can be changed out by replacing the code in the source document without doing a thing to the code on the webpage where the ad is displayed.

The HTML 4.01 Iframe

The iframe element was introduced in HTML 4.01 and includes four primary attributes:

  • src: specifies the URL of the HTML document to be rendered in the iframe.

  • width and height: indicates the size of the iframe in pixels.

  • name: allows the iframe can be targeted by a, form, button, or input elements.

HTML 4.01 also included a range of additional attributes of secondary importance. However, many of these were deprecated or removed outright in HTML5.

Iframe Attributes Removed by HTML5

The largest group of removed attributes were those that addressed factors that are better addressed with CSS.

  • The align attribute was deprecated in favor of using the float, display, and margin CSS properties to control iframe layout.

  • The frameborder attribute was deprecated in favor of CSS borders.

  • The marginheight and marginwidth attributes were deprecated in favor of CSS padding.

  • The scrolling attribute was deprecated in favor of applying overflow: hidden; to hide iframe scrollbars.

One additional attribute, longdesc, has suffered from widespread misuse. As a result, it is now obsolete.

Iframe Attributes Added by HTML5

HTML5 added two new attributes to the iframe element: sandbox and srcdoc.

The sandbox attribute is used to limit the capabilities of iframe content.

For example, simply adding sandbox to an iframe will prevent the embeded content from executing scripts, submitting forms, loading content in the top-level browsing context, and other things. The restrictions applied to the iframe can be reduced by adding a value to the attribute.

For example, sandbox="allow-forms" will allow forms in an iframe to be submitted. Additional values for this attribute include, but aren't limited to, allow-popups, allow-same-origin, allow-scripts, and allow-top-navigation.

The srcdoc attribute can be used to specify HTML to render in the iframe. For example, the following code would render an image in an iframe:

<iframe srcdoc="<img src='/path/to/image.jpg'>" width="100px" height="100px"></iframe>

Iframe Resources

If you'd like to learn more about iframes, one of the most comprehensive resources is the Mozilla Developer Network Iframe Element Reference Page. Here you'll find a detailed description of every iframe attribute, including an in-depth discussion of all possible sandbox values.

HTML5 Microdata

When you visit our hosting reviews you may see something like "752 reviews" and a "4 out 5 stars" host rating. Instinctively, you understand that 752 user reviews have been combined to create an aggregate host rating of 4 out of 5 stars.

However, search engines aren't quite as smart as you, and that's where microdata comes in.

Microdata is a set of HTML attributes that were added as part of the HTML5 specification to provide machine-readable labels for certain types of content. Using these tags allows search engines to better understand and index your site's content and produce better search results.

Microdata Basics

Microdata consists of related name-value pairs grouped together into a single item. Let's look at a generalized example.

We start with an item, such as a website. Once we know we're dealing with a website, there are many name-value pairs we could potentially associate with that website, such as a URL, website name, or description.

To create a microdata item we would start by creating a parent element to contain all of the website microdata. Then we would list the microdata in child elements and tag them with appropriate microdata tags.

In the end, a search engine would access the page, identify the website item, and associate all of the appropriate microdata with that item.

If this all sounds a bit abstract right now, seeing actual microdata markup will make this all a lot clearer. But before we can do that, we need to introduce the microdata attributes.

Microdata Markup

There are four microdata attributes that are part of the HTML5 specification:

  • itemscope is the attribute that creates a new item.

  • itemtype is added alongside itemscope to define the type of item being created. In most cases, a schema.org item type is used.

  • itemprop is added to each element that contains a property of the type.

  • itemref is added to the itemscope element and associates elements that aren't direct descendants of the itemscope element with the item.

Let's add all of these attributes to a fictional web host rating so you can see them all in action.


<div itemscope itemtype="http://schema.org/Corporation" itemref="review-1">
  <h1 itemprop="name">
    <a href="http://superlinuxhosting.com" itemprop="url" target="_blank">Super Linux Hosting</a>
  </h1>
  <p itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">Rated:
    <span itemprop="ratingValue" min=0 value=4 max=5>4 out of 5 stars</span> by
    <span itemprop="reviewCount">423</span> real user reviews.
  </p>
</div>
<h2>Featured User Review</h2>
<div id="review-1" itemprop="review" itemscope itemtype="http://schema.org/Review">
  <p>
    <span itemprop="description">This is a great host! I love them!</span>
    <span itemprop="ratingValue" min=0 value=5 max=5>5 out of 5 stars!</span>
  </p>
</div>

The code above creates an item that contains a number of name-value pairs:

  • First, we created a corporation item.

  • The item name is set to Super Linux Hosting.

  • The item URL is set to http://superlinuxhosting.com

  • The item aggregate review is a nested item that contains two name-value pairs: a rating value of 4 out 5 stars and a review count of 423.

  • Finally, by way of the itemref attribute added to the very first element, the last name-value pair is a review who's value includes two name-value pairs: a description and a rating of 5 out 5 stars.

With the presence of the microdata, Google and other search engines would index the information and recognize the Super Linux Hosting corporation and associated aggregate rating and individual review.

Microdata Resources

If you want to learn more about microdata there are two places you should go:

HTML5 Global Attributes

Attributes can be added to any HTML element to modify the default functionality or behavior of the element. They are added by naming the attribute and then specifying an attribute value within the element's opening tag, like this:


<tag attribute="value">Content</tag>

Most attributes can only be applied to specific types of elements. However, other attributes, referred to as global attributes, may be used with any HTML element. The HTML5 specification defines the following global attributes:

  • accesskey: assigns a keyboard shortcut to an element.

  • class: adds a class name to allow targeting of an element with Cascading Style Sheets (CSS) for styling or a JavaScript program.

  • contenteditable: makes an element editable by a website visitor.

  • contextmenu: associates a custom context menu option with an element.

  • data-*: a custom data attribute which can be used to hold page-specific information for use selection within CSS stylsheets or JavaScript programs.

  • dir: assigns directionality to the textual content of an element.

  • draggable: allows an element to be dragged using native HTML5 support for drag and drop events.

  • dropzone: defines the action that should take place when a dragged item is dropped. Options include copy, link, and move.

  • hidden: is used to hide an element until it should be displayed. The attribute is removed with JavaScript when appropriate to do so.

  • id: assigns a unique identifier to an element.

  • lang: defines the language of the content in the associated element.

  • spellcheck: determines whether a user input should be checked for spelling.

  • style: allows the attachment of CSS styles directly to an HTML element.

  • tabindex: determines the position in the tab index at which the element should appear.

  • title: adds text which is displayed as a tooltip when a visitor hovers the mouse over the element.

  • translate: is used to prevent browser translation of the textual content of specific HTML elements.

Event Handlers

In addition, there are more than 50 event handlers that may be added as HTML attributes to any HTML element. Each of these events handlers can be used to trigger some associated code to run when the event occurs.

The list below includes all of the event handler attributes followed by a description of the event that triggers the handler.

It's worth noting that many of these event handlers are only applicable to just a few HTML elements, despite the fact that the HTML specification allows for their application to any HTML element.

  • onabort: the loading of an element has aborted.

  • onfocus and onblur: an element has received or lost focus.

  • oncancel: the users has dismissed a dialog element.

  • oncanplay and oncanplaythrough: a media element has downloaded enough data to begin playback or to complete playback without buffering.

  • onchange: a the value of a form element, such as an input or textarea element, has changed.

  • onclick and ondblclick: an element has been clicked or double clicked.

  • onclose: one of several different close events has occurred.

  • oncontextmenu: the context menu has been opened by right-clicking on the element.

  • oncopy, oncut, and onpaste: the targeted element has been cut, copied, or pasted.

  • oncuechange: a text track associated with a media resource has changed the currently displayed cues.

  • ondrag, ondragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstart, ondrop: a draggable element is manipulated using the HTML5 drag and drop API.

  • ondurationchange: the duration attribute of a media element has changed.

  • onemptied: a media element has become empty.

  • onended: the end of a media element has been reached.

  • onerror: the resource failed to load.

  • oninput: the value of an input or contenteditable element has changed.

  • oninvalid: a submitted element has failed validation.

  • onkeydown, onkeypress, and onkeyup: a keyboard key press event has occurred.

  • onload, onloadeddata, onloadedmetadata, onloadstart: either an entire resource or the specified portion of the resource has completed loading.

  • onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, and onmouseup: a mouse-based interaction between the user and element has occurred.

  • onwheel: the wheel button of a mouse has been rotated.

  • onplay and onplaying: a media element has begun playback or has been paused (either intentionally or while waiting for additional data) and is ready to resume playback.

  • onpause: media playback has been paused.

  • onprogress: an operation has begun and is in progress.

  • onratechange: the media playback rate has changed.

  • onreset: a form element has been reset.

  • onresize: the size of the document viewport has changed.

  • onscroll: the viewport or an element has been scrolled.

  • onseeked and onseeking: the seek feature of a media element has been used or is being used.

  • onselect: some of the content of an element has been selected.

  • onshow: the context menu has been launched while the element in focus has a contextmenu attribute.

  • onstalled: media retrieval has been delayed or stalled unexpectedly.

  • onsubmit: a form element has been submitted.

  • onsuspend: loading of a media element has been suspended.

  • ontimeupdate: the currenttime attribute of a media element has been updated.

  • ontoggle: a details element has been opened or closed.

  • onvolumechange: the playback volume of a media element has been changed.

  • onwaiting: playback has stopped while waiting for more data to be downloaded.

HTML5 DOM Elements

When a browser renders a webpage, it does not simply render the webpage HTML. Instead, the browser first builds a local, interactive model of the HTML content of the page.

This model, built and held locally in the browser memory, is called the Document Object Model (DOM). Within the DOM, every HTML element exists as a single node, and the sum of the nodes constitutes the DOM.

Accessing the DOM

In order for scripting langauges such as JavaScript to interact with the DOM, every node must be callable using standardized language-independent attributes and methods.

These attributes and events are defined using interface definition language (IDL) and these IDL attributes and events expose DOM nodes to scripts written in any programming language, although JavaScript is by far the most common.

The result is a system that takes an HTML element (for example: <p class="body-text" title="example">Some text</p>) and creates a DOM node that contains all of that information (for example: a p node with a value of Some text and the IDL attributes className="body-text" and title="example").

Scripting languages can then be used to manipulate DOM nodes by referencing the node's IDL attributes.

Fundamental IDL Attributes and Methods

The HTML5 specification defines the HTMLElement interface and lists a number of IDL attributes and methods that apply to all HTML elements.

Each individual DOM node inherits all of these IDL attributes and methods and may optionally expand on the HTMLElement interface by adding additional attributes and methods.

The HTMLElement Interface

The HTMLElement interface applies to all DOM nodes and can be divided into three groups: metadata attributes, user interactions, and global event handlers.

Metadata attributes include:

  • The title IDL attribute is set by the title HTML attribute.

  • The lang IDL attribute is set by the lang HTML attribute and is used to identify the language of the content nested within a DOM node. If no lang attribute is provided, the language assigned to the nearest parent node is implied.

  • The translate attribute is used to prevent client translation of webpage content. The attribute defaults to translate=yes at the document level and must be manually set to translate=no for any nodes that should not be translated.

  • The dir attribute determines the directionality of the contained text. The attribute has no default value.

  • dataset IDL attribute is the readonly DOM representation of the custom data attribute data-*. When custom data attributes are added to an HTML element, for example data-postId="6057", those data attributes are aggregated into a single dataset IDL attribute and assigned to the resultant DOM node.

User interactions include:

  • The hidden attribute is a boolean that determines whether or not a DOM node is visisble.

  • The click() event simulates a mouse click user interaction.

  • The tabIndex attribute determines the order a DOM node will appear in the tab index.

  • The focus() event simulates a user interaction in which the targeted DOM node comes into focus.

  • The blur() method is used to unfocus the targeted DOM node.

  • The accessKey IDL attribute is set by the accesskey HTML element attribute and assigns a keyboard shortcut to the targeted node.

  • The accessKeyLabel IDL attribute is a readonly representation of the assigned access key.

  • The contentEditable IDL attribute is set by the contenteditable HTML element attribute and determines whether users may edit the target node.

  • The isContentEditable IDL attribute is a readonly boolean value that indicates whether the target node is editable.

  • The spellcheck IDL attribute is a boolean value that determines whether the content of an DOM node, typically an input node, should be checked for proper spelling.

The list of global event handlers is fifty entries long and you can review the list in Chapter 9. The following ten event handlers are some of the most important and commonly used global event handlers:

  • onclick

  • onfocus

  • onkeypress

  • onload

  • onmouseenter

  • onmouseleave

  • onmouseover

  • onscroll

  • onselect

  • onsubmit.

HTML5 Forms

Forms have long been a part of the HTML specification. However, in HTML5 form functionality is significantly expanded with new attributes for the input and form elements, new input types, and even a couple of brand new elements.

HTML Form Basics

When building an HTML form, you should generally start with the form tag:


<form>
  <!--form input fields will be added here-->
</form>

In between these tags you'll nest a variety of fields to accept and submit data. The most important form elements are:

  • The input element, which defaults to a standard text field. However, by using the type attribute, input elements may be formatted to accept passwords, reset all form fields, display radio buttons or checkboxes, generate buttons, and submit form contents.

  • The textarea element, which is used to create text input areas for long-form typed answers.

  • The select element, which is used along with the option element to create drop-down lists. The select element creates the list and each option, nested within the select element, represents another option available in the list.

  • The button element, which is used to create form buttons.

HTML5 Form Enhancements

HTML5 introduced many new types of inputs, input and form attributes, and three new form elements. Let's cover each in turn.

New input element types:

  • The color input type identifies a field that should accept a color and some browsers will generate a color picker when the field is in focus.

  • HTML5 introduced six new time and date input types, each of which will generate a datepicker in supported browsers:

    • date: select a date that includes the day, month, and year.

    • datetime: select a date and time along with time zone information.

    • datetime-local: select a date and time, but omit time zone information.

    • time: select a time.

    • week: select a week and year.

    • month: select a month and year.

  • The email input type is used to identify a field that should accept an email address. Supported browsers will also perform basic input validation to make sure an email address has been typed.

  • HTML5 introduced two new number oriented input types: number and range. Number allows the input of any number, subject to optional minimum and maximum value constraints. Range creates a slider bar, limited by minimum and maximum values, that allow a user to select a value within the specified range of acceptable values.

  • The search input type is used to identify a search prompt.

  • The tel input type is used to identify a field that should accept a telephone number. Supported browsers will perform basic input validation to confirm that a phone number has been entered.

  • The url input type identifies a field that should accept a url. Supported browsers will perform basic validation, and supported mobile devices may display a .com typepad button.

New input element attributes:

  • autocomplete: turns autocomplete on or off for an input element. If turned on, autocomplete values will be pulled from saved form entries.

  • autofocus: specifies an input element that will be automatically in focus when the page loads.

  • form: uses an id assigned to a form to assiocate an input element that is not nested inside of a form with the form.

  • formaction: assigned to a submit field to override default form behavior by providing an alternate URL for form processing.

  • formenctype: added to a submit field to specify the type of encoding to apply to data submitted using the post method.

  • formmethod: added to a submit field to specify the HTTP method, post or get, that should be used for form submission.

  • formnovalidate: used with the submit field to prevent browser validation of form data.

  • formtarget: added to a submit field to tell the browser to display the form response in either the current window or a new window.

  • height and width: used to specify the size of a type="image" form submit button.

  • min and max: used along with a number, range, or datetime oriented input type to assign a minimum and maximum value that the selected value must fall between.

  • multiple: used along with the file or email input type to allow a user to add multiple values.

  • pattern: used to define a regular expression to use to validate the data entered into an email, password, search, telephone, text, or url field.

  • placeholder: assigns placeholder text to an input element that will be removed when the element comes into focus.

  • required: identifies an element that must be filled prior to form submission.

  • step: used along with the number, range, or a datetime oriented input type to determine the steps at which values may be selected. For example, adding step="10" to a number input limited to values between a minimum 0 and maximum of 30 would allow 0, 10, 20, or 30 to be submitted.

New form element attributes:

  • autocomplete: turns autocomplete on or off for an entire form. Autocomplete on a per-input basis can still be controlled by using the same attribute on individual input elements.

  • novalidate: turns off browser validation of a form submission.

New form elements:

The datalist element create a drop-down list of predefined suggestions for an input element. Note that this element does not limit the input field to these values. Instead, they merely act as suggestions.

The list of drop-down items is associated with an input element by the new list attribute. For example:


<input list="hosts">
<datalist id="hosts">
  <option value="SiteGround">
  <option value="iPage">
  <option value="BlueHost">
  <option value="A2 Hosting">
  <option value="InMotion Hosting">
</datalist>

The output element creates a placeholder to display the result of a process, such as a calculation. Note that output doesn't actually perform any calculations — you will still need to do that with JavaScript or a server-side program — it simply provides a place to display the result. For example:


<form onsubmit="return false">
  <p>Formula: y = mx + b</p>
  <p>Slope (m): <input type="number" id="m" name="m"></p>
  <p>Value of x: <input type="number" id="x" name="x"></p>
  <p>Y intercept (b): <input type="number" id="b" name="b"></p>
  <p>Value of Y: <output id="y" for="m b x"></output></p>
  <input type="submit" onclick="lineformula()">
</form>

If we then write lineformula() in JavaScript to process the calculation and throw in a touch of CSS we can produce the following simple yet functional JavaScript calculator:

Formula: y = mx + b

Slope (m):

Value of x:

Y intercept (b):

Value of Y:

The keygen element was also added in HTML5 as way to authenticate users. The element was designed to generate a public-private key pair which could be used to ensure that the results of the form submission were only displayed to the proper user. However, the element is now slated for removal from the HTML5 specification and should not be used.

HTML5 Semantic Elements

Many HTML elements have been designed to add semantic meaning to the content of a webpage. What this means, is that certain HTML elements imply a specific meaning with regard to the contents of the element.

For example, the use of emphasis tags, <em>, is rendered by a browser using an italic font and implies that the contents of the element should be read and understood with greater emphasis than surrounding content.

While not all HTML elements carry semantic meaning, it is important to use HTML tags according to their semantic meaning whenever possible.

Why Semantics Matter

Semantics are important for at least four primary reasons:

  • Semantics enhance accessibility. Assistive technologies are better able to convey the meaning of a webpage when the selection of HTML elements provides clues as to the meaning of the page content.

  • Semantics make content more discoverable. Search engines are better able to understand and index the content of a webpage when HTML elements are used according to their proper semantic purpose.

  • Semantic elements are a boon to internationalization. New semantic elements ruby and bdi were introduced in HTML5 to better recognize the fact that less than 15% of the world is made up of native English speakers.

  • Semantics improve interoperability by making it easier for developers and applications to understand and interact with the contents of a webpage.

As the march towards the Internet of Everything (IOE) continues unabated, semantics grow increasingly important.

The use of proper semantics, in HTML and in other forms of programming for the web, grows more critical as the number and diversity of internet-connected devices proliferates.

Today, you may think you're creating a webpage to be viewed primarily on laptops and smartphones, but in another 10 years, it's anyone's guess what sort of devices will be trying to access and make sense of your website's content.

Getting the semantics right is the key to ensuring that data remains highly accessible over time.

Semantics in HTML Prior to HTML5

HTML elements have always had semantic meaning. The use of the form or table elements has always implied a certain meaning and purpose to the content of the element.

Lists have identified to the browser as being either ordered or unordered in nature by the use of the ol and ul tags. Likewise, there is an extensive list of pre-HTML5 elements that can be used within text to add semantic meaning:

  • The em and strong tags imply emphasis and strong emphasis.

  • The s, del, and ins tags are used to identify information that is no longer applicable or has been replaced with updated information.

  • The quote and cite tags are used to identify quotations and creative works.

  • The abbr and dfn tags are used to associate explanatory comments with a term in need of definition.

  • The code, samp, kbd, and var elements are used to identify specific types of text: programming code, sample computer program output, keyboard input, and formula variables respectively.

  • The sup and sub elements identify content that should appear either as subscript or superscript text.

While plenty of HTML elements that predate HTML5 carry semantic meaning, there was one major shortcoming in the language that HTML5 addressed: the lack of structural semantic elements.

HTML Document Structure Prior to HTML5

Prior to HTML5, the div element was the primary container used to add structure to a webpage document. It was, and still is, quite common to see webpages built using divs and producing a document structure that looks something like this:

<div class="main">
  <div class="header">
    <div class="nav"></div>
  </div>
  <div class="section">
    <div class="article"></div>
    <div class="aside"></div>
  </div>
  <div class="footer">
    <div class="nav"></div>
  </div>
</div>

This approach to building page structure with the div element — a practice referred to as divitis — does not use the HTML elements themselves to imply any meaning to the structure of the page. Prior to HTML5, developers could be forgiven for this sort of practice.

However, with the availability of new structural semantic elements in HTML5, there's a better way.

Structural Semantic Elements in HTML5

HTML5 introduced the following elements to be used in place of the div soup shown in the example above. These elements provide structure to a document while simultaneously implying specific meaning to the various portions of the document:

  • The main element is designed to hold the primary contents of a webpage. If a website reuses the same header and footer across all pages, those would typically be omitted from the main element while all other webpage content may be properly nested within the main element.

  • The header element holds introductory contents about an entire webpage or a section of a webpage. It is appropriate to use it to hold the header that appears on every page of a website and also to use it to hold the title and other introductory information at the top an article or page section.

  • The footer element is designed to hold summary information about its parent element. It can be used to contain a webpage footer that appears on every page of a website as well as within an article to hold article summary information, such as authorship, topics, the date of publication, and user comments.

  • The section element is used to group together thematically-related content and typically begins with a heading element. For example, on a blog, the primary portion of the page may be one section while the sidebar may occupy a second section.

  • The nav element is used to identify a group of navigation links. Typically, nav elements are limited to reusable site-wide navigation elements, such as those appearing in webpage headers, footers, and sidebars.

  • The article element is used to group together content that makes sense as a standalone unit separate from the webpage, such as a blog post or news article. Articles can contain header, footer, section, and aside elements.

  • The aside element is used to identify information that should be understood apart from the primary flow of the content in the parent element.

While you don't have to use all of these elements when designing webpage structure, they are available for use as appropriate to provide a clearer picture of the semantic meaning of each portion of the page.

If we revisit our div-soup layout and revise it to implement these new tags, we get something that looks like this:

<main>
  <header>
    <nav></nav>
  </header>
  <section>
    <article></article>
    <aside></aside>
  </section>
  <footer>
    <nav></nav>
  </footer>
</main>

Textual Semantic Elements in HTML5

In addition to the structural elements we've covered, HTML5 also introduced a number of elements to imply specific types of meaning to bits of textual content. Let's take a look at them:

  • The address element is used to identify address information that pertains to the author or owner of a webpage or article.

  • The figure and figcaption elements are used to identify and caption visual content that is related to the content of a webpage — such as a graph, diagram, or illustration — but that does not need to appear inline with the content of the document.

  • The mark tag is used to identify text that has specific meaning in the current context. For example, it could be used to indentify each occurrence of a search term in a page displaying search results.

  • The time element identifies a bit of text as representing a specific point in time. The datetime attribute can be used to add a machine-readable version of the specific point in time to the time tag.

  • The bdi element is used to reverse the directionality of a piece of content for languages that follow a right-to-left pattern.

  • The ruby, rp, and rt elements are used to provide pronunciation aids, or rubies, for certain Asian language characters.