HTML: address tag

HTML: <address> tag

In this series of learning HTML, we will teach you how to use HTML address tag with proper syntax and lots of examples. Let’s start on the HTML address tag.

Description of  HTML address tag

The HTML “address” tag is used to define the contact information for the author or owner of a document or article. The “address” tag is typically used in conjunction with the “footer” or “article” tag to provide additional information about the author or publisher.

Here is an example of how to use the “address” tag in HTML:

<footer>
<p>Published by <address>John Doe</address></p>
<p>Contact us at <a href="mailto:[email protected]">[email protected]</a></p>
</footer>

In the example above, the “address” tag is used to contain the name of the author or publisher of the content. The “footer” tag is used to contain additional information about the content, such as the contact information for the publisher.

The “address” tag can also be used in other contexts, such as in a “header” section to display the contact information for a business or organization.

It’s important to note that the “address” tag should only be used for contact information and not for formatting purposes. For example, it should not be used to indicate the address of a physical location or to format text in a particular way. Instead, it should be used only for its intended purpose of indicating the contact information for the author or publisher of the content.

Syntax of HTML address tag

The HTML <address> tag is used to define contact information for the author or owner of a document or an article. The syntax of the <address> tag is as follows:

<address>
<!-- contact information goes here -->
</address>

Here, the opening tag <address> is used to indicate the start of the contact information, and the closing tag </address> is used to indicate the end of the contact information.

Example:

<article>
<h1>Article Title</h1>
<p>Article content goes here.</p>
<address>
Contact the author at: <a href="mailto:[email protected]">[email protected]</a>
</address>
</article>

In this example, the <address> element contains contact information for the author of the article, including an email address. The information can be used by readers to get in touch with the author, or to provide attribution for the content.

Event Attributes

The <address> tag in HTML does not have any specific event attributes associated with it, as it is a semantic element used to indicate contact information for the author or owner of the document. However, event attributes can be used on other elements within the <address> tag.

Here are some common event attributes that can be used with child elements of the <address> tag:

1. onclick: Specifies a script to be executed when the element is clicked. Example: <a href="tel:123-456-7890" onclick="alert('You clicked the phone number!')">123-456-7890</a>
2. ondblclick: Specifies a script to be executed when the element is double-clicked. Example: <a href="mailto:[email protected]" ondblclick="alert('You double-clicked the email address!')">[email protected]</a>
3. onmousedown: Specifies a script to be executed when the mouse button is pressed down over the element. Example: <a href="https://www.example.com" onmousedown="alert('You pressed down the mouse button over the link!')">Visit Example.com</a>
4. onmouseup: Specifies a script to be executed when the mouse button is released over the element. Example: <a href="https://www.example.com" onmouseup="alert('You released the mouse button over the link!')">Visit Example.com</a>
5. onmouseover: Specifies a script to be executed when the mouse pointer is moved onto the element. Example: <img src="example.jpg" onmouseover="alert('You hovered over the image!')">
6. onmouseout: Specifies a script to be executed when the mouse pointer is moved off the element. Example: <img src="example.jpg" onmouseout="alert('You moved the mouse pointer off the image!')">
7. onkeydown: Specifies a script to be executed when a key is pressed down while the element has focus. Example: <input type="text" onkeydown="alert('You pressed a key while the input had focus!')">
8. onkeyup: Specifies a script to be executed when a key is released while the element has focus. Example: <input type="text" onkeyup="alert('You released a key while the input had focus!')">

These event attributes can be used with child elements within the <address> tag to add interactivity and functionality to the contact information displayed.

Other Attributes

The <address> tag in HTML is used to define the contact information for the author or owner of a document or an article. Here are some attributes that can be used with the <address> tag in HTML:

1. class: This attribute is used to specify one or more classes for the element. This can be useful for applying CSS styles to the <address> element.
2. id: This attribute is used to specify a unique identifier for the element. This can be useful for scripting purposes, or for applying CSS styles to a specific <address> element.
3. style: This attribute is used to specify inline styles for the element. This can be useful for applying styles to a specific <address> element.

Here’s an example of how the <address> tag can be used with attributes:

<address class="contact-info" id="author-info" style="font-style: italic;">
Written by John Doe<br>
Email: [email protected]<br>
Phone: 555-555-5555
</address>

In this example, the class attribute is set to “contact-info”, the id attribute is set to “author-info”, and the style attribute is used to italicize the text inside the <address> element.

Note on HTML address tag

Here are some important notes to keep in mind when using the <address> tag in HTML:

1. The <address> tag should only be used to define contact information for the author or owner of a document or article. It should not be used for general address information, such as a postal address or location address.
2. The <address> tag should only be used once per document or article, and should only contain contact information for the author or owner of the document.
3. The <address> tag should not be used to define the footer section of a web page. The <footer> tag should be used instead.
4. The <address> tag is an inline element, which means that it can be placed within other block-level elements, such as <div> or <article>.
5. It’s important to provide accurate and up-to-date contact information in the <address> tag. This can help readers and users of the website get in touch with the author or owner of the document if needed.

Here’s an example of how the <address> tag can be used correctly:

<article>
<h1>My Article</h1>
<p>Some text here...</p>

<address>
Written by John Doe<br>
Email: [email protected]<br>
Phone: 555-555-5555
</address>
</article>

In this example, the <address> tag is used to provide contact information for the author of the article, and it’s placed within the <article> element.

Examples of HTML address tag

We will discuss the <address> tag below, exploring examples of how to use the <address> tag in HTML5, HTML 4.01 Transitional, XHTML 1.0 Transitional, XHTML 1.0 Strict, and XHTML 1.1.

<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body>
<header>
<h1>Welcome to My Website</h1>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<main>
<article>
<h2>About Me</h2>
<p>My name is John Doe and I'm a web developer based in New York City. I specialize in building responsive websites using HTML, CSS, and JavaScript.</p>
<address>
Contact me at:<br>
Email: [email protected]<br>
Phone: 555-555-5555
</address>
</article>
</main>
<footer>
<p>© 2023 My Website</p>
</footer>
</body>
</html>

In this example, the <address> tag is used to provide contact information for the author of the article, which in this case is “John Doe”. The contact information includes an email address and a phone number. The <address> tag is placed within the <article> element to indicate that it is specific to the article.

Note that the <address> tag is not used for general address information, such as a postal address or location address. If you need to provide that type of information, you should use the appropriate HTML tag, such as <div> or <p> with appropriate formatting.