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