<main>
  <nav aria-labelledby="toc-heading">
    <h2 id="toc-heading">Table of contents</h2>
    <ul>
      <li>
        <a href="#section1">Section 1</a>
      </li>
      <li>
        <a href="#section2">Section 2</a>
      </li>
      <li>
        <a href="#section3">Section 3</a>
      </li>
    </ul>
  </nav>
  <section id="section1">
    <h2>Section 1</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas dui nibh, fermentum ac gravida quis, <a href="#">tempus sit</a> amet nulla. Fusce dignissim dolor sit amet sapien auctor, eu vehicula elit placerat. Aliquam vehicula luctus enim, at ullamcorper risus. Aliquam ut tincidunt ipsum. Vivamus dui mi, suscipit vitae libero id, interdum aliquet metus.</p>
  </section>
  <section id="section2">
    <h2>Section 2</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas dui nibh, fermentum ac gravida quis, <a href="#">tempus sit</a> amet nulla. Fusce dignissim dolor sit amet sapien auctor, eu vehicula elit placerat. Aliquam vehicula luctus enim, at ullamcorper risus. Aliquam ut tincidunt ipsum. Vivamus dui mi, suscipit vitae libero id, interdum aliquet metus.</p>
  </section>
  <section id="section3">
    <h2>Section 3</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas dui nibh, fermentum ac gravida quis, <a href="#">tempus sit</a> amet nulla. Fusce dignissim dolor sit amet sapien auctor, eu vehicula elit placerat. Aliquam vehicula luctus enim, at ullamcorper risus. Aliquam ut tincidunt ipsum. Vivamus dui mi, suscipit vitae libero id, interdum aliquet metus.</p>
  </section>
</main>
body {
  font-family: Roboto,"Helvetica Neue",Arial,sans-serif;
}
main {
  max-width: 35rem;
  margin: 1rem auto;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.