A Web Tutorial Series: HTML 5 - An Introduction to New Features

Recap of the Previous Tutorial

In our last tutorial in this series, A Web Tutorial Series: Looking at More HTML Structures: Tables, Blocks, Forms & More!, we looked at tables, forms, and block structure. The notion of inline elements and blocks was touched on. We switch gears for a bit now and look at some of the new building blocks available through the use of a number of new element types. Most you will find are of the nature of blocks only two new element type discussed in this tutorial, <time> and <mark> are inline elements.

Goals for This Tutorial

HTML 5 is the current standard for HTML which was adopted in 2012. It was designed to supercede previous versions of HTML, XHTML, and HTML DOM.

HTML 5 added new elements, attributes and features for animation, graphics, music, and videos. It can also be used to build web applications. It is designed to work across multiple platforms: smartphones, smart television, PCs, and tablets.

It was specially designed to deliver rich content without the need for additional plugins. The current version delivers everything from animation to graphics, music to movies, and can also be used to build complicated web applications.

In this tutorial we will begin exploring HTML 5. Due to the extensive amount of change and added features subject is likely to span the next several tutorials in this series. We focus here on the new HTML 5 elements.


Some of the Design Goals of HTML5

Some of the stated design goals adopted by the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG) included:

  • A reduction in the need for external plugins (e.g. "Flash")
  • Better error handling
  • Device independence
  • A more extensive and robust markup language


Simplification of Markup

The most obvious change a developer will see with HTML 5 is a simplification of markup starting with the very first statement one writes for a web page, the <doctype>. All variants and additional definition strings have been replaced by the simple statement:

<!doctype html>

If fact the minimal outline for a document is simply:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document Title</title>
</head>

<body>
Any relevant document content and appropriate HTML tags
</body>

</html>


HTML 5 New Features

Some of the features which we will be discussing in detail include:

  • An element <canvas> which can be used for 2D drawing
  • New form controls, such as: calendar, date, time, email, url, search
  • Media playback has two new elements: <video> and <audio>
  • New content-specific elements, like <article>, <footer>, <header>, <nav>, <section> thereby reducing the reliance on <div> elements
  • Support for local storage

HTML 5 Removed a Number of Elements

The following elements which had been deprecated were dropped from HTML 5:

  • <acronym>
  • <applet>
  • <basefont>
  • <big>
  • <center>
  • <dir>
  • <font>
  • <frame>
  • <frameset>
  • <noframes>
  • <strike>
  • <tt>

HTML 5 New Tags With Semantic Meaning

Prior to HTML 5 when a developer wanted to define a navigation section or a footer section, they had to resort to using divs (i.e. <div id="nav"> and <div id="footer">). HTML 5 has added new tags which are referred to as semantic tags to markup different sections of a document. HTML5 offers new semantic elements to clearly define different parts of a web page. The tags are:

  • <header>
  • <nav>
  • <section>
  • <article>
  • <aside>
  • <figure>
  • <figcaption>
  • <footer>
  • <details>
  • <summary>
  • <mark>
  • <time>

The HTML5 <article> Semantic Element

The <article> tag specifies self-contained content. There is no specific styling defined for it except that it is defined to display as a block element. Some suggested uses of the <article> tag are news items, forum or blog postings,

An article should make sense on its own and it should be possible to distribute it independently from the rest of the site, or independent commentary.

The HTML5 <aside> Semantic Element

The <aside> element defines some content which would normally be found in a sidebar in a document. The aside would be such that it would be placed to the right of the related content.

The HTML5 <details> Semantic Element

The <details> element was added for content which in its entirety may not always need to be visible. Our snapshot which follows demonstrates this for copyright information.

Example of Copyright Information Treated as Details

On the right is the code for a details section. The upper left shows the default display with the arrow which can be click to display the full copyright information.
On the right is the code for a details section. The upper left shows the default display with the arrow which can be click to display the full copyright information.

The HTML Figure Elements: <figure> and <figcaption>

These two elements go hand in hand. The <figure> tag is used to define the file location and properties of the illustration. The <figcaption> tags is used to provide a caption for the illustration.

Example of the Use of New Illustration Elements

The code and result of using the new HTML5  and  elements.
The code and result of using the new HTML5 and elements.

The HTML5 <footer> Element

The <footer> element should contain information about its containing element such as: author information, copyright, and contact information. Footers can be associated with the document as a whole or document subsections as appropriate.


Good Use of a Footer Element

A good use of a foorer is illustrated above. This type of footer could be implemented for blog postings.
A good use of a foorer is illustrated above. This type of footer could be implemented for blog postings.

The HTML5 <header> Element

The <header> element tag specifies a header for a document or section. It should be use to contain any introductory statements or links which can be a distraction when placed directly in the page content. Multiple header sections are permitted in a document. Header many not be nested however nor can they occur in a <footer> section.

The HTML5 <mark> Element

The mark element by default looks like some had a yellow high lighting pen. The snapshot show the code for the <mark> element use, the output, and the results of lookiing at the code via "inspect element".

Highlighting Some Content

The default action for the  element.
The default action for the element.

The HTML5 <nav> Element

The <nav> element tag defines a set of navigation links.

The <nav> element tag was introduced to segregate the navigation options on the principal navigition toolbar(s) for a site. It was not intended to encompass all navigation links, only the major block links.

Notice that NOT all links of a document should be inside a <nav> element. The <nav> element is intended only for major block of navigation links.

The HTML5 <section> Element

The <section> element defines a section in a document. Sections generally have a common theme and are preceded by a heading element.

The HTML5 <summary> Element

The <summary> element tag is used in conjunction wiith the <details> tag. The <summary> information is always visible while the rest of the details may be hidden or viewed as desired. The <summary> tag should follow as the first child of the <details> tag.(See the details illustration above.)

The HTML5 <time> Element

The <time> tag defines either a time or date optionally with a time and a time-zone offset. Associating the text provided with the time allows programs to associate a human readable value (e.g. My Birthday) with a value inf a format better manipulated by a machine (e.g. datetime=07-29-2014).

Time Does Not Render With Any Special Code

There is no special formatting of code tagged with the  element.
There is no special formatting of code tagged with the element.

Wrap Up and What's Next

We covered a number of new element types available with HTML 5. Most of the new elements are block elements. They were designed to surround content with specific semantic meaning with tags that reflect that meaning. This helps to reduce dependence on the <div> tags used in the past.

In our next tutorial we will look at changes to forms and new form input types.

Please Rate This Tutorial on Quality

Cast your vote for Did this tutorial provide clear information?

More by this Author


No comments yet.

    Sign in or sign up and post using a HubPages Network account.

    0 of 8192 characters used
    Post Comment

    No HTML is allowed in comments, but URLs will be hyperlinked. Comments are not for promoting your articles or other sites.


    Click to Rate This Article
    working