<p>
  This is a <a href="#">standard link</a> within a paragraph of text.
</p>

<p>
  This is a <a href="#" title="Link with title attribute">link with a title attribute</a> that displays a tooltip on hover.
</p>

<p>
  This is an <a href="https://example.com" target="_blank" rel="noopener noreferrer">external link</a> that opens in a new tab.
</p>

<ul>
  <li><a href="#" class="link-normal">Normal link</a></li>
  <li><a href="#visited" class="link-visited">Visited link</a></li>
  <li><a href="#" class="link-hover">Hover link</a></li>
  <li><a href="#" class="link-active">Active link</a></li>
  <li><a href="#" class="link-focus">Focus link</a></li>
</ul>

<nav class="example-nav">
  <ul>
    <li><a href="#" class="nav-link">Home</a></li>
    <li><a href="#" class="nav-link">About</a></li>
    <li><a href="#" class="nav-link">Services</a></li>
    <li><a href="#" class="nav-link">Portfolio</a></li>
    <li><a href="#" class="nav-link">Contact</a></li>
  </ul>
</nav>

<div>
  <p><a href="#section1">Jump to Section 1</a></p>
  <p><a href="#section2">Jump to Section 2</a></p>
  <p><a href="#section3">Jump to Section 3</a></p>
</div>

<div id="section1">
  <h4>Section 1</h4>
  <p>This is the content of section 1.</p>
</div>

<div id="section2">
  <h4>Section 2</h4>
  <p>This is the content of section 2.</p>
</div>

<div id="section3">
  <h4>Section 3</h4>
  <p>This is the content of section 3.</p>
</div>