Text and Formatting

<h1>Page Title</h1>
<h2>Section</h2>
<h3>Sub-section</h3>
<h4>Sub-sub-section</h4>
<h5>Fifth level</h5>
<h6>Sixth level</h6>

<p>A paragraph of text. HTML ignores extra whitespace — wrap long lines freely.</p>

<p>Second paragraph. Browsers add margin between paragraphs automatically.</p>

<!-- Line break within a paragraph (use sparingly — prefer CSS margin) -->
<p>Line one.<br>Line two.</p>

<!-- Thematic break / horizontal rule -->
<hr>

<p>
  <strong>Warning:</strong> This is <em>very</em> important.
</p>
<p>
  The word <i>serendipity</i> means a happy accident.
</p>
<p>
  Price was <s>$29.99</s> now <strong>$19.99</strong>.
</p>
<p>
  Chemical formula: H<sub>2</sub>O and E = mc<sup>2</sup>.
</p>
<p>
  Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to save.
</p>
<p>
  Output: <samp>Error: file not found</samp>
</p>
<p>
  The variable <var>x</var> is unknown.
</p>
<p>
  <abbr title="HyperText Markup Language">HTML</abbr> is the web's language.
</p>
<p>
  From <cite>The Great Gatsby</cite> by F. Scott Fitzgerald.
</p>
<p>
  She said <q>hello there</q> and walked away.
</p>
<p>
  <mark>Highlighted</mark> for emphasis.
</p>

<pre>
  function greet(name) {
    return `Hello, ${name}!`;
  }
</pre>

<pre><code class="language-js">
function greet(name) {
  return `Hello, ${name}!`;
}
</code></pre>

<!-- Block quotation -->
<blockquote cite="https://example.com/source">
  <p>The only way to do great work is to love what you do.</p>
  <footer>— <cite>Steve Jobs</cite></footer>
</blockquote>

<!-- Inline quotation (browser adds quotation marks) -->
<p>He said <q cite="https://example.com/source">It works!</q></p>

<!-- Citation (title of a work) -->
<p>Read <cite>Clean Code</cite> by Robert Martin.</p>

<!-- Date -->
<time datetime="2025-06-15">June 15, 2025</time>

<!-- Date and time (with timezone) -->
<time datetime="2025-06-15T09:00:00-05:00">9 AM CST on June 15</time>

<!-- Time only -->
<time datetime="09:00">9 o'clock</time>

<!-- Year and month -->
<time datetime="2025-06">this June</time>

<!-- Duration -->
<time datetime="PT2H30M">2 hours 30 minutes</time>

<!-- Week -->
<time datetime="2025-W24">week 24 of 2025</time>

<!-- Abbreviation — title provides full form -->
<abbr title="World Health Organization">WHO</abbr>
<abbr title="Cascading Style Sheets">CSS</abbr>

<!-- Definition — marks where a term is defined -->
<p>
  <dfn id="def-api">API</dfn> stands for Application Programming Interface.
</p>

<!-- Combining both -->
<p>
  <dfn><abbr title="Document Object Model">DOM</abbr></dfn>
  represents the page structure as a tree.
</p>

<address>
  Written by <a href="mailto:hi@example.com">Jane Doe</a>.<br>
  123 Main St, Springfield, IL 62701
</address>

<!-- Inline code -->
<p>Use <code>Array.from()</code> to convert iterables.</p>

<!-- Variable in code or math -->
<p>Let <var>n</var> be the number of elements.</p>

<!-- Keyboard shortcut -->
<p>Press <kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd></p>

<!-- Computer output / sample -->
<p>The terminal shows: <samp>$ npm install</samp></p>

<!-- Block of code -->
<pre><code>
const arr = [1, 2, 3];
arr.forEach(n => console.log(n));
</code></pre>

<!-- Isolate a fragment with unknown direction -->
<p>User comment: <bdi>مرحبا</bdi> — added yesterday.</p>

<!-- Override direction explicitly -->
<bdo dir="rtl">This will display right-to-left</bdo>
<bdo dir="ltr">This forces left-to-right</bdo>

<ruby>
  漢 <rt>かん</rt>
  字 <rt>じ</rt>
</ruby>

<!-- With ruby parenthesis fallback -->
<ruby>
  漢 <rp>(</rp><rt>Kan</rt><rp>)</rp>
  字 <rp>(</rp><rt>ji</rt><rp>)</rp>
</ruby>

<!-- Block-level — does not carry semantics -->
<div class="card">
  <h2>Title</h2>
  <p>Content</p>
</div>

<!-- Inline — does not carry semantics -->
<p>Text with a <span class="highlight">highlighted word</span> inline.</p>

<ul>
  <li><data value="21053">Cherry Tomatoes</data></li>
  <li><data value="21054">Grape Tomatoes</data></li>
</ul>

<p>
  The <strong>deadline is Friday</strong> — <em>don't be late</em>.
  Registration was <del datetime="2025-01-01">$100</del>
  <ins datetime="2025-02-01">$80</ins>.
  Notes are <small>subject to change</small>.
  <mark>Action required</mark> before end of day.
</p>