Very Annoyed about html5 requirements.

[aristotle]

Yesterday I decided to convert a small long-neglected site to html5 (from xhtml). This is my first experience with html5, and I've noticed some things that I like, such as the <nav> tag. Luckily most of the old xhtml code still validates, but I've also encountered a couple of annoying snags. In particular, when using the "name" tag to allow jumping to a specific point on a page, I get the following message from the W3C validator:

Line 136, Column 18: The name attribute is obsolete. Consider putting an id attribute on the nearest container instead.
<a name="more"> &nbsp; </a>

Evidently it doesn't count this as an error, but says that it's "obsolete".

I use this tag at least 20 times on the site, and find it annoying to be asked to change all of them. So should I leave them as they are, even though they're obsolete, or should I spend the time to change all of them?

What's annoying is that they would declare something so simple and useful to be obsolute. They also threw out the <center> tag, which is also very simple and very useful. Why the heck did they get rid of such simple useful tags? There's no logical reason for getting rid of them -- it was just done arbitrarily. It's really annoying!

Edit: P.S. I should have mentioned that the message from W3c is a "warning", not an error.

[Fotiman]

No, it was not arbitrary.
The <center> tag is purely presentational, which means it belongs in CSS, NOT in markup. That's nothing new... it was deprecated back in HTML 4, which was published over 10 years ago!

Also, your document is still valid, but going forward you should be creating your named anchors with an id instead, since id is supposed to be unique and name may not be. Replacing 20 strings on a site should take a matter of minutes... it probably took you longer to write this post than to do the actual replacement. But the point is that it's semantically more correct to use id than a name.

[aristotle]

Thanks for you reply. What about <br /> ? Isn't it presentational? Why didn't they throw that out too? And what about backward compatibility? Doesn't anybody care about that?

[Fotiman]

The br element can be considered part of the content in some cases, for example, in the cases of poems or addresses. For a while, I think br was at risk of being obsoleted, but I think it was saved because of those cases where it actually is part of the content.

Backwards compatibility should be supported for some time. 14 years since being deprecated... I think that's pretty good. Also, just because it's not valid doesn't mean browsers will necessarily stop supporting it.

[lucy24]

Edit: fotiman typed faster.

No, <br /> (or, as we say over here in html, <br>) isn't presentational. It's a behavior. "Presentational" is when there's a CSS equivalent, like

<center>
=
<align = "center">
=
<style = "text-align: center">
=
<class = "centertext">
paired with CSS to define .centertext

Since <br> is a tag, you can give it classes:

br.conditional {display:none;}
br.conditional:before {content: " ";}

or special behaviors

