Aside and address

Learn when to use <aside> and <address>.

The aside tag

The <aside> tag marks content that sits next to the main content and complements it. Side menus, related links, ads or note boxes fit here. It can be read apart from the main flow.

Example: <aside><h2>Related posts</h2><ul><li>Another post</li></ul></aside>. Extra content for the side gathers here. Because it stands apart, a screen reader calls it 'complementary content'.

The address tag

The <address> tag marks contact information. Email, phone, postal address or social-media links go inside. It most often sits inside a <footer>.

Example: <address><a href="mailto:info@club.org">info@club.org</a></address>. Here the contact for the author or the site owner is marked. Search engines and screen readers then know it is contact info.

Exercise Write an aside and an address

Add an <aside> to body; inside it put an <h2> with the text Contact. Inside the aside add an <address> and put an <a href="mailto:info@club.org">Write to us</a> inside it.

Show example solution

<body>
  <aside>
    <h2>Contact</h2>
    <address>
      <a href="mailto:info@club.org">Write to us</a>
    </address>
  </aside>
</body>

Test yourself

Which fits <aside> well?
- A list of related posts
- The main post title
- The bottom of the page
- A form field
Show answer

A list of related posts — Correct. A list of related posts sits next to the main content and complements it.

Complete the address

<____>
  <a href="mailto:info@club.org">info@club.org</a>
</address>

Show answer

<address>
  <a href="mailto:info@club.org">info@club.org</a>
</address>

Match each tag to its role

<aside>

Side content
<address>

Contact info
<footer>

Bottom of a section
<a>

Link

Next lesson: Summary - Semantic blog skeleton

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies