HTML5 Introduction
HTML5 is more than a new HTML version — it is a set of technologies for building more diverse and powerful web sites and applications.
HTML5 is not only a new version of HTML enriched with new elements and attributes, but a set of technologies for building more powerful and diverse web sites and applications that support multimedia and interact with software interfaces, etc.
This page covers what HTML5 changed compared with HTML4, the new semantic elements, the new form input types, the new JavaScript APIs, and how to embed native audio and video. If you are brand new to markup, start with the HTML introduction first.
HTML5 vs. the HTML Living Standard
HTML5 was published as a stable W3C Recommendation in 2014. Since then the language has not been frozen into numbered versions. It is now maintained by the WHATWG as the HTML Living Standard — a single specification that is updated continuously rather than re-released as "HTML6". In everyday use, "HTML5" simply means modern HTML: the standard your browser implements today.
HTML5 Benefits
The main benefits of HTML5 are listed below:
- It is supported by every current browser, on both desktop and mobile, and has been for over a decade.
- It is more device friendly and easier to author thanks to a much simpler
<!DOCTYPE html>and<meta charset="UTF-8">declaration. - It works hand in hand with CSS and JavaScript to build attractive, interactive sites.
- It supports SVG (Scalable Vector Graphics) and
<canvas>for graphics. In earlier versions, vector graphics required plug-ins such as Flash or VML. - The markup becomes cleaner by replacing generic
<div>containers with semantic elements, which structure the page better and improve readability and accessibility. - It exposes the user's location through the Geolocation API.
- It plays multimedia (audio, video) directly in the browser via native
<audio>and<video>elements, with no extra plug-ins. See HTML multimedia. - It introduces Web Storage, so applications can store data locally and keep it even after the browser is closed and reopened.
What Changed From HTML4 to HTML5
Removed and obsolete in HTML5
Several presentational features of HTML4 were dropped because styling belongs in CSS. The following are obsolete and should not be used:
- Presentational elements such as
<font>,<center>,<big>,<strike>, and<u>'s old styling role. - The frame model:
<frameset>,<frame>, and<noframes>(use<iframe>where embedding is genuinely needed). - Presentational attributes like
align,bgcolor,borderon tables, andcellpadding/cellspacing— replace them with CSS.
Added in HTML5
- Semantic elements —
<header>,<nav>,<main>,<article>,<section>,<aside>,<footer>,<figure>, and more. - Native multimedia — the
<audio>and<video>elements. - New form input types and attributes —
email,date,range, and others. - Graphics — the
<canvas>element for 2D drawing and inline<svg>. - JavaScript APIs — Web Storage, Geolocation, Web Workers, WebSockets, and more (see below).
New Semantic Elements
Instead of marking up every region of a page with a generic <div>, HTML5 provides elements that describe the role of the content. This helps search engines, screen readers, and other developers understand the page structure.
| Element | Purpose |
|---|---|
<header> | Introductory content or a group of navigational links |
<nav> | A block of major navigation links |
<main> | The dominant content of the document |
<article> | A self-contained, independently distributable piece of content |
<section> | A thematic grouping of content, usually with a heading |
<aside> | Content tangentially related to the surrounding content, such as a sidebar |
<footer> | Footer for its nearest section or the page |
<figure> / <figcaption> | Self-contained media with an optional caption |
For a full walkthrough with examples, read Semantic elements in HTML5.
New Form Input Types and Attributes
HTML5 added input types that give users purpose-built controls (date pickers, sliders, color wheels) and let the browser validate input for you. Common types include email, url, tel, search, number, range, date, and color.
New attributes such as placeholder, required, autofocus, and pattern reduce the amount of JavaScript you need for hints and validation.
<form>
<label>Email: <input type="email" placeholder="[email protected]" required></label>
<label>Birthday: <input type="date"></label>
<label>Volume: <input type="range" min="0" max="100"></label>
<label>Quantity: <input type="number" min="1" max="10"></label>
<label>Favorite color: <input type="color"></label>
<label>Website: <input type="url" autofocus></label>
<button type="submit">Submit</button>
</form>Learn more on the <input> tag page.
New JavaScript APIs
HTML5 also standardized a set of browser APIs that turned web pages into full applications:
- Canvas 2D — draw graphics, charts, and games pixel by pixel on the
<canvas>element. - Web Storage —
localStorageandsessionStoragekeep key/value data in the browser between visits. - Geolocation — ask the user for their geographic position.
- Web Workers — run scripts in a background thread so the UI stays responsive.
- WebSockets — open a persistent, two-way connection to a server for real-time data.
- History API — change the URL and navigation history without a full page reload.
Native Audio and Video
The <audio> and <video> elements play media directly, with no plug-ins. Use the controls attribute to show the browser's playback UI, provide one or more <source> elements so the browser can pick a format it supports, and add fallback text for very old browsers.
<!DOCTYPE html>
<html>
<head>
<title>Native audio and video</title>
</head>
<body>
<video width="320" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
Your browser does not support the video tag.
</video>
<audio controls>
<source src="sound.mp3" type="audio/mpeg">
<source src="sound.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
</body>
</html>See HTML multimedia for a deeper look at formats and attributes.
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 belong to several categories at the same time. For example, sectioning, heading, phrasing, embedded, interactive, and some 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 kinds of elements do not refer to any of the content models mentioned above.
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.
Elements in this category include: <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> tags).
Elements in this category include: <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:
Example elements belonging to the flow content category
<!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 theitempropattribute is specified,<meta>, only if theitempropattribute 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>, <data>, <datalist>, <dfn>, <em>, <embed>, <i>, <iframe>, <img>, <input>, <kbd>, <label>, <mark>, <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:
Example of elements belonging to 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 <strong> 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<canvas> 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<img> tag:</h2>
<img src="https://api.w3docs.com/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185"/>
<h2>Example of the HTML<svg> 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>, <label>, <select> and <textarea>.
Example of elements belonging to the interactive content:
Example of 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 is met:
<audio>, if thecontrolsattribute is specified,<img>, if theusemapattribute is specified,<input>, if thetypeattribute is nothidden,<object>, if theusemapattribute is specified,<video>, if thecontrolsattribute is specified.
Palpable content
Content is palpable when it is neither empty nor 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 palpable node, and that node should not have a hidden attribute.
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 is 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.