@media screen and (max-width: 480px) {
br.conditional <et cetera as above>

And what about backward compatibility?

Backward compatibility is the browser's responsibility, not the html standard's. Browsers will not stop understanding <center> next week, just as they will not stop understanding your existing pages with an XHTML DTD. For that matter, browsers still do HTML 3. (If you have ever seen an auto-generated directory index page, it was probably in HTML 3.2.)

Note also that some of the differences you're finding are not HTML5 as such. They're XHTML vs. HTML, because the two languages are separate linguistic tracks.

[aristotle]

Thanks again. I understand your arguments. But I also noticed that all of Lucy's examples of centering are considerably more complex than the plain old <center> tag was.

If it had been up to me, I would have put utility above strict purity and kept the <center> tag as a valid option. I've always found it especially useful for centering images.

[swa66]

<center>, <font>, and a few more have been buried for good reason. Embrace CSS instead and you can do MUCH more without them than you could ever do with them.

Converting from xhtml to html5. I presume that means from xhtml 1.* ... and I presume that means to the non-xhtml5 variant.

If you felt comfortabel with xhtml 1.*, I think you should consider polyglot html5 instead of plain html5. It combines the advantages of xhtml structure into html5.
See more here: [webmasterworld.com...]
IMHO polyglot (x)html5 is the way forward for those of us still using xhtml 1.*, not html5 as we'd lose our precious structure, strict validation of our structure and thus the use of all our (current and/or future) xml tools.

[aristotle]

swa66 - I tried to read the thread you referenced, but most of it is above my knowledge level. All I really know is simple basic html. That's all I've ever needed to learn, for coding my static html article pages. But like I said, most of my old xhtml code validates as html5 anyway., so I only need to learn a few new techniques. I'll probably get everything worked out tomorrow.
Thanks again to everyone.

[aristotle]

Now that I'm becoming more familiar with html5, I starting to like it better. But would like to ask a couple of questions about the <address> tag.

1. The W3C validator gives an error if you put an <h> tag within the <address> section.

2. Text within <p> ... </p> tags is rendered in italics even though your style sheet doesn't specify it.

Does anyone know any simple way around either of these restrictions?

Thank you

[swa66]

<p> in italics by default ? That's not what it should do, nor does IMHO. Will come from a parent somewhere.

Unless that p is e.g. inside an <address>: those get italic fonts by default in most (if not all) browsers.

<address> is per the not supposed to have headers, sections, h1-h6, tc. as descendants. so it should not contain and <hX>.

http://www.w3.org/html/wg/drafts/html/master/sections.html#the-address-element

[aristotle]

Unless that p is e.g. inside an <address>: those get italic fonts by default in most (if not all) browsers.

That's what I meant. Apparently the <address> tag throws out the style sheet specification for <p> and substitutes its own styling (=italics)

[lucy24]

It sounds as if you are putting way too much content inside the <address> element. It should contain only your, ahem, address. Or equivalent contact information. There was a recent thread-- probably elsewhere in the html subforum-- about "address".

:: shuffling papers ::

Here, I think [webmasterworld.com]

Apparently the <address> tag throws out the style sheet specification for <p> and substitutes its own styling (=italics)

Not exactly. The default styling for <p> is "inherit" or "auto" for most attributes. Here it is simply inheriting the styling of its container. If the container is <address>, that will generally be {font-style: italic;} unless you override it in CSS.

[aristotle]

Thanks Lucy
Actually I just had a couple of short sentences. Besides, I have my email address on an image, and W3C doesn't complain about that.

But don't a lot of websites have a whole separate page for contact info? Or maybe the address tag is just for the address and nothing else. But I still don't see why it needs to be in italics.

Edit. P.S. Well now that I think about it, the italics must come from the browser program.

[aristotle]

Lucy -- I've had a chance to look at the thread you referenced and saw your explanation. Here is what you wrote:

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}

I understand it now. I was confused earlier because I had somehow gotten the impression that the <address> tag can be used to create a section, and that you can include just about any kind of content within that section that you want, even something like a set of street directions or even a map. But for doing that I guess you would probably have to use something like a <div> or <section> tag instead.

[lucy24]

I have my email address on an image, and W3C doesn't complain about that

An image, by itself, is an inline element. So as far as I know, you're allowed to put one absolutely anywhere.

[aristotle]

An image, by itself, is an inline element. So as far as I know, you're allowed to put one absolutely anywhere.

I didn't know that, but I guess it makes sense. Anyway, what I have for this section at this point is:

<address id="contact">
<br />

<p class="center"><strong>Contact Information</strong></p>

<p>The contact email address is shown below. Please use it to make comments and suggestions, or to report broken links.</p>

<br />
<div style="max-width: 360px; margin-left: auto; margin-right: auto; border-width: 0px; padding: 2px; text-indent: 0px">
<img src="mail.gif" style="width: 100%; margin: 0 auto" alt="email">
</div>
<br />

<hr style="height: 2px">
</address>

It validates as html5, but the text is rendered in italics. But I'll probably use Lucy's code from the other thread to change the font-style to normal. This is a non-commercial ad-free website so I don't provide a phone number or physical address, but adding them shouldn't be a problem. You might even include a map or a photo of corporate headquarters (if you have a corporate headquarters).

[lucy24]

What are all those <br /> for?

<address id="contact">
<br />
<p class="center"><strong>Contact Information</strong></p>

If you want extra room before the first paragraph in the <address> element, style it with a bigger top margin:

address p {margin-top: blahblah}
or
address p:first-child {margin-top: blahblah}
if there's nothing before the paragraph. And, as long as you're naming a class, why not include {font-weight: bold;} in the class definition?

<p>The contact email address is shown below. Please use it to make comments and suggestions, or to report broken links.</p>

Now, if I were teaching freshman composition and you were a student... ;)

