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.

[lucy24]

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?

Every html element comes with a default presentation. And they're pretty standardized from one browser to the next. Comment-out everything in your css that deals with, for example, h1 through h6 and see what you get.

Anything that's done by default can be overridden in css. In fact for insurance it's a good idea to reinforce defaults:

address {font-style: italic;}

to make sure browsers don't get bright ideas next year. So then you can go to

address {font-style: normal; font-weight: normal; text-align: left;}
address p {further-details-here}

Address, though? Really? I just recently finished weeding out my own <address> elements on grounds of being just too 1997.

:: detour to html5 spec ::

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.
<snip>
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.)

The address element must not contain information other than contact information.
<snip>
Typically, the address element would be included along with other information in a footer element.

Editorial comment: I really, really wish that when they do a wholesale redefinition of what an element is for, they would instead make up a new element with a new name. And vice versa.

[gouri]

lucy24,

Thanks for the help with the CSS coding.

Address, though? Really? I just recently finished weeding out my own <address> elements on grounds of being just too 1997.

Instead of using the <address> tag, can you tell me if there would be something better to use?

I am not sure if this makes a difference, but the address would be appearing after the last paragraph in the body text, maybe you can think of this as the last paragraph. It wouldn't be appearing in a footer block that you usually find in templates.

[lucy24]

In fact it sounds as if <address> is exactly what you want. I'm only grumbling because it was used differently in html 4. (Truthfully I've no idea what it was originally intended for, just that you used to find it at the bottom of every page.) But what's the reason for the mishmosh of <p> <line> and <br> within the address?

:: further detour to html5 ::

What the bleep is <line>? I can't even find it!

[phranque]

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?

while the anchor text would show as a link, the tel: protocol typically won't work on a desktop.
i would suggest using an identifiable span element for that text and use some javascript to change it to an anchor element for smartphone visitors.

Can each line of the address be put inside a <line> tag? Is there such a thing?

the <line> element is used for scalable vector graphics (SVG) and not HTML.

you might want to consider using structured markup for the address.

PostalAddress - schema.org:
http://schema.org/PostalAddress [schema.org]

hCard 1.0 · Microformats Wiki:
http://microformats.org/wiki/hcard [microformats.org]

[gouri]

lucy24,

What the bleep is <line>? I can't even find it!

I saw it maybe once in an example on the Internet as a tag to use with the lines of an address. I then looked at html tags and did not see <line>. Then I started to think about if <line> is a tag. I am not sure if it is?

But what's the reason for the mishmosh of <p> <line> and <br> within the address?

I included <p> because there are words within the <address> tag that are not a part of the address, so I thought that maybe I should put those words in a <p>, a way to help organize things. I saw some examples on the Internet like this.

Are you suggesting no <p>, something like this:

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

If I use the <address> tag, would I have to style <address> in a CSS stylesheet? Maybe give it the same properties that I give to the <p> tag, if I want the contents in the <address> tag to look the same as the contents in the <p> tag? Also, I put the <br /> tags (I saw examples of this on the Internet also) because each line within the <address> tag doesn't go to the end. Is there anything else that I can do?

[gouri]

phranque,

you might want to consider using structured markup for the address.

Thanks for those links. They are really helpful.

Would you say that it is easier to code using <address> than using structured markup? I guess what I am asking is I am not very familiar with structured markup. Would it be hard to learn?

Also, do you think that structured markup in some way help with higher rankings in the SERP than using the <address> tag? Maybe for local searches?

[edited by: gouri at 2:50 am (utc) on Dec 1, 2013]

[SevenCubed]

Observation, when you use:
XYZ Company<br />
123 Pine Drive<br />
City, State 11111<br />

Machine will read it as:
XYZ Company123 Pine DriveCity, State 11111

You need a space between:
Company <br />
Drive <br />

[gouri]

SevenCubed,

You need a space between:
Company <br />
Drive <br />

Thanks for mentioning this. I didn't realize that I wasn't coding this properly.

If I was using the <br /> tag within a <p> tag, would I need to leave a space?

[edited by: gouri at 2:58 am (utc) on Dec 1, 2013]

[SevenCubed]

I didn't either at one point until I saw a fused snippet in SERP that alerted me to it.

[gouri]

Can you tell me what a fused snippet is? Also, would I have to leave a space if I was breaking up a line within a <p> tag?

[SevenCubed]

Just 2 words fused together like your examples Company123 DriveCity. It's not needed for paragraph tags no.

[lucy24]

If I was using the <br /> tag within a <p> tag, would I need to leave a space?

Did you mean

<p>blahblah<br />
moreblahblah</p>

