Using the <footer> and <address> Tags on a Webpage

[gouri]

I am currently working on a website that is going to have one page at first, so I am planning on including the physical address of the business in the body text after the last paragraph.

I think that it would be okay to write the address inside a <footer> tag, but I would appreciate if you could tell me if this would be okay?

The next thing that I am thinking about is how to write the address inside the <footer> tag, and I think writing it inside an <address> tag would be a good way to do this. Would this be okay?

I believe that the answer to the 2 questions below would be yes, but I wanted to get your thoughts?

(1) Is it okay to include the phone number in the <address> tag?

(2) Can I include a sentence such as "This is our address:" in the <address> tag in addition to the address itself? If I can, can this sentence be within a <p> tag inside an <address> tag?

Example

<footer>
<address>
<p>This is our address:<p>
XYZ Company<br />
123 Pine Drive<br />
City, State 11111<br />
<br />
Phone: [phone]
</address>
</footer>

I have read that the words inside an <address> tag are italicized. Does this mean that what is in the <p> tag will also be italicized? Is there a way to un-italicize what is in the address tag, both what is in the <p> tag and the address itself that is not in the <p> tag but within the <address> tag?

These days, one thing that I am seeing businesses do is make a company’s phone number into a link so that it can be clicked on in a smartphone to dial the number. I believe that they are using something like <a href="tel:[phone]">Call [phone] today.</a> to do this. I am not using responsive web design on this site. It is a desktop version and that is what someone will see on a smartphone. On a site such as this, would a visitor be able to click on the phone number and dial the number on a smartphone, or do you need responsive website design to do this? Also, will what I have written appear okay if the site is viewed on a desktop? Will Call [phone] today. appear as plain text or a link? Will there be any display problems in terms of maybe the sentence not showing up at all on a desktop?

I also saw this in one place so I wanted to ask. Can each line of the address be put inside a <line> tag? Is there such a thing?

It would look like the following:

<footer>
<address>
<p>This is our address:<p>
<line>XYZ Company</line>
<line>123 Pine Drive</line>
<line>City, State 11111</line><br />
<br />
Phone: [phone]
</address>
</footer>

One more thing that I thought about as I wrote this post is the mentioning of the phone number. Is it possible to mention the phone number of a business too many times on a webpage and/or website? I am planning on including it in the meta description, h1 tag and once in the body text as I have mentioned in my example above. Would this be okay?

I apologize for all the questions. I have not really worked on sites for businesses before, and your thoughts would really help to guide me.

[drhowarddrfine]

None of that is necessary if you use the javascript HTML5 shiv or shim created for IE.

[graeme_p]

Going back to earlier in the discussion, was it clear to you that you can use <address> and schema.org together?

In fact, with new the new semantic tags and more focus on the semantics of HTML, I would think its more important than ever to get the semantics of old tags correct.

[drhowarddrfine]

@graeme_p Were you talking to me? I was only commenting on the wrapping of divs around html5 elements.

[graeme_p]

Sorry, that was meant for @gouri.

I just read the thread and if there is a mention that you can use schema.org and an address tag (which I think is the right thing to do) it has been missed.

[gouri]

@graeme_p,

Going back to earlier in the discussion, was it clear to you that you can use <address> and schema.org together?

In fact, with new the new semantic tags and more focus on the semantics of HTML, I would think its more important than ever to get the semantics of old tags correct.

Thanks for mentioning this. I was wondering if the <address> tag can be used along with schema.org.

It looks like using them together might be the way to go.

[gouri]

JD_Toims,

Yes, you could even wrap your sections in a <div> or put a <div> within the <section> wrapping the content and style the <div> rather than the <section> for backward compatibility.

eg

<section>
<div class="section">
<p>stuff here</p>
</div>
</section>

<div class="section">
<section>
<p>stuff here</p>
</section>
</div>

Thanks for the response. I think that what you coded is something that I could do. I would appreciate if you could help me with a couple of questions that I had about using the <div> tag.

Does using <div class="section"> help with older browsers that don’t recognize HTML5 elements like <section> by including something that the browser recognizes (e.g., <div>) with something that it does not (e.g., <section>) recognize so the text displays the way that it is styled, or does using
<div class="section"> help with making elements like <section> that are not compatible with a particular DOCTYPE become compatible with it and, as a result, the text displays the way that it is styled? Or does the use of <div class="section"> help with both?

If there is more than one type of tag inside the <div> and the content in those tags is styled differently, what should I do? I don’t think that I would be able to put a <section> inside a <div> because I have several elements (e.g., <p> and <h2>) to include and they would be styled differently. I probably have to put the <div> tags inside the <section> tag? Would I need a <div> for the several <p> tags and a <div> for the <h2> tag, and both of those <div> tags are inside <div class="section">? Essentially several <div> tags inside a main <div> tag?

Would it be okay to do this with my DOCTYPE?

What could I name each of the <div> tags inside the main <div> (I think what I am asking here is does what I name a <div> tag matter, or does it not because the elements inside the <div>, such as <p> and <h2>, can be understood by the search engines?)? I am thinking that the main <div> would probably be <div class="section">?

Is the following a possibility:

<section>
<div class="section">
<div class="paragraph">
<p>stuff here</p>
<p>stuff here</p>
</div>
<div class="heading">
<h2>stuff here</h2>
</div>
<div class="paragraph">
<p>stuff here</p>
</div>
</div>
</section>

I know that this post is a little detailed, but I think that these questions will really help me to understand what I have to do to use HTML5 elements.

[edited by: gouri at 11:28 pm (utc) on Jan 16, 2014]

[swa66]

I'd just code pure html5 and use a shiv for obsolete IE versions (in e.g. a conditional comment)

E.g.: [code.google.com...]

Excessive div's are as bad as tables were IMHO.

Or you could just declare those obsolete IE version unsupported - if you can get away with that: it rules it all as it also means you rid yourself of the worst browsers out there.

[drhowarddrfine]

Not to mention that little bit is already an un-maintainable mess.

[lucy24]

<div class="paragraph">

Ordinarily* you would not need this, since all browsers including Netscape 1.0 know what a paragraph is :)


* I've actually used this name-- or one very much like it-- in one specific situation: when I need text to look just like a paragraph, so the css says
p, div.para {blahblah here}
but there is non-paragraph behavior such as containing another block-level element.