HTMLHTML · Lesson 2 of 8

Text & Headings

HTML has a rich set of text elements. Not because web developers love complexity, but because text comes in many flavors.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Text Elements</title>
</head>
<body>

  <!-- Heading hierarchy (use only one h1 per page) -->
  <h1>Page Title</h1>
  <h2>Main Section</h2>
  <h3>Subsection</h3>
  <h4>Sub-subsection</h4>

  <!-- Semantic text elements -->
  <p>
    The <strong>borrow checker</strong> is <em>central</em> to Rust's safety model.
    The function was <del>removed</del> <ins>deprecated</ins> in version 2.0.
    The formula is E = mc<sup>2</sup>.
    Water is H<sub>2</sub>O.
    Press <kbd>Ctrl+S</kbd> to save.
    The result was <samp>Error 404</samp>.
    The variable <var>x</var> represents the input.
  </p>

  <!-- Quotes -->
  <blockquote cite="https://example.com">
    <p>The best code is no code at all.</p>
    <footer>— Jeff Atwood, <cite>Coding Horror</cite></footer>
  </blockquote>

  <p>Einstein said <q>Imagination is more important than knowledge.</q></p>

  <!-- Abbreviations with tooltip -->
  <p>The <abbr title="HyperText Markup Language">HTML</abbr> specification is maintained by the W3C.</p>

  <!-- Address -->
  <address>
    Written by <a href="mailto:alice@example.com">Alice</a>
  </address>

  <!-- Time -->
  <p>Published: <time datetime="2024-01-15">January 15, 2024</time></p>

</body>
</html>

◆ Note
Only ever have one <h1> per page — it's the main heading. Use h2-h6 for hierarchy. Screen readers and search engines use this structure to understand your content.