and so on? It doesn't matter what environment the <br> is in, just that it's a <br>.

when you use:
XYZ Company<br />
123 Pine Drive<br />
City, State 11111<br />

Machine will read it as:
XYZ Company123 Pine DriveCity, State 11111

Are you positive about this? I could understand if it's

XYZ Company<br />123 Pine Drive<br />City, State 11111<br />

all in one line. But in the code as shown, the <br> is followed by a physical line break, which ought to be treated identically to an inline space. That's been part of the html spec since more-or-less Day One.

:: detour to w3 dot org ::

Ooh, what fun. Back in 1993, they said [w3.org], quote,

Space characters must be rendered as horizontal white space. In HTML, multiple spaces should be rendered as proportionally larger spaces.

This is, I believe, the precise opposite of the current standard.

Oh, look at what I found, gouri. This is still in 1993 in the same document:

Typically, an address element is italic and/or right justified or indented. The address element implies a paragraph break. Paragraph marks within the address element do not cause extra white space to be inserted.

This whole document is utterly fascinating but, er, slightly o/t. I'll go away now.

[gouri]

For the following:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">

would I be able to use HTML tags such as <header> and <footer>?

[SevenCubed]

Are you positive about this?

In as much as one day I saw 2 words fused together in the SERP description, opened the page in my editor thinking I had typo of missing a space, and actually finding it was due to:

word1<br />
word2

...on different lines but appearing as word1word2 in SERP, yes. I added a space between "word1 <br />" then watched that page in SERP and it was corrected when it was finally reindexed.

[lucy24]

In as much as one day I saw

Yup, that's positive. But honestly it sounds like a mistake on the search engine's part. Without the <br>, multiple spaces are supposed to be collapsed-- but never eliminated. If you had ordinary text spanning multiple physical lines, would a search engine delete line breaks instead of converting them to single spaces?

would I be able to use HTML tags such as <header> and <footer>?

I think the exact dtd will come to matter less and less with time, as html becomes a more fluid standard rather than 1, 2, 3, 4 in separate boxes. Right now I don't hesitate to use html5 elements such as <wbr> in the middle of an html4 document. If the browser knows what the element means, it will render it appropriately; it won't go all passive-aggressive "I know what that means but I'm in HTML 4 so I'm going to pretend not to" ;)

[phranque]

Would you say that it is easier to code using <address> than using structured markup? I guess what I am asking is I am not very familiar with structured markup. Would it be hard to learn?

the examples given are pretty much cut-and-paste and replace with your information.

Also, do you think that structured markup in some way help with higher rankings in the SERP than using the <address> tag? Maybe for local searches?

the structured markup makes it easier to understand the semantics of a text string that happens to be the description of an address.
google usually gets it right without the structured markup but they rarely get it wrong with it done correctly.

[gouri]

google usually gets it right without the structured markup but they rarely get it wrong with it done correctly.

I think I will try to use the structured markup.

[swa66]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">

would I be able to use HTML tags such as <header> and <footer>?

You should not: it's not valid in the DTD you reference.

It's far easier and better to just use polyglot (x)html5 instead of transitional xhtml 1.0.

