What HTML5 Actually Means
HTML5 is not a version you upgrade to. It is the name for a shift from a frozen specification to a living standard, and for the elements and APIs that arrived with it.
- Concept
- The short history
- What arrived with HTML5
- A short doctype
- Semantic sectioning elements
- Native media
- Better forms
- Graphics
- Data attributes
- A parsing specification
- A set of APIs
- What HTML5 removed
- Example: the same page, then and now
- What arrived after 2014
- Checking support
- Important rules
- Common mistakes
- Best practices
- Practice
-
HTML Basics
- What is HTML: The Structure Layer of Every Web Page
- HTML Document Structure: DOCTYPE, html, head and body
- Elements, Tags and Attributes: The Vocabulary of HTML
- HTML Comments: Notes That Ship With Your Code
- Block Level and Inline Elements
- Writing and Running Your First HTML Page
- How a Browser Turns Markup Into a Page
- Text and Formatting
- Links and Navigation
- Images and Media
- Lists
- Tables
-
Forms
- Form Structure: form, action and method
- Input Types: Text, Email, Number, Date and the Rest
- Labels: The Most Important Element in a Form
- Checkboxes, Radio Buttons and Grouping
- select, option, optgroup and datalist
- textarea, File Uploads and Hidden Fields
- Buttons: submit, reset and button
- Built In Form Validation
- GET or POST: What Happens When a Form Is Submitted
- Semantic HTML
- HTML5 Features
- Head and Metadata
- HTML with CSS
- HTML with JavaScript
- Accessibility
-
HTML SEO
- How Google Works: Crawling, Indexing and Ranking
- SEO Friendly HTML Structure
- Titles and Descriptions That Earn Clicks
- Headings and Content Structure for Search
- Internal Linking and Anchor Text
- robots.txt and XML Sitemaps
- Canonical URLs and Duplicate Content
- Structured Data and JSON-LD
- Image SEO
- Core Web Vitals and Mobile Friendliness
- DevTools and Debugging
- Editor Productivity
- HTML Best Practices
- HTML Projects
- Advanced Projects
- Practice and Exams
Concept
HTML5 is used loosely to mean modern HTML, and that is close enough for conversation. The precise story is worth knowing because it explains why there is no HTML6 and why which version of HTML are you using is a question with no useful answer.
The short history
| Period | What happened |
|---|---|
| 1990s | HTML grows quickly and inconsistently; browsers invent their own tags. |
| 1999 | HTML 4.01 is finalised, then development effectively stops. |
| Early 2000s | XHTML pushes strict XML rules. Malformed markup was meant to fail outright. It did not take on the open web. |
| 2004 | A group of browser vendors forms the WHATWG and starts work on what becomes HTML5, prioritising what browsers actually do. |
| 2014 | HTML5 is published as a formal recommendation. |
| Since | HTML is maintained as a living standard, revised continuously. There will be no HTML6. |
The practical consequence: HTML is not a thing you upgrade. Browsers implement changes as they are agreed, and features arrive one at a time.
What arrived with HTML5
A short doctype
<!-- HTML 4.01 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!-- now -->
<!DOCTYPE html>Semantic sectioning elements
header, nav, main, section, article, aside, footer, figure, figcaption. Before these, every region of every page was a div with a class name.
Native media
audio and video replaced plugins. This single change is why browser plugins disappeared.
Better forms
New input types - email, url, tel, number, date, range, color, search - plus required, pattern, placeholder, autofocus and datalist. Validation that previously needed a library became four attributes.
Graphics
canvas for scripted bitmap drawing, and inline svg for vector graphics that scale.
Data attributes
data-* gave a legitimate place to attach custom data to an element.
A parsing specification
Less visible and arguably the most important change. HTML5 specifies exactly how a browser must parse markup, including how to recover from errors. Before this, every browser guessed differently and the same broken page produced different DOM trees. Now the repair is defined, so all browsers build the same tree from the same bad markup.
A set of APIs
Web Storage, Geolocation, Drag and Drop, History, Web Workers, Web Sockets, the File API, offline support. These are JavaScript, not markup, but they arrived under the same banner and are usually described as part of HTML5.
What HTML5 removed
Presentational elements and attributes were dropped, because CSS does that job.
| Gone | Use instead |
|---|---|
font, center, big, strike | CSS |
frame, frameset, noframes | Nothing. Frames are gone. |
applet | object, or nothing |
bgcolor, align, border attributes | CSS |
marquee, blink | CSS animation, used sparingly |
Browsers still render most of these for compatibility, but they are invalid and should not appear in new work.
Example: the same page, then and now
<!-- 2005 -->
<div id="header">
<div id="nav"></div>
</div>
<div id="content">
<div class="post">
<div class="post-title">Admission</div>
</div>
</div>
<div id="footer"></div>
<!-- now -->
<header>
<nav aria-label="Main"></nav>
</header>
<main>
<article>
<h2>Admission</h2>
</article>
</main>
<footer></footer>What arrived after 2014
Because HTML is a living standard, useful things keep appearing. A few worth knowing:
loading="lazy"on images and iframes.dialogfor native modals.- The
nameattribute ondetailsfor exclusive accordions. - The
searchlandmark element. inertfor making a whole subtree unreachable.popoverfor lightweight overlays.fetchpriorityfor resource priority hints.
Which means knowing HTML5 is not a finished state. It is a habit of checking what is current.
Checking support
Before using a recent feature, check support and decide on a fallback. Most HTML features degrade gracefully: an unknown element renders as an inline box with no behaviour, and an unknown attribute is ignored. That makes progressive enhancement natural.
<!-- ignored by browsers that do not support it, harmless -->
<img src="a.jpg" alt="" loading="lazy">
<!-- unknown type falls back to text -->
<input type="color" name="shade">Important rules
- There is no HTML6 and no version number to declare beyond the doctype.
<!DOCTYPE html>is all that is needed, and it only switches on standards mode.- Presentational elements are obsolete but still render. Do not use them.
- Error recovery is specified, so all browsers build the same tree from broken markup - which does not make broken markup acceptable.
- Many things called HTML5 are JavaScript APIs, not markup.
Common mistakes
- Asking which HTML version a project uses, as though it were a dependency.
- Copying an old four line doctype from an old tutorial.
- Using
center,fontorbgcolorbecause they still work. - Assuming every HTML5 feature is supported everywhere, without checking.
- Treating XHTML style self closing tags as required. They are ignored.
- Believing HTML5 knowledge is a fixed body of material learned once.
Best practices
- Use the short doctype and semantic elements as a matter of course.
- Check support for anything added in the last two or three years.
- Build so that a missing feature degrades rather than breaks.
- Validate against the current specification, not against memory.
- Read the changelog of the living standard occasionally. It is short.
Practice
- Take a page written in the old
divandidstyle and convert it to semantic elements. - Run a page containing
centerandfontthrough the validator and read the errors. - Pick three features added after 2020 and check their support before using them.
- Write a page using
dialogand describe what a browser without support does with it.