Correct way for writing an address tag for my web site, to provide Contact details for our company
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!
HTML other tags in address tags
Some nested tags are allowed in address tags (<div>
and <span>
are OK).
See here: MDN: <adress>
.
So your example is valid.
However, you should use CSS class
es instead of Id
s, because class
es are more generic and Id
s have to be unique.
Should we provide unique or shared description meta tag for our website's web pages?
description
is a standard metadata name defined in HTML5:
The value must be a free-form string that describes the page.
So the value should be different for each page.
What is the most semantic way to display a street address in HTML?
You could use the hCard Microformat to describe your address. The advantage of Microformats is that you can use them in your existing documents to enrich them.
Here’s an example derived from the example from the Microformats wiki:
<address class="vcard">
<span class="adr">
<span class="street-address">169 University Avenue</span>
<span class="locality">Palo Alto</span>,
<abbr class="region" title="California">CA</abbr>
<span class="postal-code">94301</span>
<span class="country-name">USA</span>
</span>
</address>
Proper Use of address tag
The same doc, and https://html.spec.whatwg.org/multipage/semantics.html#the-address-element, state that it can have arbitrary content, with the restrictions noted.
It further states that the only information that should be contained in it is related contact information, e.g., it should not be used to:
[...] represent arbitrary addresses (e.g. postal addresses), unless those addresses are in fact the relevant contact information.
The spec doesn't address "social media", so I guess this is opinion: if the social media links are an "approved" means of contact, those links would fall under the purview of the tag.
Proper Use of address tag
The same doc, and https://html.spec.whatwg.org/multipage/semantics.html#the-address-element, state that it can have arbitrary content, with the restrictions noted.
It further states that the only information that should be contained in it is related contact information, e.g., it should not be used to:
[...] represent arbitrary addresses (e.g. postal addresses), unless those addresses are in fact the relevant contact information.
The spec doesn't address "social media", so I guess this is opinion: if the social media links are an "approved" means of contact, those links would fall under the purview of the tag.
Related Topics
Onmouseout Event Not Triggered When Moving Mouse Fast (Gwt - All Browsers)
Hide-Nav-Bar Hides Nav-Buttons Too. I Want to Retain The View Title and The Ion-Nav-Buttons
Change Navbar Color in Twitter Bootstrap 2.0.4
How to Style The Drop-Down Suggestions When Using HTML5 <Datalist>
Why Is Safari 4/Mac Not Rendering Top and Bottom Margins in This Nested Div
Image and Text as Value of Content Property
Angular2 Height Animation - Same State Transition
Stylize Input Box as Seen on Android Developer Website, Using CSS
Media Query Works on Mobile Firefox But Doesn't Work on Mobile Chrome
Supporting Multiple Resolution and Density of Images in Phonegap
HTML5 Search Input: No Background Image in Chrome
Vs Code Live SASS Compiler Not Updating Files
Break an Absolutely Positioned Element Out of Its Relatively Positioned Ancestor