Semantic HTML and page structure

Elements and attributes

Most elements have an opening tag, content and a closing tag. Attributes provide information: href supplies a link destination and lang declares a language. Void elements such as input have no closing tag.

A complete document

head holds metadata and the tab title; body holds visible content. Save this as index.html and open it in a browser. The viewport declaration helps mobile browsers use the device width.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My library</title>
</head>
<body>
  <main>
    <h1>Programming library</h1>
    <p>Concepts and examples for learning.</p>
    <a href="https://developer.mozilla.org/en-US/">Read MDN</a>
  </main>
</body>
</html>

Choose elements by purpose

main identifies primary content, nav groups navigation and article represents an independent composition. Headings h1 through h6 express hierarchy; use CSS to adjust their size. A div is a generic container when no specific meaning is needed.

Links, buttons and forms

Use links for navigation and buttons for actions. Native controls already provide keyboard behaviour. Associate each form field with a label using for and id; a placeholder does not replace a visible label.

<label for="name">Name</label>
<input id="name" name="name" type="text">
<button type="button">Show greeting</button>

Practical review

1. Use Tab to visit links and controls; check that focus is visible.
2. Read only the headings and check the content order.
3. Check that the tab title and language match the document.