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.
.card
Card-style with padding and raised background.
.inline
Inline display for flowing within text.
Contact us at
hello@example.com for more information..compact
Single-line compact layout with flexbox.
hello@example.com
|
+1 (555) 123-4567
|
San Francisco, CA
.footer
Styled for footer placement with muted text.
Vanilla Breeze - A layered HTML component system
support@example.com.contact
Grid layout for contact cards with icon alignment.
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