In an original workshop bulletin, the event location and the person responsible for the bulletin serve different purposes:
<article>
<h1>November repair workshop</h1>
<p>Venue: West Hall, 18 Example Lane.</p>
<p>Bring the item and its power adapter for assessment.</p>
<footer>
<p>Questions about this bulletin:</p>
<address>
Workshop bulletin desk<br>
<a href="mailto:workshop@example.com">workshop@example.com</a>
</address>
</footer>
</article>
These details are fictional placeholders. The venue stays in a paragraph because it tells attendees where to go. The address element identifies the bulletin's contact. The MDN address reference, checked October 24, 2026, describes the nearest-article-or-body association and the permitted content.
Choose whose contact details the block represents
When a page contains several independently authored articles, an address inside each article can identify that article's contact. A sitewide support contact outside those articles relates to the page instead.
Moving the same block into a nested article changes its context. Inspect the nearest ancestor article when a reusable footer is placed inside cards, news entries or documentation pages. Styling does not determine that association.
The element should include the name of the person or organization the contact information refers to. A bare email link leaves readers to infer whether they are contacting the writer, the venue or general support.
Put headings and publication dates outside address
<footer>
<h2>Contact the documentation team</h2>
<address>
Product documentation team<br>
<a href="mailto:docs@example.com">docs@example.com</a>
</address>
<p>Updated <time datetime="2026-10-24">October 24, 2026</time>.</p>
</footer>
An address element cannot contain headings, sectioning elements, a header, a footer or another address element. A footer can contain an address, as above; the reverse nesting is invalid. Keep unrelated publication details outside the contact block.
The semantic HTML guide explains how the article and footer express the larger structure. Use <br> for meaningful lines within this short contact block, rather than adding breaks to control spacing between unrelated sections.
Style the block without changing its meaning
Browsers commonly italicize address text by default. If that does not suit the page, reset the font style:
address {
font-style: normal;
line-height: 1.6;
}
Choosing the element only to obtain italics confuses presentation with contact semantics. Use CSS for the visual treatment.
An email link asks the device to open its configured mail handler; the element itself does not send a message or promise that an account is monitored. Before replacing the placeholder with a real contact, confirm who receives those messages and open the page at phone width. The contact's name and destination should remain readable without a hover state.