Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to markup postal address in HTML?
A postal address is structured information used to identify the physical location of a building, apartment, or business. In HTML, we use the <address> tag to mark up contact information, including postal addresses, for the author of a document or article.
The <address> element provides semantic meaning to contact information, making it accessible to screen readers and search engines. By default, browsers render address content in italic format and add line breaks before and after the element.
Syntax
Following is the syntax for the <address> tag −
<address> Contact information goes here </address>
The address element should contain contact information for the nearest <article> or <body> element ancestor. It can include postal addresses, email addresses, phone numbers, and URLs.
Basic Address Example
Following example demonstrates a simple postal address using the <address> tag −
<!DOCTYPE html>
<html>
<head>
<title>HTML Address Tag</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Company Location</h2>
<address>
TutorialsPoint Office<br>
123 Main Street<br>
New York, NY 10001<br>
USA
</address>
</body>
</html>
The output displays the address in italic format with proper line spacing −
Company Location TutorialsPoint Office 123 Main Street New York, NY 10001 USA (text appears in italic)
Structured Postal Address
Following example shows a more detailed postal address format commonly used in business websites −
<!DOCTYPE html>
<html>
<head>
<title>Detailed Address Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Corporate Office Address</h2>
<address>
TutorialsPoint Technologies<br>
Cybercity Building<br>
Plot No: 129, 130, 132<br>
Gachibowli Road<br>
APHB Colony<br>
Hyderabad, Telangana 500019<br>
India
</address>
</body>
</html>
The output shows a well-structured business address −
Corporate Office Address TutorialsPoint Technologies Cybercity Building Plot No: 129, 130, 132 Gachibowli Road APHB Colony Hyderabad, Telangana 500019 India (text appears in italic)
Styling Address with CSS
You can customize the appearance of the address element using CSS. Following example changes the default italic styling −
<!DOCTYPE html>
<html>
<head>
<title>Styled Address Example</title>
<style>
address {
font-style: normal;
font-family: "Courier New", monospace;
background-color: #f5f5f5;
padding: 15px;
border-left: 4px solid #007bff;
margin: 10px 0;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Contact Information</h2>
<address>
TutorialsPoint Learning Center<br>
456 Education Boulevard<br>
Suite 200<br>
Boston, MA 02101<br>
United States
</address>
</body>
</html>
The styled address appears with a custom font, background, and left border −
Contact Information TutorialsPoint Learning Center 456 Education Boulevard Suite 200 Boston, MA 02101 United States (monospace font, gray background, blue left border)
Address with Contact Information
The <address> tag can include various types of contact information alongside the postal address −
<!DOCTYPE html>
<html>
<head>
<title>Complete Contact Address</title>
<style>
address {
font-style: normal;
background-color: #e9f7ef;
padding: 15px;
border-radius: 8px;
margin: 20px 0;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Get in Touch</h2>
<address>
<strong>TutorialsPoint Customer Service</strong><br>
789 Knowledge Street<br>
Tech District<br>
San Francisco, CA 94105<br>
USA<br><br>
Phone: <a href="tel:+1-555-123-4567">+1 (555) 123-4567</a><br>
Email: <a href="mailto:info@tutorialspoint.com">info@tutorialspoint.com</a><br>
Website: <a href="https://www.tutorialspoint.com">www.tutorialspoint.com</a>
</address>
</body>
</html>
This creates a comprehensive contact block with clickable phone, email, and website links −
Get in Touch TutorialsPoint Customer Service 789 Knowledge Street Tech District San Francisco, CA 94105 USA Phone: +1 (555) 123-4567 (clickable) Email: info@tutorialspoint.com (clickable) Website: www.tutorialspoint.com (clickable) (styled with green background and rounded corners)
Best Practices
Following are the key best practices when marking up postal addresses −
Use
<br>tags − Separate address lines with<br>tags for proper formatting.Include complete information − Provide all necessary address components: street, city, state/province, postal code, and country.
Semantic purpose − Use
<address>only for contact information of the document author or article, not for arbitrary addresses mentioned in content.Accessibility − The address element provides semantic meaning that screen readers can identify and announce appropriately.
| Address Component | Description | Example |
|---|---|---|
| Organization/Name | Company or person name | TutorialsPoint Inc. |
| Street Address | Building number and street name | 123 Main Street, Suite 100 |
| City/Locality | City or town name | New York |
| State/Province | State, province, or region | NY, California, Ontario |
| Postal Code | ZIP code or postal code | 10001, SW1A 1AA, H0H 0H0 |
| Country | Country name | USA, United Kingdom, Canada |
Conclusion
The HTML <address> element provides semantic markup for contact information, including postal addresses. Use <br> tags to format address lines properly, and remember that this element should only contain contact information for the document author or nearest article ancestor, not arbitrary addresses mentioned in content.
4K+ Views
