Correct Way for Writing an <Address> Tag for My Web Site, to Provide Contact Details for Our Company

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 classes instead of Ids, because classes are more generic and Ids 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



Leave a reply



Submit