HTML Text and Typography Elements

<!-- Paragraphs -->
<p>This is a standard paragraph with text content.</p>
<p>Paragraphs can contain <strong>inline elements</strong> and <a href="#">links</a>.</p>

<!-- Blockquote with citation -->
<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 quote -->
<p>As Einstein said, <q>Imagination is more important than knowledge.</q></p>

<!-- Thematic break -->
<section>First topic content</section>
<hr>
<section>New topic content</section>

<!-- Generic container (styling only) -->
<div class="content-wrapper">
  <p>Wrapped content</p>
</div>

<!-- Unordered list -->
<ul>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>

<!-- Ordered list with attributes -->
<ol type="A" start="3">
  <li>Item C</li>
  <li>Item D</li>
  <li value="10">Item J (skip to 10)</li>
</ol>

<!-- Reversed numbering -->
<ol reversed>
  <li>Third</li>
  <li>Second</li>
  <li>First</li>
</ol>

<!-- Nested lists -->
<ul>
  <li>Main item 1
    <ul>
      <li>Sub item 1.1</li>
      <li>Sub item 1.2</li>
    </ul>
  </li>
  <li>Main item 2</li>
</ul>

<!-- Description list -->
<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>
  
  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>
  
  <dt>JavaScript</dt>
  <dd>Programming language for web interactivity</dd>
  <dd>Also known as ECMAScript</dd>
</dl>

<!-- Inline code -->
<p>Use the <code>console.log()</code> function to debug.</p>

<!-- Multi-line code block -->
<pre><code>function greet(name) {
    return `Hello, ${name}!`;
}
console.log(greet('World'));</code></pre>

<!-- Sample output -->
<p>The program outputs: <samp>Hello, World!</samp></p>

<!-- Keyboard input -->
<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy.</p>
<p>Save file with <kbd><kbd>Ctrl</kbd>+<kbd>S</kbd></kbd></p>

<!-- Variable/placeholder -->
<p>Replace <var>filename</var> with your actual file name.</p>

<!-- ASCII art / formatted text -->
<pre>
  *
 ***
*****
 ***
  *
</pre>

<!-- Terminal session -->
<pre><samp>$ npm install package-name
added 42 packages in 3.5s</samp></pre>

<!-- Emphasis changes meaning -->
<p><em>I</em> didn't say that.</p>
<p>I <em>didn't</em> say that.</p>
<p>I didn't <em>say</em> that.</p>

<!-- Strong importance -->
<p><strong>Warning:</strong> This action cannot be undone.</p>

<!-- Highlight/mark -->
<p>Search results for <mark>HTML</mark> elements.</p>

<!-- Italic for technical/foreign terms -->
<p>The <i>HMS Titanic</i> sank in 1912.</p>
<p>The term <i lang="fr">raison d'être</i> means reason for being.</p>

<!-- Bold for keywords (no importance) -->
<p>The <b>Responsive Web Design</b> approach adapts to screen sizes.</p>

<!-- Strikethrough for outdated info -->
<p>Price: <s>$99.99</s> $49.99 (Sale!)</p>

<!-- Underline for spelling errors -->
<p>She made a <u>speling</u> mistake.</p>

<!-- Generic span for styling -->
<p>Status: <span class="status-active">Active</span></p>

<!-- Document revisions -->
<p>The meeting is scheduled for 
   <del datetime="2025-12-20T10:00">Thursday</del>
   <ins datetime="2025-12-20T14:30">Friday</ins>.
</p>

<!-- With citation -->
<p>Price: 
   <del cite="pricing-update.html">$99</del>
   <ins cite="pricing-update.html">$79</ins>
</p>

<!-- Subscript for chemical formulas -->
<p>Water: H<sub>2</sub>O</p>
<p>Carbon Dioxide: CO<sub>2</sub></p>

<!-- Superscript for exponents -->
<p>Area = πr<sup>2</sup></p>
<p>E = mc<sup>2</sup></p>

<!-- Superscript for footnotes -->
<p>This statement requires citation<sup>1</sup>.</p>

<!-- Small for fine print -->
<p>
  <small>© 2025 Company Name. All rights reserved.</small>
</p>
<p>
  Special offer! <small>*Terms and conditions apply</small>
</p>

<!-- Mathematical expressions -->
<p>
  (a + b)<sup>2</sup> = a<sup>2</sup> + 2ab + b<sup>2</sup>
</p>

<!-- Abbreviations with title -->
<p>The <abbr title="World Wide Web">WWW</abbr> was invented by Tim Berners-Lee.</p>
<p>Use <abbr title="HyperText Markup Language">HTML</abbr> for structure.</p>
<p>Meeting at <abbr title="As Soon As Possible">ASAP</abbr>.</p>

<!-- Data element for machine-readable values -->
<p>Product: <data value="SKU-12345">Premium Widget</data></p>
<p>Rating: <data value="4.5">4.5 out of 5 stars</data></p>
<p>Price: <data value="49.99">$49.99</data></p>

<!-- Variable in mathematical context -->
<p>If <var>x</var> = 5, then <var>x</var> + 3 = 8</p>
<p>The formula is <var>f</var>(<var>x</var>) = <var>x</var><sup>2</sup></p>

<!-- Definition term -->
<p><dfn>Responsive Design</dfn> is an approach where design adapts to screen size.</p>
<p>A <dfn><abbr title="Application Programming Interface">API</abbr></dfn> 
   is a set of protocols for building software.</p>

<!-- Combined usage -->
<p>
  <abbr title="Uniform Resource Locator">URL</abbr> format:
  <code><var>protocol</var>://<var>domain</var>/<var>path</var></code>
</p>