HTML5 Introduction
HTML5 is the latest revision of HTML. The W3C finalized the standard in October 2014.
HTML5 was designed to support multimedia better on mobile devices. It is easy to learn.
Learning path
Getting started & compatibility
Graphics & media
Interaction & forms
Storage & communication
Style guide & more
What is HTML5?
HTML5 is the next generation of HTML.
The previous version of HTML (HTML 4.01) was born in 1999. Since then the Web has changed dramatically.
HTML5 continues to evolve, but most modern browsers already have solid HTML5 support.
How did HTML5 start?
HTML5 is the result of cooperation between the W3C and WHATWG (Web Hypertext Application Technology Working Group).
WHATWG focused on Web forms and applications, while the W3C had focused on XHTML 2.0. In 2006 they decided to work together on a new version of HTML.
Interesting new features in HTML5 include:
- The
canvaselement for drawing videoandaudioelements for media playback- Better support for local offline storage
- New content elements such as
article,footer,header,nav,section - New form controls such as
date,time,email,url,search
HTML5 <!DOCTYPE>
The <!DOCTYPE> declaration must be the first line of an HTML5 document:
<!DOCTYPE html>Minimal HTML5 document
A simple HTML5 document:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Document title</title>
</head>
<body>
Document content...
</body>
</html>Note
Always declare the character encoding with <meta charset="utf-8"> to avoid garbled text.
HTML5 improvements
- New elements
- New attributes
- Full CSS3 support
- Video and Audio
- 2D/3D graphics
- Local storage
- Local SQL data
- Web applications
HTML5 multimedia
HTML5 applications
With HTML5 you can build applications more easily:
- Local data storage
- Access to local files
- Local SQL data
- Application caching
- JavaScript Workers
- XMLHttpRequest Level 2
HTML5 graphics
Draw graphics with:
HTML5 and CSS3
- New selectors
- New properties
- Animations
- 2D/3D transforms
- Rounded corners
- Shadows
- Downloadable fonts
Semantic elements
HTML5 added many semantic elements:
| Tag | Description |
|---|---|
<article> | Independent content region |
<aside> | Sidebar content |
<bdi> | Text that may run in a different direction |
<details> | Details the user can show or hide |
<dialog> | Dialog box |
<summary> | Summary for a details element |
<figure> | Self-contained content (image, diagram, code, etc.) |
<figcaption> | Caption for a <figure> |
<footer> | Footer for a section or document |
<header> | Introductory content / header |
<mark> | Highlighted text |
<meter> | Scalar measurement within a known range |
<nav> | Navigation links |
<progress> | Progress of a task |
<ruby> | Ruby annotation |
<rt> | Explanation / pronunciation of characters |
<rp> | Fallback for browsers without ruby support |
<section> | Thematic section of a document |
<time> | Date or time |
<wbr> | Word break opportunity |
HTML5 forms
New form elements, attributes, input types, and built-in validation. See Input types, Form elements, and Form attributes.
Removed elements
These HTML 4.01 elements were removed in HTML5:
<acronym><applet><basefont><big><center><dir><font><frame><frameset><noframes><strike>
Examples in each chapter
Use the example blocks in this tutorial — edit the HTML and click Try it to see the result.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Title</title>
</head>
<body>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</body>
</html>Browser support
Current Safari, Chrome, Firefox, Opera, and Chromium-based Edge support HTML5 well.
For IE versions below 9, you can use html5shiv:
<!--[if lt IE 9]>
<script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/html5shiv/3.7.3/html5shiv.min.js"></script>
<![endif]-->Then initialize the new elements as block-level:
/*html5*/
article,aside,dialog,footer,header,section,nav,figure,menu{display:block}Next: Browser support