CODEWITHSUNDEEP
htmldomseoparagraph
Ky -
Ky -

Reputation: 32083

Why can't address elements be in p elements?

I've reviewed https://stackoverflow.com/questions/5542428/why-on-earth-is-address-a-block-level-element already and found that it adds little insight to the matter.

A client gave me a paragraph of plain text, and I'm attempting to optimize it for both user experience and SEO. Here's the relevant snippet, from the middle of the text:

<p>[Several sentences]. Having trouble? Contact <address style="font-style:normal;display:inline">Jane Doe at <a href="mailto:[email protected]">[email protected]</a> or <a href="callto:5551234567">(555) 123-4567</a></address> between the hours of 9AM and 5PM. [Several sentences].</p>

However, since <address> is a block-level element, the DOM ends up looking like this:

<p>[Several sentences]. Having trouble? Contact </p>
<address style="font-style:normal;display:inline">Jane Doe at <a href="mailto:[email protected]">[email protected]</a> or <a href="callto:5551234567">(555) 123-4567</a></address>
between the hours of 9AM and 5PM. [Several sentences].<p></p>

and the output looks like this:

[Several sentences]. Having trouble? Contact

Jane Doe at [email protected] or (555) 123-4567

between the hours of 9AM and 5PM. [Several sentences].

Obviously, this breaks the UX, and isn't valid HTML. My questions are What is the reasoning behind <address> being block-level only, and is there any way I can make it display inline? As you can see, the CSS display:inline attribute/value does nothing to help the situation

Upvotes: 1

Views: 100

Answers (2)

robertc
robertc

Reputation: 75707

Don't use the <address> element for generic addresses, instead use the Person schema with Microdata, or the hCard Microformat, or RDFa. Here's a example with Microdata:

<p itemscope itemtype="http://schema.org/Person">
    [Several sentences]. Having trouble? 
    Contact <span itemprop="name">Jane Doe</span> at 
    <a itemprop="email" href="mailto:[email protected]">[email protected]</a>
    or <a itemprop="telephone" href="tel:5551234567">(555) 123-4567</a> 
    between the hours of 9AM and 5PM.
    [Several sentences].
</p>

You can test the data extraction with Google Webmaster Tools (scroll down to the section titled 'Extracted structured data').

Upvotes: 2

zzzzBov
zzzzBov

Reputation: 179046

Why can't address elements be in p elements?

Because the HTML specification defines them that way.

The address element represents the contact information for its nearest article or body element ancestor. If that is the body element, then the contact information applies to the document as a whole.

What this means is that <address> elements aren't meant to be used to mark up any old address. The implication is that you'd be using the <address> as a means of contacting the source of the article. Within an article, discussing "123 fourth street" would not merit using an <address> element.

If you want to describe it as an address for styling purposes, you could always give it a class as:

<span class="address">123 fourth street</span>

Upvotes: 3

Related Questions