HTML <address> Tag

The HTML <address> tag is used to define the contact information of the author, owner, or an entity associated with a document or webpage. This tag is designed for providing structured contact details such as email addresses, physical locations, phone numbers, or social media links. Typically, the <address> tag is used in the footer section of a webpage or in areas where contact details are displayed.

Syntax of the <address> Tag

html
<address>
    Contact Information
</address>

The content inside the <address> tag typically includes physical addresses, phone numbers, email addresses, or links to social profiles.

Attributes of the <address> Tag

The <address> tag does not support any unique attributes. However, it accepts global attributes, which allow for additional customization and functionality. Some of these global attributes include:

  • class: Used to define CSS classes for styling.
  • id: Used to uniquely identify the <address> tag for styling or JavaScript interactions.
  • style: Inline CSS can be applied to customize the appearance of the <address> tag.
  • lang: Defines the language of the content within the <address> tag.

Examples of HTML <address> Tag

Example 1: Basic Contact Information

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Basic Address Example</title>
</head>
<body>
    <footer>
        <address>
            Written by John Doe.<br>
            Visit us at: 123 Web Developer Lane, Code City, USA<br>
            Email: <a href="mailto:john@example.com">john@example.com</a>
        </address>
    </footer>
</body>
</html>

In this example, the <address> tag is used to display the physical address and email of the author. The email is hyperlinked using the mailto: protocol.

Example 2: Social Media and Phone Number

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Address with Social Media</title>
</head>
<body>
    <footer>
        <address>
            Contact us at:<br>
            Phone: +123 456 7890<br>
            Follow us on: 
            <a href="https://www.twitter.com/yourprofile">Twitter</a>, 
            <a href="https://www.facebook.com/yourprofile">Facebook</a>
        </address>
    </footer>
</body>
</html>

This example shows how the <address> tag can be used to display a phone number and social media profiles, offering users various ways to reach out.

FAQs About HTML <address> Tag

Q1: What is the purpose of the HTML <address> tag?
A: The <address> tag is used to define contact information, such as the physical address, email, or phone number, of the author or organization associated with a webpage.

Q2: Can I use the <address> tag for any type of address?
A: Yes, the <address> tag can be used for any kind of contact details, including physical addresses, email addresses, phone numbers, and social media profiles.

Q3: Does the <address> tag support global attributes?
A: Yes, the <address> tag supports global attributes like class, id, style, and lang, which allow for further customization and identification.

Q4: Where is the best place to use the <address> tag on a webpage?
A: The <address> tag is commonly placed in the footer of a webpage, but it can also be used in other sections that display contact information, such as the header or about page.

Q5: Can I style the <address> tag with CSS?
A: Yes, the <address> tag can be styled using CSS just like any other HTML element. You can customize its font, color, and layout to match your website's design.

tools

HTML

Related Articles