Asides and nested footers in HTML

Tangential content beside the main flow, and a footer scoped to its article.

<article>
  <h2>Practicing brackets</h2>
  <p>The shift key is where the time goes.</p>
  <aside>
    <h3>Related</h3>
    <a href="/tours/python/basics">Python basics</a>
  </aside>
  <footer>
    <p>Filed under practice</p>
    <address>
      <a href="mailto:rowan@example.com">rowan@example.com</a>
    </address>
  </footer>
</article>

How it works

An aside holds pull quotes, related links, an author bio.
A footer inside an article belongs to that article only.
address marks contact details for the nearest article.

The run, in numbers

Lines: 14
Characters to type: 302
Tokens: 82
Three-star pace: 70 tpm

At the three-star pace of 70 tokens a minute, this run takes about 70 seconds.

Type this snippet

Step 3 of 7 in Page landmarks, step 3 of 23 in Semantics & metadata.

← Previous Next →