HTML5

This is the 5th major revision of the core language used in World Wide Web Browsers: the Hypertext Markup Language (HTML).

Overview

In this version, new features will be introduced to help Web application authors, new elements are introduced based on research into prevailing authoring practices, and special attention has been given to defining clear conformance criteria for user agents in an effort to improve interoperability. HTML5 is backward compatible for viewing documents but authors need to switch and should not use the deprecated features. This version permits features from XML and XHTML but does not dictate they must be used.

The goal is to provide a superset of existing HTML which can be written in HTML syntax and/or in XML syntax. It also defines detailed processing models to foster interoperable implementations. Along the way it also improves markup for documents and introduces markup and APIs for emerging idioms, such as Web applications. It has direct support for audio and video with new elements and can also support SVG and MathML syntax. Expanded CSS support includes CSS version 3.0.

While available tags are a superset attributes within tags are not. Many attributes available in HTML 4 are no longer supported. In particular attributes for width, margins, etc. are replaced with CSS3.

This is the HTML version that has been adopted as part of ePub 3.

Software and devices

The following Web Browsers that can read HTML5 to some degree.

• iPad
• iPhone and iPod Touch
• Safari 3.1 for webkit
• Opera for Presto.
• Chrome browser for Android
• Firefox and other Mozilla based browsers
• Microsoft Edge

Features supported

Safari, Firefox, Opera, Chrome all support:

• canvas - provides a straightforward and powerful way to draw arbitrary graphics on a web page using JavaScript.
• video - makes it as easy to embed video on a web page as it is to embed images today. no codec required
• audio - embedded audio support for MP3.
• geolocation - makes your location available to the web browser. For desktops this is likely the location of your Internet provider.
• app cache - makes it easy to build offline apps.
• database - storage for info on offline apps.
• workers - a mechanism for spinning off background threads to do processing that would otherwise slow the browser to a crawl.
• Data URI - embedded images in an HTML5 file itself.
• Named character references - used like entities but a much bigger set of character encodings and symbols.
• JSON - replacement for Javascript and other uses.

Sections

HTML5 introduces the idea of sections to help organize a web page. These are intended to provide an outline of the page but can be misused to make the document even more difficult to understand. The idea is to break down the body element into functional areas. In HTML4 the div element was used to break areas into groupings. However, it was misused to even hide the sectioning available in HTML4. For example HTML4 used H1, H2, etc. headings to divide up content and lower level elements to group lists and paragraphs. Some documents use on div elements for everything and depend on the CSS to provide the visual clues as to organization. This makes the source html hard to understand and makes automatic scripts even more difficult to traverse a page intelligently.

HTML5 still supports the div and h1, h2, h3, h4, h5, h6 headings and can still be used in the same way but the architecture supports new hopefully more intelligent sectioning elements. Each of the sections identified below would typically start with an h1, h2, etc. heading to identify it.

Section

The most generic of the new elements is the section element. It is designed to be placed around a logically connect portion of a web page. Generally when one section ends a new section is started. These might be, for example, like chapters in a book. Generally section elements are not nested. Since a Section is only for collection purposes it does not generally have attributes. If attributes are needed you can still use the div element. Typically a Section will start with a heading such as h1, h2, etc. If one section started with h1 and a second section started with h2 it does not mean the second section is under the first section. They are really equal so the number designation on headings does not carry over to other sections. They have meaning only within one section.

Nav

Nav is a section that is primarily being used to provide links to other places. For example a TOC would typically be a nav section. That is not to say that other areas can't also have links but the nav section identifies itself as being primarily for this purpose. Often the contents of a nav section would be lists of links but this is not required.

Article

An article element can set off one article from others in the web page. It would be possible to nest article elements where the articles inside the main article are sub-articles with related content, typically by the same author. An Article might also have section elements inside.

aside

The aside section sets off content that breaks the flow of the main document. It might identify related content or references for more information. This is like a sidebar in printed books. It could be used, for example, to provide background on a topic.

hgroup

An hgroup is placed around h1, h2, etc headings to group them so they can be treated as one heading for outline purposes. This could be used, for example, to provide a secondary title for a heading. This does not constitute a separate section.

header

The header element groups a collection of boiler plate items that may typically appear at the top of a page. It might contain introductory or navigational aids. It does not constitute a separate section and could be span portions of two sections. There would not be a header within a header.

footer

The footer element groups information that relates to the ancestor section. It could be information on the author, copyright data, links, and the like. It could be quite long and might be an appendix, index, license agreement, images, links for feedback, special offers or other similar items. There cannot be a footer inside a footer. It does not constitute a separate section.

address

The address element contains contact information. If it is in an article or the footer of an article it would show the contact data for the author of the article. If it would outside of sections then it would show contact data for the entire body element. It does not constitute a section.

MathML

MathML is supported in HTML5, here is an example of MathML in the context of an html document.

<!DOCTYPE html>
<html>
 <head>
  <title>The quadratic formula</title>
 </head>
 <body>
  <h1>The quadratic formula</h1>
   <p>
    <math>
     <mi>x</mi>
     <mo>=</mo>
     <mfrac>
      <mrow>
       <mo form="prefix">−</mo> <mi>b</mi>
       <mo>±</mo>
       <msqrt>
        <msup> <mi>b</mi> <mn>2</mn> </msup>
        <mo>−</mo>
        <mn>4</mn> <mo>⁢</mo> <mi>a</mi> <mo>⁢</mo> <mi>c</mi>
       </msqrt>
      </mrow>
      <mrow>
       <mn>2</mn> <mo>⁢</mo> <mi>a</mi>
      </mrow>
     </mfrac>
    </math>
   </p>
 </body>
</html>

The example shows a standard HTML file. Note the use of DOCTYPE using only the word html. This is the only form that should be used here for html5.

Multimedia

Audio and Video have direct support. Here is an example of audio that can be used in HTML5 and ePub 3. The audio will play when the page is opened the first time.

<audio autoplay="autoplay" loop="0" preload="auto">
 <source src="test.mp3" type="audio/mp3"/>
</audio>

For more information

• HTML5 standard - still in draft form
• HTML differences from version 4
• HTML5 test - test your browsers readiness.
• Beta version of HTML5 test
• Named character references - used like entities.