ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel

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

Updated on March 28, 2014

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>
<meta charset="UTF-8">
<title>Document Title</title>

Any relevant document content and appropriate HTML tags


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?


    0 of 8192 characters used
    Post Comment

    No comments yet.


    This website uses cookies

    As a user in the EEA, your approval is needed on a few things. To provide a better website experience, uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

    For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at:

    Show Details
    HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
    LoginThis is necessary to sign in to the HubPages Service.
    Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
    AkismetThis is used to detect comment spam. (Privacy Policy)
    HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
    HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
    Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
    CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
    Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the or domains, for performance and efficiency reasons. (Privacy Policy)
    Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
    Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
    Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
    Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
    Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
    VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
    PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
    Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
    MavenThis supports the Maven widget and search functionality. (Privacy Policy)
    Google AdSenseThis is an ad network. (Privacy Policy)
    Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
    Index ExchangeThis is an ad network. (Privacy Policy)
    SovrnThis is an ad network. (Privacy Policy)
    Facebook AdsThis is an ad network. (Privacy Policy)
    Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
    AppNexusThis is an ad network. (Privacy Policy)
    OpenxThis is an ad network. (Privacy Policy)
    Rubicon ProjectThis is an ad network. (Privacy Policy)
    TripleLiftThis is an ad network. (Privacy Policy)
    Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
    Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
    Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
    Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
    ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
    Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)