Official Site® | Ledger.com/Start® | Getting started with HTML code

1. Why semantic HTML matters

Semantic HTML gives meaning to content. Using the right tags (headings, lists, paragraphs, nav) helps browsers, search engines, and assistive technologies understand the page. Good semantics improves SEO, accessibility, and maintainability.

Quick rules

Use a single <h1> for the page title or main topic.
Use headings in order: h1 → h2 → h3 (don’t jump levels arbitrarily).
Keep headings short and descriptive — they’re navigation anchors for readers and screen readers.

2. Headings: practical examples (h1 → h5)

Usage pattern

Headings form a document outline. A typical structure looks like:

<h1>Page title</h1>
<h2>Section title</h2>
<h3>Subsection title</h3>
<h4>Sub-subsection</h4>
<h5>Minor heading or label</h5>

Example in context

The snippet below demonstrates headings used in a short content block.

<article>
  <h1>Getting started with HTML</h1>
  <h2>Basics: structure & elements</h2>
  <h3>Common elements</h3>
  <h4>Text-level tags</h4>
  <h5>Microcopy & labels</h5>
</article>

3. A compact, production-ready HTML example

Paste this into a file named getting-started.html and open it in your browser. It demonstrates the recommended heading order, semantic containers, and a table of contents generated with headings as anchors.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width,initial-scale=1"/>
  <title>Getting started with HTML</title>
</head>
<body>
  <header><h1>Getting started with HTML</h1></header>
  <nav><ul><li><a href="#basics">Basics</a></li></ul></nav>
  <main>
    <section id="basics">
      <h2>Basics: document structure</h2>
      <p>An HTML page needs a doctype, <html>, <head>, and <body>.</p>
    </section>
  </main>
  <footer><small>Created for quick learning</small></footer>
</body>
</html>

Note: keep headings meaningful — they’re the single most important structure for quick scanning.

4. Best format and accessibility tips

Best format

Use UTF-8 encoding, include a responsive meta viewport, keep styles separate when your project grows (external CSS), and favour semantic tags (header, nav, main, article, section, footer).

Accessibility (a11y) checklist

Meaningful headings and landmarks (header/nav/main/footer).
Descriptive alt text for images.
Logical tab order and keyboard focus states for interactive controls.
Contrast ratio sufficient for text readability.
Use ARIA only when native HTML cannot express the semantic meaning.

5. Short SEO & performance best practices

Use one unique, descriptive <title> per page; include a short meta description; use heading text that contains target keywords naturally; avoid hidden text. For performance: minimize blocking CSS, use modern image formats (AVIF/WebP where possible), and prefer lazy-loading for below-the-fold images.

6. Ten authoritative resources (official & reliable)

Below are 10 links to official or high-quality resources to learn more. Open any to dive deeper.

These links include both specification-level references (WHATWG/W3C) and practical learning resources (MDN, Google, freeCodeCamp).