w3docs logo

HTML5 Introduction

HTML5 is not only a new version of HTML language enriched with new elements and attributes, but a set of technologies for building more powerful and diverse web sites and applications, that support multimedia, interact with software interfaces, 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 becomes 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 the 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 will 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

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 documents, 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>.

Example of elements belonging to the metadata content:

<head>
  <title>Title of the document</title>
  <meta charset="UTF-8">
  <style>
    * {
      color: #1c87c9;
    }
  </style>
</head>

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>.

Example of elements belonging to the flow content:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <p><abbr title="Universal Resource Locator">URL</abbr> - This is a special form of designating an individual resource address on the Internet </p>
    <hr/>
    <div>
      <p>
        Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
      </p>
      <hr/>
      <ol type="A">
        <li>Coca-Cola</li>
        <li>Ice Tea</li>
        <li>Fanta</li>
      </ol>
    </div>
  </body>
</html>

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>.

Example of elements belonging to the sectioning content:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <section>
      <h1>Article about flower</h1>
      <article>
        <h2>Roses</h2>
        <p>Rose – the queen of flowers - is the object of worship and ardent love. Since time immemorial, the rose has been the object of worship and admiration.</p>
      </article>
    </section>
  </body>
</html>

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>.

Example of elements belonging to the heading content:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <hgroup>
      <h1>Welcome to W3Docs</h1>
      <h2>Here you can learn HTML Bases.</h2>
      <h3>Some text or subtitle.<h3>
    </hgroup>
  </body>
</html>

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>.

Example of elements belonging to the phrasing content:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>Example with HTML tags</h1>
    <p>
      Here is some text <sub> with the sup tag</sub>.
    </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis ...</p>
    <p>Reference site about Lorem Ipsum,<sup> giving information on its origins</sup>, as well as a random Lipsum generator.</p>
    <p>Learn HyperText markup language (HTML) on <mark>W3Docs.com</mark> website.</p>
    <p>We’ve used &lt;strong&gt; tag to highlight <strong> this important part of the text</strong>.</p>
    <p>The important part of the text is highlighted by the <em> in italic</em>.</p>
  </body>
</html>

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>.

Examples of elements belonging to the embedded content:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>Examples of the HTML elements:</h1>
    <h2>Example of the HTML&lt;canvas&gt; tag:</h2>
    <canvas id="canvasExample" width="400" height="200"></canvas>
    <script>
      var canvas = document.getElementById('canvasExample');
      var context = canvas.getContext('2d');
       context.font = '30pt Calibri';
       context.fillStyle = '#1c87c9';
       context.fillText('Canvas Example !', 50, 100);
    </script>
    <h2>Example of the HTML&lt;img&gt; tag:</h2>
    <img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185"/>
    <h2>Example of the HTML&lt;svg&gt; tag:</h2>
    <svg width="350" height="150">
      <ellipse cx="100" cy="50" rx="100" ry="50" fill="#32ff00" />
    </svg>
    <br/>
  </body>
</html>

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>.

Example of elements belonging to the interactive content: 

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h1>Example of Interactive content</h1>
    <form>
      <select>
        <option value="books">Books</option>
        <option value="html">HTML</option>
        <option value="css">CSS</option>
        <option value="php">PHP</option>
        <option value="js">JavaScript</option>
      </select>
      <br><br>
      <textarea name="comment" rows="12" cols="35">Send your comments to the author.</textarea>
      <br>
      <button type="button">Send</button>
    </form>
  </body>
</html>

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; this is the 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 is set to hidden.

This is not a 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.

Practice Your Knowledge

What are some of the new elements introduced in HTML5?

Quiz Time: Test Your Skills!

Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.

Do you find this helpful?