LPI Web Dev Essentials: HTML Document Markup

HTML Document Markup tests your ability to write valid HTML5 that browsers parse predictably and assistive technology can interpret. Expect questions on document structure, semantic elements, links, images, tables, and forms.

Skeleton and metadata

A document starts with <!DOCTYPE html>, then <html lang="en">. The <head> holds <meta charset="utf-8">, <meta name="viewport" content="width=device-width, initial-scale=1">, and a <title>; visible content lives in <body>.

Elements and semantics

• Void elements such as br, img, input, meta, and link have no closing tag.
• Use header, nav, main, section, article, aside, and footer for meaning rather than filling the page with div.
• Headings h1–h6 outline the page; never pick a level for its font size.
• Tables use caption, thead, tbody, and th scope="col" so headers are associated with cells.

Forms and accessibility

• Every control needs a label: <label for="email"> matched to id="email".
• type="email", type="number", required, minlength, and pattern provide built-in validation.
• A <button> inside a form defaults to type="submit".

Worked example

<form action="/subscribe" method="post">
  <label for="email">Email</label>
  <input id="email" name="email" type="email" required>
  <button type="submit">Join</button>
</form>

Reasoning: the label's for matches the input's id, so clicking the text focuses the field and screen readers announce the name. name is the key the server receives; type="email" triggers format validation; required blocks empty submission; method="post" keeps the address out of the URL.

Traps

Do not omit alt on content images; alt="" is correct only for decorative ones. Avoid building buttons from div, nesting a button inside an a, skipping heading levels, or placing title in the body.