2

I am building a website using asp.net mvc-5, and I want to provide our company contact details such as telephone, email, postal address, etc.., so I used the <address> tag as follow inside our "Contact US" page (I replace the real data by ***):-

<div class="row">
  <div class="col-lg-4 col-md-4 col-sm-4 address">
    <h2>Addresses</h2>
    <address>
      <div class="info">
        <p><span class="footercolor">Telephone: </span><span>+******</span></p>
        <p><span class="footercolor">FAX: </span><span class="marginfax">+*****</span></p>
        <p class="mainaddress">3rd Floor, Bldg. 1(....),<br />... Str. .CityName</p>
        <p><span class="footercolor">P</span>.<span class="footercolor">O</span>.<span class="footercolor">Box: </span><span>*****,**** 1212,CountryName</span></p>
        <p><span class="footercolor">Email:</span><span> <a href="mailto:info@****.com " target="_top">info@*****.com</a></span></p>
      </div>
    </address>
  </div>

so I have a couple of questions about using the <address> tag:-

  • inside this link they mentioned the following about the address tag Tip: The <address> tag should NOT be used to describe a postal address, unless it is a part of the contact information.... so why I should not add the postal address inside the <address> tag?

  • Is the <address> tag the correct way to provide our company's contact details as I am currently doing, or it should be used to provide details about the web site owner such as who created the web site and when ....

  • What are the advantages of providing the contact info inside <address> tag compared to writing the contact info inside a basic <div> or <p>?

Mr Lister
  • 42,557
  • 14
  • 95
  • 136
john Gu
  • 10,469
  • 55
  • 189
  • 381

3 Answers3

7

When you should use an address tag

From the W3C (https://www.w3.org/TR/html-markup/address.html):

If an address element applies to a body element, then it represents contact information for the document as a whole. If an address element applies to a section of a document, then it represents contact information for that section only.

In summary, an address tag is for contact information. If your contact information is just a phone number, then only the phone number should be included in the address block. If your contact information is a phone number(s), postal address, and e-mail as in your case, then all of this information (including the postal address) should be contained within the address block.

When you should NOT use an address tag

The point is, you should not be including a postal address in the address block if it is NOT contact information. So for example, if you have a real estate website, and you're listing information about available houses, the address of a house listing should not be in the address block. On the other hand, the real estate agent's address should be included in the address block, since this is contact information.

Why use the address tag

HTML is meant to be semantic. Ie/ you provide content and give meaning to that content. The more meaning you can give to the content, the better. Address conveys a lot more meaning than just div or p, so if address is appropriate, you should use address. In fact, here's what the W3C says about divs (https://www.w3.org/TR/html5/grouping-content.html#the-div-element):

Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable. Use of more appropriate elements instead of the div element leads to better accessibility for readers and easier maintainability for authors.

Acceptable content within an address tag

Divs and Ps inside an address block are perfectly acceptable. More specifically, here's what you can use within an address block (from https://developer.mozilla.org/en-US/docs/Web/HTML/Element/address):

Flow content, but with no nested <address> element, no heading content (<hgroup>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>), no sectioning content (<article>, <aside>, <section>, <nav>), and no <header> or <footer> element.

Divs and Ps are flow content.

tl;dr: Maybe you could make your code a little prettier. But regarding your usage of the address tag, you're good!

Mr Lister
  • 42,557
  • 14
  • 95
  • 136
VKK
  • 790
  • 4
  • 18
-2

It might help to look at this answer about address formats

Advantages include semantic markup being easier for search engines to use.

By the way, you've got a lot more span tags in that sample than you actually need - you could remove most of the middle ones.

Community
  • 1
  • 1
Dub Scrib
  • 1
  • 3
-2

Let me see if I can answer all of your questions :), please note I'm not an HTML pro so I'm not 100% sure on everything.

inside this link they mentioned the following about the address tag Tip: The <address> tag should NOT be used to describe a postal address, unless it is a part of the contact information.... so why I should not add the postal address inside the <address> tag?

Of course you can always write whatever you like, so if you want to include the postal code that's your call. There are no set rules to as of what you can do and what not.

Is the <address> tag the correct way to provide our company's contact details as i am currently doing?, or it should be used to provide details about the web site owner such as who created the web site and when ....

I don't think that there is a 'correct' way of using the <address> tag, as you are free to use it for whatever you like.

What are the advantages of providing the contact info inside <address> tag compared to writing the contact info inside a basic <div> or <p>???

https://stackoverflow.com/a/34862011/5806274, I think that he describes it pretty good, it's mostly easier for Search Engines such as Google.

Community
  • 1
  • 1
user5806274
  • 7
  • 1