Updated July 7, 2023
Introduction to Address Tag in HTML
The HTML document’s address tag is symbolized, providing contact information about an organization or an individual. The <address> tag has a different meaning when used at different places in an HTML Document; when it is used within the <body> tag, then it will showcase the contact information of the document, and if it is used inside the <article> tag, then it represents the contact information of the article. Generally, the text represented by the <address> tag will be displayed in italics. Some browser has functionalities that add a line break before and after the address tag. <address> tag can be used in a variety of contexts, such as indicating the author of an article by including an <address> element within the <article> tag or providing a business’s contact information in the page header.
Note: Both Start and End tag are required for the Address tag in HTML5, i.e., <address>……..</footer>
- The address tag cannot represent arbitrary addresses (i.e., addresses irrelevant to the contact information).
- The address tag should not contain information other than contact information, like a publication date (for that, use<time> tag instead).
Syntax
Below is the Syntax mentioned :
1. HTML/XHTML
<body>
<footer> ... </footer>
<body>2. CSS
footer{
--your css code—
}Important Points in Address Tag
Below are mentioned some important points regarding the tag:
- If any, an <address> element is formally placed inside the <footer> element of the current section.
- Earlier, it used to be the case that an <address> element could only represent the contact info of the document’s author. However, its definition has been upgraded in the latest spec versions, as it can now be used for arbitrary markup addresses.
- An <address> element should not contain more information than the contact information, like a publication date (for that, use<time> tag instead).
- The Only permitted content type for Address tag is flow content means <address> tag, as a parent, cannot have nested <address> element; then the same <address> content cannot have <address> tag as its parent.
- Most browsers will render the text within the <address> tag in Italics, but you can change this behavior by CSS styling.
- The address tag cannot represent arbitrary addresses (e.g., postal addresses) unless those addresses are contact information for the section. To display postal addresses, use the <p> tag.
- The <address> tag is not allowed to contain <article>, <aside>, <nav>, <section>, <header>, <footer>, <hgroup>, <h1>-<h6> or other <address> elements.
- For Internet Explorer browsers older than IE 9, use HTML5, which is a JavaScript workaround to provide support for the new HTML5 elements such as <main>, <header>, <article>, <section>, <nav>, <aside>, <footer>
Tag-Specific Attributes
No specific attribute can be used with the <address> tag.
1. Global Attributes
Like all other HTML tags, the <address> tag also supports the global attributes in HTML5. The following are the global attributes:
- accesskey
- class
- contenteditable
- contextmenu
- dir
- draggable
- dropzone
- hidden
- id
- itemid
- itemprop
- itemref
- itemscope
- itemtype
- lang
- spellcheck
- style
- tabindex
- title
- translate
For a full explanation of these attributes, visit https://www.educba.com/html-attributes/.
2. Event Attributes
The <address> tag in HTML5 also supports all the Event Attributes. Here are the following event handler content attributes.
- onabort
- oncancel
- onblur
- oncanplay
- oncanplaythrough
- onchange
- onclick
- oncontextmenu
- ondblclick
- ondrag
- ondragend
- ondragenter
- ondragexit
- ondragleave
- ondragover
- ondragstart
- ondrop
- ondurationchange
- onemptied
- onended
- onerror
- onfocus
- onformchange
- onforminput
- oninput
- oninvalid
- onkeydown
- onkeypress
- onkeyup
- onload
- onloadeddata
- onloadedmetadata
- onloadstart
- onmousedown
- onmousemove
- onmouseout
- onmouseover
- onmouseup
- onmousewheel
- onpause
- onplay
- onplaying
- onprogress
- onratechange
- onreadystatechange
- onscroll
- onseeked
- onseeking
- onselect
- onshow
- onstalled
- onsubmit
- onsuspend
- ontimeupdate
- onvolumechange
- onwaiting
For a full explanation of these attributes, visit https://www.educba.com/html-event-attributes/
CSS text formatting properties in <address> tag
- Text-color
- Text-alignment
- Text-decoration
- Text-transformation
- Line-height
- Text-direction
- Text-shadow
- Word-spacing
CSS Font properties in <address> tag
- font-style – normal|italic|oblique|initial|inherit
- font-variant – normal|small-caps|initial|inherit
- font-weight – normal|bold|bolder|lighter|number|initial|inherit
- font-size – medium|xx-small|x-small|small|large|x-large|xx-large|smaller|larger|length|initial|inherit
- font-family – family-name|generic-family|initial|inherit
CSS Test Shadow property for <address> tag
<style>
address{
text-shadow: 1px 1px #FF0000;
}
</style>Note: If the footer contains contact details, put them in the <address> tag.
Examples of Address Tag in HTML
Below are the examples of Address Tag in HTML:
Example #1
Code:
<!DOCTYPE html>
<html>
<head> . . . </head>
<body>
<header>
<h1>HTML Address tag example</h1>
</header>
<main>
<article> An article on HTML Address tag</article>
</main>
<aside> Body of an article </aside>
<footer>
<section>Copyright ©2020- EDUCBA.</section>
<address> A- 406, Boomerang, Chandivali Farm Road,
Yadav Nagar, Chandivali, Powai,
Maharashtra, Mumbai - 400072. </address>
</footer>
</body>
</html>Output:
Example #2
Code:
<!DOCTYPE html>
<html>
<head> . . . </head>
<body>
<header>
<h1>HTML Address tag example</h1>
</header>
<div>
<address> A- 406, Boomerang, Chandivali Farm Road,
Yadav Nagar, Chandivali, Powai,
Maharashtra, Mumbai - 400072. </address>
</div>
</body>
</html>Output:
Example #3
Code:
<!DOCTYPE html>
<html>
<head> . . . </head>
<body>
<header>
<h1>HTML Address tag example</h1>
</header>
<div>
<address> We are always here to help. If you have a requirement / query about our services; email us at <a href="[email protected]">[email protected]</a> and we'll do our best to reply within 24 hours </address>
</div>
</body>
</html>Output:
Conclusion
Below are mentioned some of the main key points which you should remember from this topic:
- The HTML <address> element is always in the <body> tag.
- The HTML <address> tag provides the contact information for the closest <body> ancestor in HTML 4.01.
- The HTML <address> tag includes contact information for the closest <article> or <body> ancestor in HTML5.
- The <address> tag is usually placed inside the <footer> tag for the <article> or <body>.
- Do not place the publication date inside the <address> tag; use the <time> tag instead.
- Most browsers will render the text within the <address> tag in Italics, but you can change this behavior by CSS styling.
Recommended Articles
This is a guide to Address Tag in HTML. Here we discuss Syntax, tag-specific attributes, and examples of address tag in HTML with proper codes and outputs. You can also go through our other related articles to learn more –
