The HTML <address> element provides contact information for the author or owner of a webpage or an article. It can contain details such as an email address, website link, physical address, or other relevant contact information.

The <address> element is a semantic HTML element that helps browsers and assistive technologies identify contact information. It is commonly used in website footers and article author sections.

What Is the HTML Address Element?

The <address> element represents contact information for the nearest <article> or the webpage as a whole when it is not inside an article.

Here is the basic syntax:

<address>
    Contact: <a href="mailto:info@example.com">
        info@example.com
    </a>
</address>

In this example, the <address> element contains an email address that visitors can use to contact the website owner.

HTML Address Example

The following example demonstrates how to use the <address> element in a webpage.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <title>HTML Address Example</title>

    <style>
        address {
            background-color: #f0f4f8;
            padding: 15px;
            font-style: normal;
            line-height: 1.8;
        }

        address a {
            color: #0878d1;
        }
    </style>
</head>
<body>

    <header>
        <h1>Web4Learners</h1>
    </header>

    <main>
        <h2>Contact Information</h2>
        <p>Get in touch with our website team.</p>
    </main>

    <footer>
        <address>
            Website: <a href="https://web4learners.com/">
                Web4Learners
            </a><br>
            Email: <a href="mailto:info@example.com">
                info@example.com
            </a>
        </address>
    </footer>

</body>
</html>

In this example, the <address> element contains website and email links. The CSS changes the background, spacing, and text appearance. The font-style: normal property removes the italic styling that browsers commonly apply to address elements by default.

Replace the example email address with your actual contact email before publishing.

What Can the HTML Address Element Contain?

The <address> element can contain relevant contact information, including:

• Email addresses: Use the mailto: link scheme to open an email application.
• Website links: Provide a link to the author’s or organization’s website.
• Physical addresses: Display a business or contact location when appropriate.
• Contact details: Include other relevant ways to contact the author or website owner.

The information should relate to the webpage’s owner or the author of the surrounding article.

HTML Address vs Paragraph

The <address> and <p> elements can both display text, but they have different purposes.

<address>	<p>
Represents contact information	Represents a paragraph of text
Has semantic meaning for contact details	Has general textual meaning
Commonly appears in footers or articles	Used throughout webpage content

For example, use <p> to describe a company’s services and <address> to provide its contact information.

HTML Address Best Practices

Use <address> for genuine contact information rather than any text that happens to contain a street address. It is not intended to represent every postal address mentioned in an article.

You can learn more about HTML footer to understand how contact information fits into a webpage footer. Explore HTML header to learn about introductory content, and read about HTML semantic elements to understand semantic page structure. The HTML page layout tutorial explains how these elements work together in a complete webpage.

Frequently Asked Questions

Is the HTML address element semantic?

Yes. It identifies contact information associated with a webpage or article.

Does the address element automatically create a link?

No. Use an <a> element inside <address> when you want clickable email addresses or website links.

Can I use address inside a footer?

Yes. A footer is a common place for contact information, making it a suitable location for the <address> element.

Does the address element always display italic text?

Browsers commonly display its text in italics by default, but CSS can change that appearance using font-style: normal.