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').
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.
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'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.
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.
I'm making a small web-chat utility and am looking for advice on which elements to use for messages.
Here's what I'm thinking of using at the moment:
<p id="message-1">
<span class="timestamp" id="2009-03-10T12:04:01+00:00">
12:04
</span>
<cite class="admin">
Ross
</cite>
Lorem ipsum dolor sit amet.
</p>
I'd take advantage of CSS here to add brackets around the timestamp, icons for the cited user etc. I figured it would be silly (and incorrect) to use a blockquote for each message, although I consider the cite correct as it's referring to the user that posted the message.
I know this isn't a) an exact science and b) entirely essential but I'd prefer to use meaningful elements rather than spans throughout. Are there any other elements I should consider? Any microformats?
HTML isn't very semantic in a customizable way. Nevertheless your format should be understandable in any browser (with proper CSS, as you have pointed out).
What I see in the code example above is very similar to XML. It might be cumbersome and overkill for your needs, but I'd like to point out that you can use XML with XSLT as a substitute to both (X)HTML. This way you can get your tags as semantic as possible, and don't need to compromise with the limitations of the HTML tags.
w3schools has an article about the topic. I could swear that I saw a webpage in sun.com that was done in XML, but I can't find it anymore.
If you don't intend this to be interpreted or parsed by third party software, I'd nevertheless advise against this method, and stick with the proven HTML.
Seems reasonable to me, except that the ‘id’ is invalid. NAME tokens can't start with a number or contain ‘+’.
Plus if two people spoke at once you'd have non-unique IDs. Perhaps that data should go in another attribute, such as ‘title’ (so you can hover to see the exact timestamp).
If you're going for semantic HTML, you'll probably want to know that HTML5 doesn't consider your use of the <cite> element correct anymore.
A person's name is not the title of a work — even if people call that person a piece of work — and the element must therefore not be used to mark up people's names.
<ol>
<li class="message" value="1">
<span class="timestamp" id="2009-03-10T12:04:01+00:00">
12:04
</span>
<cite class="admin">
<address class="email">
<a href="mailto:ross#email.com">
Ross
</a>
</address>
</cite>
Lorem ipsum dolor sit amet.
</li>
</ol>
I would try something like the above. Notice I have placed everything in an Ordered list, as comments can be construed in the linear manner fitting an ordered list. Also, I have embedded, inside your Cite tag, an Address tag with an Anchor element. The unfortunately named Address element is actually meant to convey contact information for an Author, so you would probably want to link to the author's email address there.
What you suggested is already very good. If you want to take it a step further and be able to allow tons of different presentation options with the same markup (at the expense of heavier html) you may want to do something like:
<dl class="message" id="message-1">
<dt class="datetime">Datetime</dt>
<dd class="datetime">
<span class="day">Wed</span>
<span class="dayOfMonth">11</span>
<span class="month">Mar</span>
<span class="year">2009</span>
<span class="hourMin">17:34</span>
<span class="sec">33</span>
</dd>
<dt class="author">Author</dt>
<dd class="author">Ross</dd>
<dt class="message">Message</dt>
<dd class="message">Lorem ipsum dolor sit amet</dd>
</dl>
Since you mention microformats in the question, you are no doubt already familiar with the microformats wiki. It contains a good number of examples for different situations.
Another possibility would be to borrow parts of SIOC, which among other things is an ontology for forums - pretty similar to chat.
By re-using existing formats, you can take advantage of plugins and tools like Operator and maybe get more out of your app for free.
I'd use XML with XSLT to transform (style) the data.
It makes sense semantically here, but you also have the conversations in a suitable format for archiving (i.e. XML) - I assume you will have some sort of log or 'history'.
As #bobince said, the id="2009-03-10T12:04:01+00:00" is invalid.
You should change this:
<span class="timestamp" id="2009-03-10T12:04:01+00:00">
12:04
</span>
To this:
<time class="timestamp" datetime="2009-03-10T12:04:01+00:00">
12:04
</time>
You can get more information about the time tag at HTML5 Doctor and W3C:
The time tag on HTML5 offers a new element for unambiguously encoding dates and times for machines while still displaying them in a human-readable way.
The time element represents either a time on a 24 hour clock, or a precise date in the proleptic Gregorian calendar, optionally with a time and a time-zone offset.
...
I agree with the ordered list (ol) solution posted by #Robotsu, except by the time tag I just posted and the incorrect address inside cite tag!