I'm searching for correct usage of <address> element.
For example, i have to show more than one address, so i need to write them in an address element or seperate for each other?
<p>BLA BLA CO.</p>
<address>
<span class="full-address">XXX ST. XXX ETC.</span>
<span class="city">IZMIR</span>
<span class="town">Bornova</span>
<span class="phone">+11 111 111 1111</span>
<span class="fax">+11 111 111 1112</span>
</address>
<p>OTHER BLA CO.</p>
<address>
<span class="full-address">XXX ST. XXX ETC.</span>
<span class="city">IZMIR</span>
<span class="town">Bornova</span>
<span class="phone">+11 111 111 1111</span>
<span class="fax">+11 111 111 1112</span>
</address>
What is the correct usage of this?
In your use-case, it probably is incorrect usage.
As per the official refs:
The address element must not be used to represent arbitrary addresses
(e.g. postal addresses), unless those addresses are in fact the
relevant contact information. (The p element is the appropriate
element for marking up postal addresses in general.)
Ref, Living standard: https://html.spec.whatwg.org/multipage/semantics.html#the-address-element
Ref, Spec HTML4.01: http://www.w3.org/TR/html401/struct/global.html#h-7.5.6
Ref, Recomendation HTML5: http://www.w3.org/TR/html5/sections.html#the-address-element
.
You are presenting several postal addresses, and so it seems a p is more appropriate here. Regarding address, it represents contact information for its nearest article or body and is also allowed in footer.
Well, depending on this source the <address> tag is not an actually address in your usecase. Its more like a pointer to the page author. Means, it should contain your own address.
Additional info by w3schools
The <address> tag defines the contact information for the author/owner of a document or an article.
If the <address> element is inside the <body> element, it represents contact information for the document.
If the <address> element is inside an <article> element, it represents contact information for that article.
Related
I think I saw somewhere that you should use only one <address> tag if it refers to the body, but I can't find that in the spec, so is it fine?
Because I have a header with the phone number on one side and on the other side the location of the restaurant, and the logo in the center:
And another thing: in the spec it says that I can't put content that isn't contact information, but does the time you are available for phone calls considered to be contact information, or can I put it directly in a <small> tag, after the phone number?
<!-- for some reason I can't type the header tag -->
<address>
555 555 5555
</address>
<aside>10 AM - Midnight</aside>
<img src="logo" alt="DevCamp's fantastic Fries">
<address>
123 Any Street<br>
Scottsdale, AZ,<br>
85251
</address>
And if I can do:
<address>
<p>555 555 5555</p>
<!-- is it semantically correct? -->
<p><small>10 AM - Midnight</small></p>
</address>
after reading this : https://developer.mozilla.org/fr/docs/Web/HTML/Element/address ,
i dont see where is the problem , it's not too much to make impossible to understand that both part of the company adress.
The same way that there is address for street names and places is there some HTML tag that is indicated, semantic to wrap GPS coordinates or other GeoLocation information?
Or alternative is there a microformat for this? I saw some ideas out there (1), (2).
The practical example is in a list of items, let us say restaurants for example, how to have the GPS coordinates in a semantic, SEO smart tag.
<ul>
<li>
<p>Johns restaurant</p>
<address>
Avenue 24<br>
Downstreet<br>
GPS: 100.00, 100.00
</address>
</li>
<li>
etc...
</li>
</ul>
(maybe address is the answer in the end?)
You can use the geo URI scheme name.
Example:
Location
More information see IETF RFC 5870, specially the Section 6.2. Hyperlink.
But there also a GEO microformat.
Example:
<div class="geo">Location:
<span class="latitude">41.2051487</span>,
<span class="longitude">-8.6649087</span>
</div>
Hope this helps clearing things a bit!
Is it bad practice to include two address tags in the same document inside the same article?
The subtext is a press kit rundown of a company, including some facts about it.
eg.
<address>
company email: some#email.address
</address>
<p>
founded at: 1970, 1st of January.
</p>
<address>
address:<br>
some place<br>
earth<br>
milky way
</address>
Are there any significant outcomes for doing this?
With what machines/browsers/websites are the address tags significant?
How does this affect search engines?
You might use address tags twice in your document for example, You have two article tags in your document and those have different information like email address,Phone numberetc. Then what is the solution? Obviously you cannot use single address tag for this.
<article>
article one
<address>
written by: John,
Email: email#email.com
</address>
</article>
**<!-- Article Two -->**
<article>
article two
<address>
written by: Doe,
Email: email#email.com
</address>
</article>
In this situation you need to address tags. I don't think there is any browser which does not support it. Because this tag is around since HTML3. Go through these links to clear your confusions. Address element by Jack Osborne,
w3c Specs
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 jdoe#example.com or (555) 123-4567</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 jdoe#example.com or (555) 123-4567</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 jdoe#example.com 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
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>
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:jdoe#example.com">jdoe#example.com</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').
Is use section id="contacts" semantically correct in place of div id="contacts"?
On a webpage I need to add a multiple Contacts info of the company. Generally I use div id="contacts But if I want to use HTML 5 tag as much as possible is it appropriate to use section id="contacts" in this case.
Or no benefit to use Section element here.
For example to wrap multiple address like this
<p>
<b>Address 1:</b><br>
9900 Corporate Campus Dr., Suite 3000<br>
Louisville, KY 40223 <br>
<b>Phone:</b> (502) 657-6033<br>
<b>Fax: </b>(425) 936-7329<br>
</p>
<p>
<b>Address 2:</b><br>
9900 Corporate Campus Dr., Suite 3000<br>
Louisville, KY 40223 <br>
<b>Phone:</b> (502) 657-6033<br>
<b>Fax: </b>(425) 936-7329<br>
The address element must not be used
to represent arbitrary addresses (e.g.
postal addresses), unless those
addresses are in fact the relevant
contact information.
So in your case—if I understand correctly this is the company's website—you should use <address>.
In HTML5, using a <div> versus using a <section> is all based on the content it will contain. If the content is contextually relevant to the page, you would use a <section>. However, if the only reason you are encapsulating information within the tag is to apply style via CSS and nothing more, you would use a <div>.
Don't get confused here; You can still apply style to a <section>.
EDIT: It seems that there is some confusion about <section> vs <div>.
Note: The section element is not a generic container element. When an
element is needed for styling purposes or as a convenience for
scripting, authors are encouraged to use the div element instead. A
general rule is that the section element is appropriate only if the
element's contents would be listed explicitly in the document's
outline.
Source: http://dev.w3.org/html5/spec-author-view/the-section-element.html#the-section-element
In your case, you're providing contextually relevant information, so you would use a <section> tag. However, as #Knu pointed out, if the address is relevant contact information, you would actually wrap the address in the <address> tag.
You might do something like this:
<section id="contact">
<p>For more information, contact us at one of the following addresses:</p>
<address>
<p>9900 Corporate Campus Dr., Suite 3000<br/>Louisville, KY 40223<br/><strong>Phone:</strong> (502) 657-6033<br/><strong>Fax: </strong>(425) 936-7329</p>
</address>
<address>
<p>9910 Corporate Campus Dr., Suite 5000<br/>Louisville, KY 40223<br/><strong>Phone:</strong> (502) 657-6035<br/><strong>Fax: </strong>(425) 936-7339</p>
</address>
</section>
A single example of using a <div> instead of a <section> might be if the content was a container for many <section>'s.
<div id="something">
<section id="one">
<p>This is some content.</p>
</section>
<section id="two">
<p>This is some other content.</p>
</section>
</div>
You can use the section to wrap multiple address only if you have a heading like "Contact Information" or something like that. If you don't have a (natural)heading, then a generic block-level element(div) must be used.
Also, each address can be wrapped inside an address tag. (I'm not too sure about it though as I feel address is meant only for marking up email addresses)
PS: I see that you have wrongly used b here. It should be span instead. Also, an address is not a paragraph. So, p shouldn't be used as well.
For that matter I would recommend you to take a look at microdata at schema.org. You can add specific semantic tags for every part of the address, your company and everything else.
This is a specific example and tutorial on how to us microdata:
http://www.htmlgoodies.com/html5/Web-Developer-Tutorial-HTML5-Microdata-3920016.htm#fbid=7JjItyF1dhi
This ones are the vocabulary you'll probably need:
http://schema.org/Organization
http://schema.org/PostalAddress
I agree with #knu and would recommend using multiple address elements as these are not arbitrary addresses.
I would also use the vcard format.
Also see Marking up a postal address with HTML.