Address tag in HTML

We all know that HTML is important for web development. Also, HTML is a vast subject. There are various tags available in HTML language. So, in this article, we will discuss the address tag in HTML. It is one of the useful tags available. Let’s go!

Difficulty level: Basic

Introduction

When we hear the word address what comes into our mind? A person’s place of living information, right? So, the definition of this address tag is pretty clear from the word itself.

Definition

The <address> tag defines the contact information for the author or owner of a document or an article.

The HTML <address> element  indicates that the enclosed HTML provides contact information for a person or people, or for an organization.

HTML <address> tag is used to specify the authorship information of the article or webpage.

These are some various definitions of <address> tag.

Other points to be noted

  • The contact information provided by an <address> element’s contents can take whatever form is appropriate for the context.
  • It may include any type of contact information.
  • The contact information can include such as a physical address, URL, email address, phone number, social media handle, geographic coordinates, and so forth.
  • The <address> element should include the name of the person, people, or organization to which the contact information refers.
  • <address> can be used in a variety of contexts such as providing a business’s contact information in the page header or indicating the author of an article by including an <address> element within the <article>
  • The elements inside the <address> tag are usually rendered in italics.
  • Browsers will always add a line break before and after the <address> element.

Syntax

<address>
...
...    //information
...
</address>

Example

Let’s see a basic example.

<address>
Organisation name: GeeksToCode
</address>

Run the code here.

Output

Attributes

The <address> tag does not gave any specific attributes for it. It can only support other attributes. The attributes supported by <address> tag include the below following.

Global Attributes

The <address> tag supports global attributes.

What is global attributes?

The global attributes are attributes that can be used with all HTML elements. It is similar to global variables in other programming languages.

Event Attributes

The <address> tag also supports event attributes.

What is event attributes?

HTML also has the ability to trigger events just like JavaScript. These any be like displaying a message when we click a button or an image etc. The event attributes may include

  1. Window events
  2. Form events
  3. Keyboard events
  4. Mouse events
  5. Drag events
  6. Clipboard events
  7. Media events
  8. Misc events

These events can be added with address tag.

Specification

The following is the specification of <address> tag.

DisplayBlock
UsageSemantic
VersionHTML 2, 3.2, 4, 4.01,5
Content<p>, inline, text
PlacementBlock
TagStart and end tag
Specification of <address> tag
Content CategoryFlow content, palpable content.
Permitted contentFlow content, but with no nested <address> element, no heading content (<h1><h2>,<h3>…<h6>, no sectioning content(<article>,<nav>,<aside>), and no <header> or <footer> element.
Tag omissionNone, both the starting and ending tags are mandatory.
Permitted parentsAny element that accepts flow, but always excluding <address> elements (according to the logical principle of symmetry, if <address> tag, as a parent, can not have nested <address> element, then the same <address> content can not have <address> tag as its parent)
Implicit ARIA roleNo corresponding role
Permitted ARIA rolesAny role is permitted.

Supporting Browsers

The following browsers support the <address> tag.

  • Google Chrome
  • Safari
  • Firefox
  • Internet Explorer
  • Opera

NOTE: These browser support is for both mobile and PCs.

WEB BROWSERS

Default CSS settings

We all know web page is incomplete without CSS(Cascading Style Sheets). The web page will be in style only if we use this CSS. So the default CSS settings look like the below code.

address {
  display: block;
  font-style: italic;
}

Usage

  1. The <address> tag was once used only for specifying the author information of the article or web page. This was the case before. But in the latest spec versions, its definition has upgraded. It can now be used to mark up arbitrary addresses.
  2. The <address> element should not contain more information than the contact information such as publication date(This belongs to <time> tag).
  3. Also, the <address> tag can be placed in the footer section also, in case it contains any.

Examples

Now let’s see various examples for the <address> tag and output for the same.

Example 1:

<address>Contact Author at:<br>   
<a href="mailto:[email protected]">[email protected]</a>
</address>  

Run the code here

This displays the author’s email address with the link to the same. Here we used, [email protected] for simple reference.

Output:

address tag in html
Output for above code

Example 2:

Now let’s see an example for a bigger contact information of an organization.

<!DOCTYPE html>
<html>
  <head> 
     <title> Address tag</title>
  </head>
  <body>
     <!-- address tag starts forms here -->
     <address>
        Organisation Name : GeeksToCode
        Website: <a href:"http://geekstocode.com/" > GeeksToCode </a><br>
        Visit us:Block F, Knowledge Park I, Greater Noida, Uttar Pradesh 201308.
      </address>
     <!-- tag ends here -->
  </body>
</html>

Run the code here

This is an example for address information of a organization.

Output

Ouput

Both the author and the organization can be combined for the betterment of the article.

Example 3:

NOTE: If you want to specify the information of the author for an article, you must place the <address> tag inside the <article> element.

Now let’s see an example when <address> tag in enclosed inside <article> tag. Let’s modify the above example.

<!DOCTYPE html>
<html>
  <head> 
     <title> Address tag</title>
  </head>
  <body>
     <article>
     <!-- address tag starts forms here -->
     <address>
        Organisation Name : GeeksToCode
        Website: <a href:"http://geekstocode.com/" > GeeksToCode </a><br>
        Visit us:Block F, Knowledge Park I, Greater Noida, Uttar Pradesh 201308.
      </address>
     <!-- tag ends here -->
    </article>
  </body>
</html>

Run the code here

address tag in html

You may see that the output for the example 2 and 3 have not changed. This is because the <article> tag is used only for our readability alone.

NOTE: Although it renders text with the same default styling as the <i> or <em> elements, it is more appropriate to use <address> when dealing with contact information, as it conveys additional semantic information.

FAQ

What is address tag in HTML?

Address tag is a tag which is used to add the information about the author.

What is the use of address tag in HTML?

Say you want to add the contact information about the author and that needs to stand out, we can make use of address tag.

Conclusion

Hope this article helped you understand about <address> tag. You can master HTML only if you have constant practice because the tags can’t be memorized within a day! Keep practicing and happy coding!

Check Out

  1. Acronym Tag In HTML
  2. Applet Tag In HTML
  3. Abbr Tag In HTML
  4. Map and Area Tag In HTML

Leave a Comment

Your email address will not be published. Required fields are marked *