HTML and Semantic Markup
The HTML and Semantic Markup domain tests whether you can build a valid document and pick elements for meaning rather than appearance. Questions target document metadata, content models, void elements, heading hierarchy and the sectioning and landmark elements.
Structure rules
<!DOCTYPE html>must come first; without it browsers fall back to quirks mode.- In
<head>, declare<meta charset="utf-8">within the first 1024 bytes, then<title>, then<meta name="viewport" content="width=device-width, initial-scale=1">. <html lang="en">feeds screen readers, spellcheck and translation tools.- Void elements (
br,img,input,meta,link,hr) take no closing tag and no children.
Content models
Every element declares what it may contain. <p> accepts phrasing content only, so a <div> inside it is invalid and the parser closes the paragraph early. <a> may wrap flow content but never another <a> or a <button>. <ul> and <ol> may only contain <li>, <script> and <template>.
Semantics
header, nav, main (exactly one per document), article, section, aside, footer, figure/figcaption and time datetime="..." describe structure. Use <section> only when the block has a heading; otherwise <div> is the correct container.
Worked example
A syndicatable post preview: <article><h2>Title</h2><p>Summary</p><time datetime="2024-03-05">5 March</time></article>. article is chosen because the item stands alone and could be republished, h2 preserves a single h1 for the page, and time carries a machine-readable date alongside human text.
Traps
Choosing <h4> because it renders at the size you want, wrapping a whole card in a link that already contains another link, nesting block elements inside <p>, and omitting alt instead of writing alt="" for decorative images.