Polyglot (x)html5: it's what is common between xhtml5 and html5. You only get to use what's valid for both. And serve it as xml to supporting browsers (mostly all except well ... MSIE)
It's much like what you're doing with your xhtml1.* (minus the transitional and serving as html - and then catching the wrath of the "thou shall not use xhtml" crowd cause your xhtml isn't well formed. It's also clearly the way forward for those (still) using xhtml 1.* variants.

Ref: [webmasterworld.com...]

[gouri]

swa66,

I am using a template so I am not sure that I can decide what to use. I think that I will have to use what I have posted because that is what the template is going with.

I know that you say that I should not use the <header> and <footer> tags, but can I use them? Would it create some type of problem?

Would I be able to use the <section>, <article>, and <address> tag?

Would I be able to use structured markup if I didn't want to use the <address> tag?

[swa66]

If you use <header>, <footer>, <section>, <article> with that DTD, you're serving invalid xhtml.
If you serve it as xml (which you should), some of your visitors (all with a decent browser), will see "invalid markup" messages instead of your intended content.
[I've not actually tested that in practice to be honest - but it should]

So you REALLY should not.

Now, if you're serving xhtml (xml) content as it if were mere html "cause the world (read: MSIE) is not ready for xml served xhtml", or some other reason (framework e.g.): then yes it'll "work" but you're on quite a slippery slope. As you're claiming compliance with something (that DTD) you're not compliant with at all (and yes xhtml (xml) is black and white when it come to compliant, there's no "but", "grey"|"gray", ....

If I were you:
- first worry bout getting onto polyglot (x)html5, and off of transitional xhtml 1.0 It's not THAT hard if you come from *valid* xhtml 1.*
- only then about <header>,<nav>,<footer>, <section>, <article> and all other html5 features.

Don't try to get html5 stuff into xhtml1.0 - that's about the least productive use of your time IMHO.

[gouri]

swa66,

I appreciate your advice. For the sites that have that DTD, I will not use these elements. I'll use them on sites where I can.

I am also going to try to learn more about the polyglot (x)html5 that you mentioned.

[gouri]

phranque,

while the anchor text would show as a link, the tel: protocol typically won't work on a desktop.
i would suggest using an identifiable span element for that text and use some javascript to change it to an anchor element for smartphone visitors.

On the desktop, would I be able to see Call [phone] today. as plain text? Or would there be a problem in having the sentence displayed at all on the desktop?

The reason I am asking is I am not that familiar with javascript.

[phranque]

you could put the phone number in a span element or other container that displays it as plain text and it gets replaced by a clickable/callable anchor element using the same phone number text for smartphone visitors.

[mattur]

If you serve it as xml (which you should), some of your visitors (all with a decent browser), will see "invalid markup" messages instead of your intended content.
[I've not actually tested that in practice to be honest - but it should]

Nope. Well-formedness errors result in these anti-user error messages, not validity errors.

It's really terrible advice to suggest using Polyglot (i.e. XHTML) markup. Authors should completely ignore Polyglot unless they are using a legacy XML publishing system. It's just a hangover from the whole Emperor's New Invisible XHTML Clothes advocacy thing from a decade ago. XHTML is dead as a dodo.

To use Polyglot markup without shooting yourself in the foot you need to be using an XML toolchain (i.e. a CMS/blog/ecommerce publishing system that is built to publish XML so e.g. no Wordpress). If you don't use an XML toolchain and publish your pages as XML, visitors to your site will end up seeing errors (the infamous Yellow Screen Of Death) instead of your content.

Just use HTML5. Despite your doctype, that's what browsers are actually using to display your page anyway.

There are no benefits whatsoever to publishing Polyglot or XHTML5 for 99.999% of websites so your time would be better invested in doing something that actually benefits your visitors.

[swa66]

visitors to your site will end up seeing errors (the infamous Yellow Screen Of Death) instead of your content.

only if you have errors in your xml ... and you'd see them yourself just as soon as the visitors.

[drhowarddrfine]

Just use HTML5. Despite your doctype, that's what browsers are actually using to display your page anyway.

You can use that doctype and serve application/xhtml+xml just fine. XHTML is NOT dead and used quite a bit by sites that use XML in the background. I just ran across one large popular site (which of course escapes me right now) that does just that.

There are tons of documents around marked up in XML so serving them as XHTML makes a lot of sense. If it weren't for SEO problems, I would create all my sites using XHTML or, even better, XML alone if browsers (meaning IE) would handle all the styling. In fact, I once did that for one ecommerce site for a short time.

[mattur]

XHTML is NOT dead and used quite a bit by sites that use XML in the background. There are tons of documents around marked up in XML so serving them as XHTML makes a lot of sense.

Polyglot markup is a way of transitioning from XHTML to HTML, so advising people already using HTML to instead use Polyglot is nonsensical and utterly preposterous.

XHTML is dead as a dodo and has been for years. Polyglot markup is a way of migrating away from these legacy XML publishing systems. And no, serving pages as XHTML has never made any sense for obvious reasons.

[gouri]

phranque,

you could put the phone number in a span element or other container that displays it as plain text and it gets replaced by a clickable/callable anchor element using the same phone number text for smartphone visitors.

To get the clickable/callable anchor element when the page is looked at using a smartphone, would I have to use a span element with schema markup or can I just use a span element?

Also, suppose my text is Call [phone] today

What should be in the span element, Call [phone] today or only [phone]?

------------------------------

Just use HTML5. Despite your doctype, that's what browsers are actually using to display your page anyway.

So, despite the Doctype that I have, I would be able to use the <header>, <footer>, <section>, and <article> tags?

[mattur]

gouri: yes, the doctype declaration is a legacy from the SGML days, its only function is to switch browsers into standards-mode for CSS layout features.

The doctype you use has no effect on HTML elements supported in the browser. Browsers just ignore it and use the same HTML5 parser they use for all HTML pages.

So you can just use <!DOCTYPE html> instead, if you want your pages to validate, but it will have no effect whatsover on what features actually work in the browser :)