Keeping Up with HTML

After this lesson you can

• Check whether an HTML feature is safe to use with MDN, Baseline and Can I use
• Use a newer feature with progressive enhancement, so the page still works in browsers that lack it

Key takeaways

• HTML is a living standard, kept by the WHATWG and updated all the time. There is no HTML6 coming; new features arrive one at a time.
• An obsolete feature, such as <center> or <font>, still shows in browsers but shouldn't be used. The validator flags it, and MDN names what replaces it.
• Baseline says whether a feature works in every major browser. Newly available means the latest versions of all of them; widely available means 30 months after that.
• Before you ship a feature, check its Baseline status on MDN, or its numbers on Can I use.
• With progressive enhancement, the page works without the new feature, and browsers that have it get the better version. Browsers skip the tags and attributes they don't know.

You find a tutorial that wraps a heading in <center>. A blog post raves about a brand-new HTML feature that does in one attribute what used to take a page of JavaScript. A job post asks for "HTML5". Which of these is current, and which can you use on a page people visit today? HTML keeps growing after you finish this course, and every developer needs a way to keep up without reading every announcement. This lesson gives you that way: where HTML's rules are written, which reference to trust, and how to decide whether a new feature is ready for your page.

HTML is a living standard

Your phone's apps don't wait for a new phone to get better: they update a little every few weeks. HTML works the same way.

HTML's rules are written in one document, the HTML Living Standard, at html.spec.whatwg.org. It's kept by the WHATWG (the Web Hypertext Application Technology Working Group, read "what-W-G"), a group run by the companies that make the major browsers: Apple, Google, Microsoft and Mozilla. A feature goes into the standard when browser makers agree on it, and it reaches you when browsers ship it.

There is no version number. "HTML5" was the name of a 2014 edition, and people still use it to mean "modern HTML", but no HTML6 is coming. You can see this in the first line of every page you write:

<!-- An HTML 4.01 page from 1999 named its version: -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!-- A page today doesn't, because there's only one HTML: -->
<!DOCTYPE html>

Obsolete features: still shown, never used

Browsers have one firm rule: never break an old page. A page made in 2001 still opens today. So when HTML drops a feature, browsers usually keep showing it, and the standard calls it an obsolete feature: something a page shouldn't use any more. Other places call it deprecated; the HTML standard says obsolete.

<!-- Obsolete: still shows, but the validator flags it -->
<center><font color="purple" size="5">Pixel Palace</font></center>
<marquee>Moon Garden is half price!</marquee>

<!-- Today: the HTML says what it is, and CSS decides how it looks -->
<h1>Pixel Palace</h1>
<p><strong>Moon Garden is half price!</strong></p>

Most obsolete features were about looks (<center>, <font>, <big>, the align attribute), and looks belong in CSS now. When an old tutorial uses one, the validator says so, and the element's MDN page says what to use instead.

MDN and Baseline: is it in every browser?

You need one reference you can trust, the way a cook trusts one good cookbook. For HTML, CSS and JavaScript that's MDN Web Docs (developer.mozilla.org), written by Mozilla, browser makers and volunteers. Search for "mdn" and the element, such as mdn dialog. Each element's page has what it does, every attribute, examples, accessibility notes, and a browser support table.

At the top of most MDN pages is a Baseline badge. Baseline is a shared label, agreed by a W3C group that includes the browser makers, and it answers one question: does this work in Chrome, Edge, Firefox and Safari, on computers and on phones?

A Baseline badge also tells you when a feature became newly available, so you can see how long people have had to update.

Try it. Open MDN's page for <dialog> and find its Baseline badge. Then look up <marquee>: what does the top of its page say instead?

Can I use, and the release notes

Can I use (caniuse.com) answers the same question with numbers: type a feature's name and it shows which browser versions support it and roughly what share of people's browsers worldwide can use it. Use it when you want a number, such as "97% of visitors", or when an older browser your visitors use matters, such as the browser on a school's old laptops.

To hear about features as they arrive, follow the browsers' own news a few times a year: Chrome's New in Chrome posts, Firefox's release notes for developers on MDN, and Safari's release notes on the WebKit blog. You don't need to learn every feature; you need to know it exists, so you look it up when a problem calls for it.

Use it safely: progressive enhancement

An escalator that stops still works as stairs. Progressive enhancement builds a page the same way: it works for everyone first, and browsers that have a newer feature get the better version on top.

HTML is well suited to this, because browsers skip tags and attributes they don't know and show the content inside. Take Pixel Palace's preorder details, shown in a popover:

<button popovertarget="preorder-info">Preorder details</button>
<div id="preorder-info" popover>
  <p>Preorders ship on launch day. You can cancel any time before then.</p>
</div>

In a browser with popover, the details stay hidden until the button is pressed. In an older browser, popover means nothing: the details show as an ordinary part of the page and the button does nothing. Everyone still gets the information. That's the test of progressive enhancement: what does a visitor without the feature see, and can they still do what they came for?

A simple way to decide:

1. Widely available: use it.
2. Newly available: use it when the page still works without it, as the popover does, or when your visitors are known to have up-to-date browsers.
3. Limited availability: use it only as an extra, never for something a visitor needs, such as buying, signing up or reading the main content.

Where to go next

You can now read any page's HTML, say why it's built that way, and fix what's wrong with it. Here's where that can take you next, all optional:

• SVG draws icons, logos and charts with tags, so they stay sharp at any size. The covers in this chapter's exercise are SVG files: open one in VS Code and you'll recognize the shape of it.
• <canvas> is a blank drawing surface that a script paints on: browser games, drawing apps and animated charts are built on it.
• The CSS in Depth course teaches you to write your own look, instead of using a ready-made stylesheet: layouts, colors, animation, and pages that fit any screen.
• The JavaScript in Depth course makes pages respond: forms that check themselves as you type, games, and custom elements of your own.

Check yourself

2 questions to try on the lesson page.

So what

The HTML you learned here will keep working for decades, and new features will keep arriving. With MDN, Baseline and progressive enhancement, you can pick up each one when it's ready, without leaving any visitor behind.

Key terms

• Obsolete feature
• Progressive Enhancement
• Baseline

Cheat sheets

• Keeping Up with HTML

Related

• Templates, Slots and Custom Elements
• Validating Your Page