Semantic Elements

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.

Nothing demotes it. A nested <h1> is still level 1 to browsers and screen readers, because the HTML5 outline algorithm that promised auto-demotion was never implemented anywhere and has since been dropped. Write explicit ranks; keep one h1.

A <ul> carries the implicit ARIA role list and each <li> carries listitem, so assistive tech announces how many links there are, each link's position in the set, and where the group ends. A stack of <a> elements in a <div> conveys none of that.

Use <article> when the block would still make sense on its own elsewhere, <section> for a thematic part of a document that has its own heading, and <div> when the grouping exists only for styling or scripting.

The scope attribute declares which cells a <th> heads: scope="col" the column beneath it, scope="row" the row beside it. Without it, assistive technology has to guess the association from position, and in two-way tables it guesses wrong.

Use br only for line breaks that are part of the content itself, such as the lines of an address or a poem — never for spacing. The wbr element marks a place where the browser may break a long unbroken string, and renders nothing otherwise.

The p element accepts only phrasing content, and div is flow content, so the nesting is invalid. The parser closes the open p when it sees the div start tag, so the div becomes a sibling of the paragraph — and the trailing </p> produces a second, empty paragraph.

Flow content is nearly everything allowed in the body; phrasing content is its text-level subset — span, em, a, img, input. Each element's specification content model names the category it accepts, and that is what makes some nestings valid and others invalid.

A <dl> is a description list of name-value groups. Each group is one or more <dt> terms followed by one or more <dd> descriptions, so several names can share a description or one name can have several. Optionally each group may be wrapped in a single <div>.

start sets the ordinal of the first item, reversed counts down instead of up, and type chooses the marker series (1, a, A, i, I). value on an <li> overrides that one item's ordinal, and later items continue counting from it.

A document may have only one <main> that is not hidden, and it must not sit inside <article>, <aside>, <footer>, <header> or <nav>. It marks the dominant content and is what skip links and screen-reader shortcuts jump to.

A <table> asserts that its content is tabular data: screen readers announce row and column counts and offer grid navigation, so a layout table makes meaningless structure audible. If one is unavoidable, add role="presentation" and give it no caption and no <th>.

They group a table's rows into header, body and footer sections, which lets browsers repeat header rows across printed pages, lets assistive tech report row groups, and gives scope="rowgroup" something to refer to. In current HTML, <tfoot> comes last.

It supplies the abbreviation's expansion, which desktop browsers show as a hover tooltip. That reaches mouse users only: abbr cannot take focus, touch devices have no hover, and screen-reader handling of the attribute is inconsistent.

Use q for a short quotation inside a sentence and blockquote for one that stands as its own block. The cite attribute holds a source URL that browsers never display, while the cite element marks the title of a work.

The datetime attribute holds a machine-readable version of the date, time or duration the element's visible text describes, using the formats HTML defines. You may omit it only when the element's own text is already a valid one of those strings.

The a element's content model forbids interactive content descendants, and button is interactive content, so nesting a control inside a link is invalid. Restructure the markup: link only the non-interactive content, and place the button as a sibling outside the anchor.

Screen reader users jump heading to heading with a shortcut key or pull up a headings list to skim a page. A logo as h1 makes every page's top entry identical, and styled divs never enter the list at all, so the page reads as one undifferentiated block.

WebKit deliberately drops list semantics for a list whose markers are removed with list-style, treating it as presentational. Adding an explicit role="list" to the <ul> re-declares the semantics and restores the announcement.

Give each landmark an accessible name with aria-label or aria-labelledby, so the list reads "Primary navigation", "Breadcrumb", "On this page" instead of three identical entries. Leave the word navigation out — the role is announced already.

Give each header cell an id, then list the relevant ids in each data cell's headers attribute. That explicit association replaces positional guessing and handles multi-row headers and spanning cells that scope alone cannot describe.

Make the heading rank an input the page supplies, since only the page knows the nesting depth. Deriving rank from a composition context automates it but hides breakage; hardcoding one rank everywhere flattens outlines; role="heading" with aria-level is the last resort.

A transparent content model means the element accepts whatever its own parent accepts. So an <a> inside a div may wrap flow content such as a whole article, while the same <a> inside a p may wrap only phrasing content.

Modern <hgroup> wraps exactly one heading plus one or more <p> elements holding its subtitle or tagline. It groups them as related content; it does not create a heading of its own or change the heading's level.