address
Contact information for the nearest article or document. Typically contains physical address, email, phone, or social links.
Usage
Use the <address> element to provide contact information for:
- The author of an article (when inside
<article>) - The owner/maintainer of the document (when in body or
<footer>) - Business contact information in site footers
Note: The address element is for contact info related to the document or article, not for arbitrary postal addresses in content.
Examples
Default
Base styling removes italic font-style and displays as a block.
Default address
<address> <a href="mailto:hello@example.com">hello@example.com</a><br /> <a href="tel:+1-555-123-4567">+1 (555) 123-4567</a></address>.card
Card-style with padding and raised background.
Card address
<address class="card"> <strong>Acme Corporation</strong><br /> 123 Business Street<br /> San Francisco, CA 94102<br /> <a href="mailto:contact@acme.com">contact@acme.com</a></address>.inline
Inline display for flowing within text.
Inline address
<p>Contact us at<address class="inline"> <a href="mailto:hello@example.com">hello@example.com</a></address>for more information.</p>.compact
Single-line compact layout with flexbox.
Compact address
<address class="compact"> <span>hello@example.com</span> <span>|</span> <span>+1 (555) 123-4567</span> <span>|</span> <span>San Francisco, CA</span></address>.footer
Styled for footer placement with muted text.
Footer address
<address class="footer"> <p>Vanilla Breeze - A layered HTML component system</p> <a href="mailto:support@example.com">support@example.com</a></address>.contact
Grid layout for contact cards with icon alignment.
Contact address
<address class="contact"> <a href="mailto:hello@example.com">hello@example.com</a> <a href="tel:+15551234567">+1 (555) 123-4567</a> <a href="https://example.com">example.com</a></address>Variants
| Class | Description |
|---|---|
.card |
Adds padding, raised background, and rounded corners |
.inline |
Displays inline for use within text flow |
.compact |
Flexbox single-line layout with smaller font |
.footer |
Smaller, muted styling for footer placement |
.contact |
Grid layout for structured contact information |
Accessibility
- Screen readers announce address as contact information
- Use meaningful link text for contact methods (e.g., email addresses, not "click here")
- Include proper
hrefprotocols:mailto:for email,tel:for phone - When address contains multiple contact methods, consider using a list for clarity