Typography

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

<p>This is a paragraph with <strong>bold text</strong>, <em>italic text</em>, and <a href="#">a link</a>.</p>

<p>Here's some <code>inline code</code> and more text.</p>

<pre><code>function hello() {
  console.log('Hello, World!');
}</code></pre>

<blockquote>
  This is a blockquote. It's styled automatically.
</blockquote>

<ul>
  <li>Unordered list item 1</li>
  <li>Unordered list item 2</li>
  <li>Unordered list item 3</li>
</ul>

<ol>
  <li>Ordered list item 1</li>
  <li>Ordered list item 2</li>
  <li>Ordered list item 3</li>
</ol>

<hr>

<article>
  <h1>Article Title</h1>
  <p>This is the introduction paragraph with <strong>important text</strong> and <a href="#">a link</a>.</p>
  
  <h2>Section Heading</h2>
  <p>Here's a paragraph with <code>inline code</code> and <em>emphasized text</em>.</p>
  
  <h3>Features</h3>
  <ul>
    <li>Feature one</li>
    <li>Feature two</li>
    <li>Feature three</li>
  </ul>
  
  <h3>Code Example</h3>
  <pre><code>const greeting = 'Hello, World!';
console.log(greeting);</code></pre>
  
  <blockquote>
    A relevant quote that adds context to the article.
  </blockquote>
  
  <hr>
  
  <h2>Conclusion</h2>
  <p>Final thoughts and summary.</p>
</article>