Introduction to Address Tag in HTML

The HTML document’s address tag is symbolized for providing the contact information about an organization or an individual’s details. The <address> tag has a different meaning when used at different places in an HTML Document like 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 is represented by the <address> tag will be displayed in italics. Some browser has functionalities which 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 is not allowed to be used to represent any arbitrary addresses (i.e. addresses that are not relevant 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 are the syntax mentioned :

HTML/XHTML

<body> <footer> ... </footer> <body>

CSS

footer{ --your css code— }

Important Points in Address Tag

Below are mentioned some important points regarding the tag:

An <address> element is formally placed inside the <footer> element of the current section, if any.
Earlier it used to be the case that an <address> element can only be used to represent the contact info of the document’s author. Now in the latest spec versions, however, its definition has been upgraded as it can now be used for markup arbitrary addresses as well.
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 of the browsers will render the text within the <address> tag in Italic, but you can change this behavior by CSS styling.
The address tag is not allowed to be used to represent arbitrary addresses (e.g. postal addresses) unless those addresses are contact information for the section. To display postal addresses, simply 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

There is no specific attribute present to be used with the <address> tag.

Global Attributes

Similar to all other HTML tags present, 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/.

Event Attributes

All the Event Attributes are also supported by the <address> tag in HTML5. 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 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, you should put them in the <address> tag. Popular Course in this categoryHTML Training (12 Courses, 19+ Projects, 4 Quizzes)12 Online Courses | 19 Hands-on Projects | 89+ Hours | Verifiable Certificate of Completion | Lifetime Access | | 4 Quizzes with Solutions
4.5 (6,502 ratings)Course Price
₹6999 ₹41999
View Course

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="info@educba.com">info@educba.com</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 present within the <body> tag.
The HTML <address> tag provides the contact information for the closest <body> ancestor in HTML 4.01.
The HTML <address> tag provides 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, for that use the <time> tag instead.
Most of the browsers will render the text within the <address> tag in Italic, but you can change this behavior by CSS styling.

Introduction to Address Tag in HTML