HTML5   The new and powerful tags


Reading: We strongly suggest you read chapter 12 of Head First HTML and CSS with these notes.

The need for meaningful tags

HTML was designed to structure the content of a web page (hence the name, markup language). That explains the existence of tags like <p>, <h1>, <ol>, etc. However, when web developers started creating pages with a lot of content, it became clear that to make better use of the available screen space, a way to organize the page content in bigger chunks was needed. Then, CSS could be used to arrange their position on the page. Therefore, the tag <div> was born (short for division), which is currently the most used (and overused) tag in every webpage. While this seemed to have solved the page layout problem, HTML code became difficult to understand, other computer programs (e.g. search engines) couldn't make sense of all divs in a page, if they wanted to use the organization of the page for inferring the meaning of the content.

HTML5 introduced a series of new tags that have meaningful names and can be used universally to express what the content is about, beyond the existing simple tags. Additionally, to make the pages more alive with different kinds of content, several new tags that allow content to be embedded in a page were also added. In the following, we will give a short summary of some of these tags. Try to make use of them in your pages. They will make your code better and more readable to the programs of the future.

Semantic Tags

Here is a list of new HTML5 tags that are known as semantic tags, because their names have specific meaning:

Tag Name Short Description More Info
<header> Specifies a header for a document or section.
<footer> Specifies a footer for a document or section.
<section> Defines sections in a document (e.g. chapters).
<nav> Defines a set of navigation links.
<aside> Defines content which is relevant but not central (e.g. callouts, sidebars).
<article> Defines independent, self-contained content (e.g., blog post, news story).
<abbr> Indicates an abbreviation or acronym.

<abbr title="United Nations">UN</abbr>

See an example in action in the paragraph below for the word W3C.

Browser Support

Changing the web language standards goes through a lengthy process spearheaded by the W3C consortium. The vendors of the browsers need often many years to implement all the changes. Therefore, not all new HTML5 are currently supported by all browsers. The info link in the table gives information about which browsers currently support the tag.

Media Tags

HTML5 also introduces more meaningful tags to support embedding media resources directly in the page, allowing for a more rich experience in the browser. Below we show four such tags in action.

Tag Name Short Description More Info
<figure>
<figcaption>
Specifies self-contained content (e.g. illustrations, diagrams, photos). It uses <figcaption> to specify individual or group captions.
<canvas> Specifies a space for drawing graphics through Javascript.
We will study this tag in Lecture 12, after we have learned some Javascript.
<video> Specifies video, such as a movie clip or other video streams.
Three supported formats for the moment are MP4, WebM, Ogg.
<audio> Specifies sound, such as music or other audio streams.

The <figure> and <figcaption> tags

The tags in action:

Chihiro from the movie Spirited Away. Image Source.

Here is how to use these two tags

  <figure> 
    <img src="images/imageName.png" alt="image description" >
    <figcaption>A caption for the image</figcaption>
  </figure>
          

For more examples and explanation for this pair of tags read this article by the HTML5Doctor website.

The <canvas> tag

Here is an example of an animation written in Javascript that works together with the <canvas> element.

The animated solar system. Click here for source

The <video> tag

Here is an example of embedding video directly on your page:

  <video controls
            autoplay
            src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
            width="300"
            id="bunny_video"
  >
          

The attributes controls and autoplay are called boolean attributes. A tag either has or not has them.

The <audio> tag

Here is an example of embedding audio directly on your page:

    <audio controls>
      <source src="http://www.jingle.org/britsungmont.mp3" type="audio/mpeg">
      Your browser does not support the audio element.
    </audio>
  

Live Testing

Often you want simply to try out new elements or their combination, without having to write a complete HTML document. We have already seen how the documentation for the HTML tags by the W3Schools website provides an editing space where to experiment with tags. However, there are many more tools on the web that allow you to do the same, for all three languages at once: HTML, CSS, and Javascript.

One tool that we will be using during lecture time for experimentaion is jsfiddle. Here is a screenshot from trying out the <video> tag directly in its workspace.

a screenshot for jsfiddle
A screenshot from jsfiddle use