HTML5 Introduction

HTML5 is not just a new version of HTML language enriched with new elements and attributes, but a set of technologies for building more diverse and powerful web sites and applications, that interact with software interfaces, support multimedia, etc.

HTML5 Benefits

The main benefits of HTML5 are listed below:

  • HTML5 is supported by all modern browsers.
  • HTML5 is more device friendly. It is easy for use.
  • HTML5 can help creating attractive websites with CSS, JavaScript, etc.
  • HTML5 supports SVG (Scalable Vector Graphics - Wikipedia) and other virtual graphics. In earlier versions, the use of vector graphics was possible only in combination with such technologies as Flash, VML, etc.
  • The code became cleaner mainly due to replacing div tags with Semantic elements, which help better structure content of the web page and improve readability.
  • HTML5 supports geolocation, which makes it possible to determine users’ location.
  • The new standards were specified for playing multimedia (animation, audio, video) directly in the browser, without having to install additional plug-ins
  • Support for web storage introduced in HTML5 makes it possible to store large amounts of application data locally, without affecting your web application’s performance. The data in local storage would persist even when the user’s browser is closed and reopened.

Disadvantages of HTML5:

  • It is supported only by modern browsers.
  • You must write long codes which is time consuming.

HTML5 Content Models

In HTML5, the content of a web page can be divided into semantic groups, which describe its content. These groups are called content models. Each of these models describes the type of elements it contains. The content model can contain text and child elements. The element can belong to one or more content categories.

HTML5 content models are listed below:

  • Metadata content
  • Flow content
  • Sectioning content
  • Heading content
  • Phrasing content
  • Embedded content
  • Interactive content
  • Palpable content

To understand better how content models located on a web page and how they interact look at the illustration below.

As you can see, content models can overlap, and it means that elements are belonging to several categories in the meantime. For example, sectioning, heading, phrasing, embedded, interactive, and a part of metadata content refer to flow content. Metadata and interactive content in certain cases may refer to phrasing content.

There are also elements, that are used for specific purposes, for example for defining forms. Such kind of elements does not refer to any of the content mentioned above models.

Metadata content

Elements belonging to the metadata content category contain information about HTML document, set up links to other resources, define the presentation or the behavior of it. These elements are not displayed on the web page.

The elements of content model category are: <base> , <link> , <meta>, <noscript>, <script>, <style>, <template> and <title>.

Flow content

Elements belonging to the flow content category are typically those used in the body of an HTML document (enclosed inside the <body></body> tags).

The elements of flow model category are: <a>, <abbr>, <address>, <article>, <aside>, <audio>, <b>, <bdi>, <bdo>, <blockquote>, <br>, <button>, <canvas>, <cite>, <code>, <data>, <datalist>, <del>, <details>, <dfn>, <dialog>, <div>, <dl>, <em>, <embed>, <fieldset>, <figure>, <footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <hr>, <i>, <iframe>, <img>, <input>, <ins>, <kbd>, <label>, <main>, <map>, <mark>, <menu>, <meter>, <nav>, <noscript>, <object>, <ol>, <output>, <p>, <picture>, <pre>, <progress>, <q>, <ruby>, <s>, <samp>, <script>, <section>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <table>, <template>, <textarea>, <time>, <u>, <ul>, <var>, <video>, <wbr>.

The following elements belong to the flow content, but only if a specific condition is met:

  • <area> only inside <map>
  • <link> only if itemprop attribute is specified
  • <meta> only if itemprop attribute is specified
  • <style> only if scoped attribute is specified

Sectioning content

Elements belonging to the sectioning content are those creating independent sections in the structure of an HTML document (for example, header, footer, etc.) Note that each section could have its heading and outline.

The elements of sectioning content model are: <article>, <aside>, <nav> and <section>.

Heading content

Elements belonging to the sectioning content model create a section in the current outline that defines the scope of <header> elements, <footer> elements, and heading content.

The elements of heading content are: <h1>, <h2>, <h3>, <h4>, <h5>, <h6> and <hgroup>.

Phrasing Content

The elements belonging to phrasing content define and mark-up the text. They are <abbr>, <audio>, <b>, <bdo>, <br>, <button>, <canvas>, <cite>, <code>, <command>, <data>, <datalist>, <dfn>, <em>, <embed>, <i>, <iframe>, <img>, <input>, <kbd>, <keygen>, <label>, <mark>, <math>, <meter>, <noscript>, <object>, <output>, <progress>, <q>, <ruby>, <samp>, <script>, <select>, <small> <span>, <strong>, <sub>, <sup>, <svg>, <textarea>, <time>, <var>, <video> and <wbr>.

The following elements belong to the phrasing content, but only if a specific condition is met:

  • <a>, if it contains only phrasing content
  • <area> only inside the <map> element
  • <del>, if it contains only phrasing content
  • <ins>, if it contains only phrasing content
  • <link> if itemprop attribute is specified
  • <map>, if it contains only phrasing content
  • <meta> if itemprop attribute is specified

Embedded content

Embedded content imports another resource or inserts content from another mark-up language or namespace into the document. This content model includes the following elements: <audio>, <canvas>, <embed>, <iframe>, <img>, <math>, <object>, <picture>, <svg>, and <video>.

Interactive content

Interactive content model includes elements specifically designed for user interaction. They are <a> (if href attribute is specified), <button>, <details>, <embed>, <iframe>, <keygen>, <label>, <select> и <textarea>.

The following elements belong to the interactive content model, but only if a specific condition met:

  • <audio>, if controls attribute is specified
  • <img>, if usemap attribute is specified
  • <input>, if type attribute is not hidden
  • <menu>, if the value of type attribute is “toolbar”
  • <object>, if usemap attribute is specified
  • <video>, if controls attribute is specified

Palpable content

Content is palpable when it's neither empty or hidden; it is content that is rendered and is substantive. Elements whose model is flow content or phrasing content should have at least one node which is palpable, and which has no attribute whose value set to hidden.

This is not required condition, there are cases when the element can be empty. For example, it can be filled after an external script executed.

The secondary content categories

The secondary content categories are those that support scripts. The script-supporting elements don't directly contribute to the rendered output of a document, but support scripts, either by containing or specifying script code directly, or by specifying data that will be used by scripts. The script-supporting elements are <script> and <template>. The <blockquote>, <body>, <details>, <dialog>, <fieldset>, <figure> and <td> elements are called sectioning roots. Elements belonging to transparent content model are <a>, <audio>, <canvas>, <del>, <ins>, <map>, <object> and <video>. These elements inherit the type of the parent element and can contain content allowed in their parent element.

Do you find this helpful?

Related articles