<br />
<div style="max-width: 360px; margin-left: auto; margin-right: auto; border-width: 0px; padding: 2px; text-indent: 0px">
<img src="mail.gif" style="width: 100%; margin: 0 auto" alt="email">
</div>
<br />

Again with the breaks. Give your div a class name and put all those styles-- including the above-and-below blank space-- into the style. You can then similarly style

div.whatsit img

to have the margins and position you want.

But honestly this whole div-plus-image arrangement makes no sense. You've got a div with explicit width combined with an img whose only width declaration is "100%", so why not give the image its proper width and height attributes and let the div go automatic? Explicit height and width aren't required for validation, but pages always render more efficiently when you've got everything spelled out in pixels. Moreover, once you've got a "width: 100%" any reference to left/right margins becomes irrelevant unless you're setting something other than 0 or "auto".

<hr style="height: 2px">
</address> 

Isn't 2 pixels the default height of a horizontal rule? There's a dark side and a light side* so it has to be at least two px. Anyway, if you want a line along the bottom of your <address> element, put that in the CSS:

address {border-bottom: 2px solid black; padding-bottom: 1em;}

When an element has a visible border, the padding is the amount of room between content and border.

The <hr> element still has its uses. But often it can be replaced by a top and/or bottom border in css. This also gives you more control over its color.


* "Duct tape is like the Force" et cetera.

[swa66]

<address> is by definition of the standard only for contact information of the <article> or <body> it is part of. It's explicitly not a section.
If you want a footer in html5: use <footer>... , it can contain the address element as appropriate.

So I'd go:

<footer>
<address>
<p>The contact email address is shown below. Please use it to make comments and suggestions, or to report broken links.</p>
<img src="mail.gif" alt="email">
</address>
<p>Copyright © 2013 John Doe</p>
</footer>

And do all styling in css. (lucy24 gave you quite a bit useful stuff above).

