article, section, aside & address
Four sectioning elements each carry a specific semantic contract. Choosing the right one is not about visual layout but about what the content means: could it stand alone, is it a named thematic group, is it tangential, or is it the author's contact information?
What they are
<article> marks content that is self-contained and independently distributable. A blog post, a news item, a product card, a comment, or a forum post are all articles because removing them from the page and publishing them elsewhere would still make complete sense. <article> has implicit role="article". Articles can be nested: a list of comments inside a post is a natural case where each comment is an <article> inside the parent <article>.
<section> marks a thematic grouping of content with a heading. It is not a generic wrapper. It is also NOT automatically a landmark: without an accessible name (aria-label or aria-labelledby), the browser assigns it role="generic", making it invisible to landmark navigation. With a name it becomes role="region". The rule: if you cannot give it a meaningful name, ask whether <article>, <aside>, or even <div> is a better fit.
<aside> marks content that is tangentially related to the content around it. The key word is tangential: the main content would still make sense if the aside were removed. Sidebars, pull quotes, related links, and author bios are asides. <aside> has role="complementary". At the page level it is a landmark; inside an <article> it is tangential to that article specifically.
<address> marks contact information for the nearest <article> or <body> ancestor. That means the author or publisher's email, URL, phone, or social handle. It is not a general-purpose element for any postal address (like a business location on a contact page). <address> has role="group".
Why it matters
Screen readers, search engines, and feed readers all consume the semantic signal each element sends. An RSS reader extracts <article> elements to build a feed. A search engine weights content inside <article> as a standalone piece. A screen reader announces <aside> as a complementary landmark, giving the user the choice to skip it. Using <div> instead of any of these loses all of those signals silently.
For accessibility, the landmark roles are the practical benefit: <aside> at the page level gives AT users a complementary landmark they can jump to or skip. Named <section> elements (with aria-label) create region landmarks for distinct areas of a long page, such as a search results section or a featured-articles section. Getting these right adds navigable structure without any extra ARIA.
How to choose
Ask three questions in order. First: could this content be extracted and published somewhere else and still make complete sense? If yes, use <article>. Second: is this content tangential to the surrounding content and non-essential to understanding it? If yes, use <aside>. Third: is this a distinct thematic group with a meaningful name you can give it? If yes, use <section aria-label="...">. For everything else, use <div>.
Place <address> inside the <article> it belongs to, typically at the bottom, to link the contact info to that article's author. When placed inside <footer> at the page level, it refers to the whole document's owner. Never wrap a business's postal address in <address> unless that address IS the author's contact information for the piece.
Try it
Four sectioning elements reveal with their role and use case so you can see the semantic contract each one carries.
Self-contained composition. Could be extracted to a feed, shared as a link, or published elsewhere and still make complete sense. Passes the "independence test".
Thematic grouping with a heading. Without aria-label the browser assigns role="generic" (invisible to landmark navigation). Add aria-label to get role="region" and become jumpable.
Content tangentially related to the surrounding content. The main content makes complete sense without it. At page level it is a complementary landmark AT users can skip.
Contact information for the nearest article or body ancestor only — not for any postal address. Use address for the author's email, URL, or phone; use p or dl for a business location.
Check yourself
Pick an answer to lock it in, then read why. Getting one wrong is part of how it sticks.
Remember this
<article>passes the independence test: it should make complete sense if extracted and published elsewhere.<section>withoutaria-labeloraria-labelledbyhasrole="generic"and is not a landmark.<aside>content is tangential: the main content still makes sense without it.<address>is for the contact info of the document or article's author, not for arbitrary postal addresses.
Done with this concept?
Mark it complete to track your progress. No login needed.