HTML

data-* is HTML's sanctioned slot for custom data: it is valid markup, it can never collide with an attribute the language adds later, and browsers expose it to scripts through element.dataset. An invented attribute such as userid gets none of those guarantees.

Browsers pre-scan only the first 1024 bytes of an HTML file for the encoding declaration, so <meta charset="utf-8"> must come first inside <head>. Declared later, the browser guesses an encoding and may have to reparse the document or render garbled text.

A plain <script src> pauses HTML parsing to download and run. defer downloads in parallel and runs after parsing, in document order. async downloads in parallel and runs the moment it arrives, in unpredictable order.

lang declares the document's natural language with a BCP 47 tag, and it drives screen-reader pronunciation and voice choice, hyphenation and line breaking, font and glyph selection, the spellcheck dictionary, and translation offers. Set it again on any element whose content is in a different language.

Reach for div or span only when no element with meaning fits — they carry no semantics. div is a flow-content container for blocks of content; span is a phrasing-content container for a run of text inside a line.

Heading rank encodes document structure: an h2 is a top-level section, an h3 a subsection of the h2 above it. Visual size is CSS's job, so choose the rank the outline needs and restyle it.

Only <li> elements may be direct children of <ul> and <ol>, plus the script-supporting elements <script> and <template>. A nested sublist belongs inside the <li> it hangs off, never between two <li> elements.

A top-level <header>, <nav>, <main>, <aside>, <footer>, <search> and a named <form> expose the banner, navigation, main, complementary, contentinfo, search and form landmark roles. Screen readers list landmarks so users jump between regions instead of reading everything.

The strong element marks importance and em marks stress emphasis that changes a sentence's meaning. The b and i elements set text apart without importance: b draws attention, i signals an alternative voice such as a foreign phrase or technical term.

autocomplete takes a defined vocabulary of field-name tokens — name, email, tel, street-address, address-level2, postal-code, country, cc-number — not just on/off. The token tells the browser what a field means so autofill fills it correctly.

The browser blocks submission: no submit event fires and no request goes out. It focuses the first invalid control, shows a built-in message bubble beside it, and fires a non-bubbling invalid event on each failing control.

type="email" makes the browser reject values that are not shaped like an address, switches mobile keyboards to an @-and-dot layout, and helps password managers and autofill recognise the field. It never checks that the address exists.

Two ways: an explicit label whose for attribute holds the input's id, or a label that wraps the input. Either one names the control for assistive technology and makes clicking the label text focus or toggle that control.

Only enabled controls that have a non-empty name attribute are submitted. Missing name, disabled, and unchecked checkboxes or radios all send nothing; readonly fields are still sent, and a checkbox with no value attribute sends the string "on".

An element's accessible name is the short label assistive technology announces for it. The browser computes it per element type: a button's name comes from its own text content, an image's from its alt attribute.

tabindex="0" puts an element in the tab order at its DOM position; a negative value such as -1 makes it focusable by script or click but never by Tab; a positive value jumps it ahead of everything else and wrecks the order.

Give the button an accessible name with aria-label="Delete", with visually hidden real text inside it, or with aria-labelledby pointing at existing on-screen text. Hide the decorative icon with aria-hidden="true" so it adds nothing. A title tooltip alone is not enough.

aria-live="polite" queues the announcement until the screen reader finishes what it is saying; aria-live="assertive" interrupts immediately. role="status" implies polite, role="alert" implies assertive, and both imply aria-atomic="true".

The first rule of ARIA is to not use ARIA when a native HTML element already provides the semantics and behaviour you need. Reach for button, a with href, input and label first; add ARIA only to fill real gaps.

A canonical link names the URL you consider authoritative for content that is reachable at several addresses, so duplicates consolidate onto one page instead of competing. A self-referencing canonical points a page at its own clean URL.

Without a viewport meta tag, phone browsers lay a page out in a pretend wide viewport (about 980 CSS pixels) and shrink the result to fit the screen. width=device-width, initial-scale=1 makes the layout width match the device, so width-based media queries see real sizes.

Open Graph tags in the head supply the preview: og:title, og:description and og:image, plus og:url and og:type. They use property= because Open Graph is an RDFa vocabulary, unlike Twitter's twitter:* tags, which use name=.

A script tagged type="application/ld+json" holds JSON-LD data describing the page's entities, usually with schema.org vocabulary. The browser treats it as an inert data block: never executed, never displayed. Machines such as search crawlers read it.

robots.txt controls crawling, not indexing. A crawler that obeys the Disallow never fetches the page, so it never reads the noindex directive inside it — while the URL itself, discovered from links elsewhere, can still be indexed without a description.

Alt text states the image's purpose in its context, not its appearance — what a reader would lose if the image never rendered. Purely decorative images take alt="" so assistive technology skips them instead of announcing a file name.

The width and height attributes give the browser the image's aspect ratio before the file arrives, so it can reserve a correctly proportioned box during the first layout instead of collapsing the space and shoving content down when the image lands.

The img renders; picture and source only offer candidates to it. So alt, width, height, class and loading all belong on the img, which must be the last child. A picture with no img displays nothing at all.

srcset lists interchangeable files for one image: a w descriptor states a file's intrinsic pixel width, an x descriptor targets a device pixel ratio. sizes declares how wide the image will render, which the browser needs to choose among w candidates.

The sandbox attribute revokes an iframe's capabilities by default: scripts, form submission, popups, top-level navigation, downloads and modal dialogs are blocked, and the frame runs in a unique opaque origin. Each allow-* token grants one capability back.