I'd leave out the id on the address, you're not going to have that many <address> elements in a document.
(esp. since using it for marking up regular addresses is wrong, it's only to contact the "owner"/"creator"/... .

I also left out your static title: add it back using a before if you feel it's important, but honestly: it's not, the look should be sufficient for people to know that's contact info without the explicit label.

[aristotle]

Lucy and swa66
Thanks for taking the time to analyze my code. Unfortunately I'm not mearly as proficient at styling as either of you. My main goal is to get something that validates and also renders the way I want. But I would like to try to explain a few things.

1. I do have some stylig for <address> in the style sheet, specifically:
address {max-width: 880px; margin-left: auto; margin-right: auto; border-width: 0px; padding: 6px}

2. The code for the image is something I devised years ago as a way to get an image that will automatically shrink to fit smaller screens. The "max-width: 360px" prevents it from getting any wider than 360 px, but if the screen is narrower than that, the image shrinks to fit on it.

3. I use <br /> because I've used it a thousand times, so am familiar and comfortable with it. It would take extra time to do it differently and I doubt that I could reduce the file size. Also, I'm always making adjustments to the spacing, and on long pages it's easier to do this with <br />, at least for me.

4. I didn't know that 2px is the default for <hr>. But anyway sometimes I make it 4 px, so prefer to keep it in the code. Also, by using <hr>, I can see where the lines are located in the <body> code without having to look at the style sheet.

5. The purpose of id="contact" is to mark a target position for "jump to" links from other pages on the site. In xhtml I used "name" tags for this, but the validator says they're obsolete for html5.

6. This isn't part of a site-wide footer. It's a section of an "about" page that's linked to with "jump to" links from the footers of other pages.

In sum, I know that my code must look sloppy and inefficient to experts like you, but this is how I've learned to do it, and sometimes it can be hard to change one's way of doing things. Anyway, thanks again for all of the help.

[swa66]

Don't wory we all have/ had to learn.

I think that part of the unwritten message we are sending is that we're usually aiming at separating content (in HTML) and looks in (CSS). That's not mandatory but from experience: it works like nothing else to keep your stuff easy to comprehend and maintainable in the long term.

[aristotle]

I've decided that it's more logical to put the horizontal rules <hr> and most of the line breaks <br /> between the sections, like this:

<section id="A">
[some content]
</section>

<br />
<hr style="height: 2px">
<br />

<section id="B">
[some content]
</section>

I think this is a cleaner and more logical way to separate the sections, and it avoids putting <hr>s inside a section.

What still isn't clear to me is whether it's okay to use the <address> tag to define a section. It validates as html5, and it conveys more information than the <section> tag, but is it proper usage?

[swa66]

I really would use CSS to add the line between sections and not use <hr> tags nor the line breaks.

You can just remove all between the 2 sections and then use:

You can do it like this in css:

section+section {
 border-top: 2px solid black;
}

(the selector select the 2nd of 2 consecutive <sections> and then gives it a border at it's top.

Sprinkle in some margin-top and padding-top and you'll have much more central control than what you have now.

[aristotle]

Thanks for taking time to make a suggestion. Actually I've already finished converting most of the pages using the <hr> tag. Also, I don't understand the "section+section" part of your code and would have to do some study on it.

Also, here's what w3c schools says about the <hr> tag:

In HTML5, the <hr> tag defines a thematic break.

In HTML 4.01, the <hr> tag represents a horizontal rule.

However, the <hr> tag may still be displayed as a horizontal rule in visual browsers, but is now defined in semantic terms, rather than presentational terms.

I know you're trying to be helpful, but I want to get this finished today and so will stick with the <hr> tag for now, especially since it appears to be a better choice for defining a themetic break between sections. I'll have to study the advanced styling techniques later.

I would still like to get some opinions on the proper use of the <address> tag. Anyway, thanks again

[drhowarddrfine]

One of the best "opinions" comes from the html5 doctors. [html5doctor.com...]

[drhowarddrfine]

Double post

[aristotle]

drhowarddrfine --Well I just read the article you cited ( html5doctor.com ). The second sentence of the article, referring to the <address> element, says:

"But nearly fifteen years after its creation, it's still causing confusion among developers"

Certainly some of the commenters at the end of the article seemed confused. But I was able to make an interpretation, specifically that you are probably allowed to put almost any kind of contact information inside the <address> element, even links to other websites. In any case, I'm going to adopt the position that anything which validates must be within the rules.

[drhowarddrfine]

I should have checked to see the article was written four years ago but they typically re-address topics.

But I was able to make an interpretation, specifically that you are probably allowed to put almost any kind of contact information inside the <address> element

And, specifically, it's stated you can't.

I'm going to adopt the position that anything which validates must be within the rules.

The validator checks tags and not content so you can have invalid content but still validate.

I don't recall if that part of the spec has changed since that article was written but here's the web developer's edition: [developers.whatwg.org...]

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.

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.

[JD_Toims]

But I was able to make an interpretation, specifically that you are probably allowed to put almost any kind of contact information inside the <address> element, even links to other websites.

Yes, you're correct, as long as the contact information presented is pertaining to the corresponding article or the body as a whole and not simply an address of say a business listing of the page or a directory -- IOW: A site like YellowPages.com would use <p> and likely schema.org to markup for the businesses they list but would reserve the <address> use for information relating to contacting YellowPages.com.

---

What swa66 said above is absolutely fine according to the w3.org docs and even according to the examples presented on the whatwg.org site -- And, since there is also at least one link in each of the examples, if the contact information was related externally somehow, say to something like an externally hosted bio of the author or externally hosted extended contact details for the author/site-owner or something along those lines, I'm sure that link would be fine to include too.

@swa66

<footer>
<address>
<p>The contact email address is shown below. Please use it to make comments and suggestions, or to report broken links.</p>
<img src="mail.gif" alt="email">
</address>
<p>Copyright © 2013 John Doe</p>
</footer>

w3.org and whatwg.org examples -- Emphasis Added

For example, a page at the W3C Web site related to HTML might include the following contact information:

<ADDRESS>
<A href="../People/Raggett/">Dave Raggett</A>,
<A href="../People/Arnaud/">Arnaud Le Hors</A>,
contact persons for the <A href="Activity">W3C HTML Activity</A>
</ADDRESS>

---

In this example the footer contains contact information and a copyright notice.

<footer>
<address>
For more details, contact
<a href="mailto:[e-mail]">John Smith</a>.
</address>
<p><small>© copyright 2038 Example Corp.</small></p>
</footer>

---

Sources:
http://www.w3.org/html/wg/drafts/html/master/single-page.html#the-address-element
http://developers.whatwg.org/sections.html#the-address-element