HTML and HTML5
Name today's HTML specThe WHATWG's Living Standard, with no version number
List what HTML5 addedSemantic tags, video, audio, canvas, new inputs, Web Storage
Asked in interviews
AskedWhat is the difference between HTML and HTML5?
Done 0/0
To review 0
Old way, still asked about
The usual way today
Newer, check browser support
The model
- Pick each element for what the content is. CSS sets the look, and its
displayproperty decides block or inline. - The browser parses HTML top to bottom into the DOM. A plain
<script>stops the parser, and CSS holds back the first paint. - Screen readers read the accessibility tree the browser builds from the DOM. A
<button>comes with a role, a name and keyboard support. A<div>has none. - ARIA changes only what assistive technology announces, never behavior. Use a native element first.
- HTML is now the WHATWG's Living Standard, with no version number.
<!DOCTYPE html>only keeps the browser out of quirks mode.
Document & elements
the page skeleton and how tags behaveStart a page
Render the page in standards mode
<!DOCTYPE html>Put metadata in head, content in body
<head><body>Both sit inside one <html> root elementDeclare the character encoding
<meta charset="UTF-8"> Put it in the first 1024 bytesTrapNo doctype means quirks mode, and layout differs by browser.
Fit the page to a phone
Lay the page out at the screen's width
<meta name="viewport" content="width=device-width, initial-scale=1"> TrapWithout it, a phone lays the page out in a wide viewport, often 980px, and shrinks it. Never set user-scalable=.
Asked in interviews
AskedExplain the viewport meta tag.Void, block and inline elements
Name some void elements
<br><img><input>No content and no closing tagAdd a wrapper that has no meaning
<div><span>Make a span render as a block
display: blockCSS changes how it renders, not what it may containTrap<div /> doesn't close the div. HTML ignores the slash.
id, class, data and editable text
Name one unique element, or label many
id="header"class="card featured"Store data on an element and read it
data-user-id="123" el.dataset.userId Let users edit an element in place
contenteditable="true" contenteditable="plaintext-only" TipStyle with classes. An ID selector beats any number of class selectors, so rules on ids are hard to override.
Text and lists
Mark text important, or just draw attention
<strong><b>Show a reserved character as text
<>&List items, steps or terms
<ul><ol><dl>If reordering changes the meaning, use <ol>TrapScreen readers don't announce <strong> by default. For bold looks alone, use CSS font-weight.
Semantic elements
pick elements by what the content isHeader, nav and footer
Wrap the logo and main navigation
<header>TipSemantic elements give screen readers landmarks to jump to, and tell search engines what each part is.
Main and aside
Wrap the page's main content
<main id="main">One visible per page, without the header, nav or footerMark a sidebar or pull quote
<aside>Sections and headings
Mark a post that makes sense on its own
<article>Group one theme under a heading
<section>Name the page's main topic, once
<h1>Go one level deeper
<h2><h3>Never jump from h2 to h4TrapPick a heading level for structure, never for its size.
Figures and dates
Caption an image, chart or code listing
<figure><figcaption>Keep the image's alt as wellGive a date a machine-readable value
<time datetime="2024-03-15"> Links & forms
send users and data where they should goLinks
Open a link in a new tab
target="_blank" rel="noopener"Tipnoreferrer also hides the Referer header. Modern browsers add noopener to _blank links on their own.
Asked in interviews
AskedHow do you create a hyperlink that opens in a new tab?Build a form
Send a search in the URL
<form method="get">Send data in the request body
<form method="post">Label a field
<label for="email">for matches the input's idGroup radio buttons under one question
<fieldset><legend>TrapPOST isn't encrypted. Only HTTPS protects the data.
Input types and suggestions
Ask for an email, a date or a number
type="email"type="date"type="number"Suggest values but allow any
<input list="browsers"> <datalist id="browsers">Tell autofill what a field holds
autocomplete="email" autocomplete="new-password" Validate and submit
Require a value, a format or a length
requiredpattern="[A-Z]{3}" minlength="8"Turn off the browser's checks
<form novalidate>Let one button submit elsewhere, without checks
formaction="/save-draft" formnovalidateTrapUsers can skip client-side checks, so validate on the server too.
Images & media
pictures, video and drawingAlt text, subtitles and captions
Say what an image shows
alt="Dog catching a ball"In a link or button, say what it doesHide a decorative image
alt=""Add a WebVTT subtitle track
<track kind="subtitles" src="en.vtt" srclang="en">Cover sound effects and music too
kind="captions"For viewers who can't hear the audioTrapDon't write "Image of" or the file name. The old longdesc attribute is obsolete.
Responsive and lazy images
Offer one image at several widths
srcset="s.jpg 480w, l.jpg 1200w"sizes="50vw"Change the crop, or offer WebP
<source media="..."><source type="image/webp"> Inside <picture>, with the required <img> lastLoad an image only near the viewport
loading="lazy"TrapLazy-loading the hero image delays Largest Contentful Paint.
Video and audio
Embed a video in two formats
<video controls><source src="v.mp4" type="video/mp4"> <source src="v.webm" type="video/webm"> Start a video on load
autoplay mutedBrowsers block autoplay with soundLoad only the duration and size first
preload="metadata" Only a hint. With autoplay, it downloads anyway.Canvas or SVG
Paint pixels from script
canvas.getContext("2d") Games, image editing, thousands of pointsDraw shapes that stay sharp at any size
<svg viewBox="0 0 9 9">Icons, logos, diagramsTrapA canvas forgets each shape once it's drawn, and screen readers can't see it. Put fallback content inside.
Accessibility
make pages work with a keyboard and a screen readerNative elements first, then ARIA
Make a clickable control
<button>Focusable, works with the keyboard, announced as a buttonName an icon-only button
aria-label="Close" Announce a change without moving focus
aria-live="polite" Set the language screen readers speak
<html lang="en">Set it again on any part in another languageTrapARIA adds no behavior. A div with role="button" still needs tabindex and key handlers.
Keyboard and skip links
Add a custom control to the Tab order
tabindex="0"Let keyboard users jump past the menu
<a href="#main">Skip to main content</a>TrapAvoid positive tabindex. It overrides the source order.
Focus, dialogs and popovers
Open a dialog the user must answer first
dialog.showModal() Focus moves in, and the rest of the page goes inertClose a modalSend focus back to the button that opened it
Move focus after a route change
tabindex="-1"heading.focus()Show a menu or tooltip
popovertarget="menu" <div id="menu" popover>Esc or a click outside closes itTrapA z-index can't escape its stacking context. Dialogs and popovers sit in the top layer instead.
Accessible tables and feeds
Name the table and its headers
<caption><th scope="col"><th scope="row">Tie cells to headers in a complex table
<td headers="q1 north">Mark a list that loads as you scroll
<div role="feed" aria-busy="true"> Give each article its place in the feed
aria-posinset="3" aria-setsize="50" Performance
get the first screen up fastLoad scripts and styles
A plain script stops parsing while it downloads and runs. async runs the moment it arrives. defer waits for parsing to end.
Run scripts after parsing, in page order
<script src="app.js" defer>Modules defer by defaultRun a script the moment it arrives
<script async src="ga.js">Put scripts just before
</body>The old fix. defer in the head starts the download sooner.Link CSS in the head
<link rel="stylesheet"> Trapasync runs scripts in finish order, not page order.
Critical rendering path
List the steps to the first paintParse HTML into the DOM and CSS into the CSSOM. Then build the render tree, run layout and paint.
Style the first screen without waiting
<style>Inline its CSS, under about 14 KB compressed. Inline CSS can't be cached.Hold the first paint for a script
<script async blocking="render"> Resource hints
Look up or connect to an origin early
rel="dns-prefetch" rel="preconnect" Fetch what this page needs soon
<link rel="preload" href="font.woff2" as="font" crossorigin>Fetch the next page for later
rel="prefetch"TrapA font preload needs crossorigin, even on the same origin. Without it, the preload doesn't match the real request.
Asked in interviews
AskedWhat are resource hints in HTML?Core Web Vitals
Get LCP to 2.5 seconds or less
fetchpriority="high" On the hero <img>. Keep it in the HTML, not in CSS.Get INP to 200 ms or lessDefer JavaScript you don't need yet, so the main thread can respond
Get CLS to 0.1 or less
width="800" height="600"TipINP replaced First Input Delay in March 2024.
Asked in interviews
AskedHow do you optimize HTML for Core Web Vitals?Smaller files and caching
Make HTML, CSS and JS files smallerMinify in the build step, often 30 to 40 percent smaller. Turn on gzip or Brotli too.
Revalidate the HTML on every visit
Cache-Control: no-cacheCache hashed files for a year
max-age=31536000, immutableLike app.3f9a2c.js. A new version gets a new name.Set caching with a meta tag
http-equiv="Cache-Control" Not a standard value. Send real HTTP headers.Trapno-cache still stores the response, but checks with the server before reuse. no-store never stores it.
SEO & sharing
what search engines and social sites readMeta tags for search
Write the result title and snippet
<title><meta name="description"> About 50 to 60 characters, then 150 to 160Keep a page out of search results
<meta name="robots" content="noindex"> Pick the main URL among duplicates
rel="canonical"Add a keywords tag
<meta name="keywords"> Google ignores itTrapIf robots.txt blocks a URL, crawlers never see its noindex.
Previews, rich results and A/B tests
Set a shared link's title and image
property="og:title" property="og:image" og:type and og:url are required tooDescribe the page for rich results
<script type="application/ld+json"> Tag the variant a visitor sees
<body data-variant="b"> Choose it on the server, so the page doesn't flickerSend users to a variant URL302, not 301, plus a canonical link to the original
TrapShowing Googlebot a different page is cloaking.
Browser APIs
storage, location, workers and offlineStorage, location and drag and drop
Keep data across browser restarts
localStorage.setItem(k, v)Strings only. Use JSON.stringify for objects.Keep data for this tab only
sessionStorage.setItem(k, v)Cleared when the tab closesGet the user's location
navigator.geolocation.getCurrentPosition(onPos) Needs HTTPS and the user's permissionDrag an element and drop it on another
draggable="true" e.preventDefault() In the target's dragover, or drop never firesTrapAny script can read both stores. Never keep session tokens there.
Workers, observers and PWAs
Run heavy work off the main thread
new Worker("w.js")w.postMessage(data) The worker has no DOM accessKnow when an element scrolls into view
new IntersectionObserver(cb) observer.observe(el) Register a service worker
navigator.serviceWorker.register("/sw.js") Needs HTTPS. Serve it from the root to cover every page.Make the site installable
<link rel="manifest" href="/manifest.json"> Lists name, icons, start_url, displayWeb Components
reusable custom elements without a frameworkCustom elements
Register a new tag
customElements.define("x-card", XCard)The name must contain a hyphenSet up and clean up
connectedCallback() disconnectedCallback() React when an attribute changes
attributeChangedCallback() Only for names in observedAttributes Add behavior to a real button
<button is="fancy-button"> Safari doesn't support itLoad a component file into the page
<link rel="import" href="card.html"> Chrome only, dropped in version 80. Ship an ES module now.Shadow DOM, templates and slots
Give an element its own scoped DOM
this.attachShadow({ mode: "open" })Its styles and ids don't leakHold markup until script clones it
<template>Show a child in a named slot
<slot name="header"><h1 slot="header">Create a shadow root in plain HTML
<template shadowrootmode="open"> For server-side renderingPut several teams' apps on one pageServer-side includes, mount points, script tags, custom elements or iframes
TrapDeclarative Shadow DOM works only at parse time. Setting innerHTML won't create the shadow root.
Security
limit what injected and third-party code can doContent Security Policy
Allow scripts from your origin and a CDN
script-src 'self' https://cdn.example.com Trust one inline script
<script nonce="r4nd0m">A new random nonce on every responseTrapA <meta> policy can't set frame-ancestors or report-only mode. Send the header.
Asked in interviews
AskedExplain Content Security Policy (CSP).CDN scripts and iframes
Refuse a CDN file that was changed
integrity="sha384-<hash>" crossorigin="anonymous" Fetch a script or image with CORS
crossorigin="anonymous" crossorigin="use-credentials" Embed a page with no scripts or forms
<iframe src="widget.html" sandbox>TrapNever give a same-origin frame allow-scripts with allow-same-origin. Its script can remove the sandbox.
Nothing matches. Try a shorter word, or clear the search.
Found this useful? Pass it on.
Pro · $10/mo
This sheet stays free. With Pro, you can:
- Every answer on this sheet. Read the full answer to all 87 questions it links, not just the 14 free ones.
- My sheet. The cards you star and the ones you miss in Quiz me, from every sheet, on one page to quiz and print.
- PDFs. Download this sheet and My sheet, laid out for A4, with every question a link to its answer.
- The rest of Pro. Every answer in the question library, and 1,000 AI credits a month.