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 add an address element in HTML?
The address element in HTML represents contact information for a person, organization, or article. It provides semantic meaning to contact details and helps search engines and assistive technologies understand the purpose of the content. When used within the <body> element, it represents contact information for the entire document. When placed inside an <article> element, it represents contact information specific to that article.
The <address> element accepts all global attributes and is typically displayed in italics by default in most browsers.
Syntax
Following is the syntax for the address element −
<address> Contact information content here </address>
What Can Be Included in Address
The <address> element should contain only contact-related information such as −
Physical addresses and mailing addresses
Email addresses
Phone numbers
Website URLs
Social media links
Geographic coordinates
Note − The address element must not contain information like publication dates, establishment dates, or article timestamps. Such temporal information belongs in the <time> element instead.
Using Address in Document Body
When placed directly in the document body, the address element represents contact information for the entire document or website.
Example
Following example shows how to use the address element to display document contact information −
<!DOCTYPE html>
<html>
<head>
<title>Document Address Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h1>Welcome to TutorialsPoint</h1>
<p>Learn programming and web development with our comprehensive tutorials.</p>
<address>
Organization: TutorialsPoint<br>
Website: <a href="https://www.tutorialspoint.com/">www.tutorialspoint.com</a><br>
Email: <a href="mailto:contact@tutorialspoint.com">contact@tutorialspoint.com</a><br>
Address: Kavuri Hills, Phase 2, Hyderabad, Telangana - 500033
</address>
</body>
</html>
The output displays the contact information in italics by default −
Welcome to TutorialsPoint Learn programming and web development with our comprehensive tutorials. Organization: TutorialsPoint Website: www.tutorialspoint.com Email: contact@tutorialspoint.com Address: Kavuri Hills, Phase 2, Hyderabad, Telangana - 500033 (displayed in italics)
Using Address in Footer
A common practice is to place the address element within a <footer> element to clearly indicate it contains footer contact information.
Example
Following example demonstrates using address within a footer element −
<!DOCTYPE html>
<html>
<head>
<title>Footer Address Example</title>
<style>
footer {
background-color: #f8f9fa;
padding: 20px;
margin-top: 40px;
border-top: 2px solid #dee2e6;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h1>HTML Tutorials</h1>
<p>Master HTML with step-by-step examples and practical exercises.</p>
<footer>
<address>
Contact us at:<br>
<strong>TutorialsPoint</strong><br>
<a href="https://www.tutorialspoint.com/">www.tutorialspoint.com</a><br>
Phone: +91-40-4028-6000<br>
Hyderabad, Telangana, India
</address>
</footer>
</body>
</html>
The footer provides a clear visual separation for the contact information −
HTML Tutorials Master HTML with step-by-step examples and practical exercises. ????????????????????????????????????????? Contact us at: TutorialsPoint www.tutorialspoint.com Phone: +91-40-4028-6000 Hyderabad, Telangana, India (footer with gray background, contact info in italics)
Using Address in Articles
When placed inside an <article> element, the address represents contact information specific to that article's author or related entity.
Example
Following example shows address used within an article to represent author contact information −
<!DOCTYPE html>
<html>
<head>
<title>Article Address Example</title>
<style>
article {
border: 1px solid #ddd;
padding: 20px;
margin: 20px 0;
}
article address {
border-top: 1px solid #eee;
padding-top: 10px;
margin-top: 15px;
font-size: 0.9em;
color: #666;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<article>
<h2>Introduction to CSS Grid</h2>
<p>CSS Grid is a powerful layout system that allows you to create complex, responsive web layouts with ease. This article covers the fundamentals of CSS Grid.</p>
<address>
Written by: <strong>John Developer</strong><br>
Email: <a href="mailto:john@example.com">john@example.com</a><br>
Website: <a href="https://johndeveloper.com">johndeveloper.com</a>
</address>
</article>
</body>
</html>
The address provides author contact information specific to the article −
??????????????????????????????????????????? ? Introduction to CSS Grid ? ? ? ? CSS Grid is a powerful layout system... ? ? ? ? ??????????????????????????????????????? ? ? Written by: John Developer ? ? Email: john@example.com ? ? Website: johndeveloper.com ? ? (author info in gray, italics) ? ???????????????????????????????????????????
Styling the Address Element
The address element can be styled with CSS to match your website's design. By default, browsers display address content in italic formatting.
Example
Following example shows custom styling for the address element −
<!DOCTYPE html>
<html>
<head>
<title>Styled Address Example</title>
<style>
address {
background-color: #f8f9fa;
border-left: 4px solid #007bff;
padding: 15px;
margin: 20px 0;
font-style: normal;
font-family: 'Courier New', monospace;
line-height: 1.6;
}
address a {
color: #007bff;
text-decoration: none;
}
address a:hover {
text-decoration: underline;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h1>Custom Styled Contact Information</h1>
<address>
<strong>TutorialsPoint Learning Center</strong><br>
Email: <a href="mailto:support@tutorialspoint.com">support@tutorialspoint.com</a><br>
Phone: <a href="tel:+914040286000">+91-40-4028-6000</a><br>
Address: Hyderabad, Telangana, India
</address>
</body>
</html>
The styled address appears with a blue left border, gray background, and custom typography −
Custom Styled Contact Information ? TutorialsPoint Learning Center ? Email: support@tutorialspoint.com ? Phone: +91-40-4028-6000 ? Address: Hyderabad, Telangana, India (blue left border, gray background, monospace font)
Common Use Cases
The address element is commonly used in the following scenarios −
| Use Case | Description | Example Content |
|---|---|---|
| Website Footer | Organization contact information | Company |
1K+ Views
