Doctype Strict versus Transitional

Sitepoint Members,
I’m only two validation errors away from passing xhtml strict. Should I fix them? I have no errors with xhtml transitional. Is there an advantage to passing xhtml strict?

Thanks,

Chris

Transitional doctypes are there to help old sites ease through the transition to modern standards. They are totally inappropriate for new sites. Defiantly convert to a strict doctype and address the out-of-date code you are using. :slight_smile:

Thanks for the update Ralph !

One question though, how do you get verticle spacing w/o a <br />?

Error Line 4, Column 111: document type does not allow element “br” here; missing one of “p”, “h1”, “h2”, “h3”, “h4”, “h5”, “h6”, “div”, “pre”, “address”, “fieldset”, “ins”, “del” start-tag

……"> </span><br /><div id=“content”>

Thanks,

Chris

I hope I didn’t sound too blunt, BTW, but yes, it’s definitely better to go with strict. If you have any trouble with sorting out the validation issues, please feel free to post back. We’d be happy to help sort them out. :slight_smile:

Proper vertical spacing means CSS.


div {
 margin-top:1em;
}

That said, it seems you have <br /> outside a valid parent for it. The full markup is required for a definitive answer.

Noonnope,
I know of a complete list of attributes for each tag

But I never was able to find a complete list of tags listed by parent and chld. Do you know where such a list can be found? I couldn’t find one at W3C? If not, what are the valid parents for <br />?

Thanks,

Chris

<br /> is not an inline element, but the code below might help you pass the strict validation process:

……"> </span><p> </p><div id=“content”>

Just give it a shot & post your results here :slight_smile:

The br Element - Forced line break - XHTML 1.0 HTML 4.0

Most likely, you’ve placed <br/> as a direct child element for <body>. <br/> is considered to be inline (not directly, it’s in the Inline->inline->special->special.basic category), while <body> only accepts block level elements as direct child elements.

I’m not sure I understand. I have

<body><span class=“header” title=“…”> </span><br /><div id=“content”>

The above <br /> is the only one W3C doesn’t validate for strict validation. I have about 60 more <br /> in the same page and they all validate. So apparently <br /> must be between certain tags (parent tags I guess). What are those (parent) tags of <br />? There’s has to be a list somewhere.

Thanks,

Chris

Well there’s something funny there if the <br /> is the only thing there that the validator picks up … because the <span> is just as illegal, and for the same reasons.

<span> and <br> are inline elements, which means they must be within block-level elements (such as <p>, <div>, <li> etc), and can’t be direct children of <body>. I would say you need to put a <div> in there, either in place of the <span> or around it - you can then use padding or margins to create the gap instead of <br>.

In the link I gave in #8, there is a list:

<br /> Valid Context:

The <br /> tag is valid within the following tags:
a, abbr, acronym, address, applet, b, bdo, big, blockquote, body, button, caption, center, cite, code, dd, del, dfn, div, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, i, iframe, ins, kbd, label, legend, li, noframes, noscript, object, p, pres q, s, samp, small, span, strike, strong, sub, sup, td, th, tt, u, var

Stevie D,
That was the terminology I was missing (I think), <br />s have to go between block-level elements. I’ll have to get a list of block-level elements. What type of element is <br />? I’ll have to get a list of those. On the span error, I did get that span validation error at one time, but it disappeared for no known reason. The reason why I uses span there was because my site had a short stop and go when I used div, span was much smoother and faster.

If I go through the trouble of getting the site to pass strict validation, what is the actual advantage? Faster download? More browsers can understand the code?

Noonnope,

I overlooked the link of yours in #8, sorry.

Chris

You’ve overlooked the whole #8. :lol:

What type of element is <br/>? :wink:

It really is confusing.
WDG writes, “Most HTML 4 elements permitted within the BODY are classified as either block-level elements or inline elements. Inline elements typically may only contain text and other inline elements. When rendered visually, inline elements do not usually begin on a new line.”

The following are defined as inline elements in HTML 4:

* A - Anchor
* ABBR - Abbreviation
* ACRONYM - Acronym
* B - Bold text
* BASEFONT - Base font change
* BDO - BiDi override
* BIG - Large text
* BR - Line break

HTML 4.0 Inline Elements

Having never defined “most” or provide at least clarification for <body>, you can’t be sure whether you can use <br /> inside <body></body> and outside everything else - and this is the best description of the structure of html I’ve seen. The list exists if only in people’s heads and not in print. So you have this constant state of confusion for many “web masters”. Taking a class doesn’t guaranteee you’ll get the list, you would likely have to ask one morsel of code at a time to construct the list yourself. Of course if such a list existed, it would put teachers and professors out of a job.

Chris

I just fifured out one problem is that the validators weren’t validating under xhtml 1.0 nor 1.1 when told to detect the DTD automatically. So my site wasn’t really validating all along, forcing me to find a solution. So I used <h1> and it validated

body><h1><span class=“header” title=“…”> </span></h1>…

The h1 doesn’t really enlargen anything, but it serves as a no function fill in to get the page to validate. I guess the   is being h1ed.

So now I guess I can find the DTD for XHTML 1.0 Strict.

Referencing this page

should I use

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>

or

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

Thanks,

Chris

Hey Chris,

Glad to see you finally got it validated in the end, but bare in mind that just because it validates the code it doesn’t mean that all of your markup is semantic, which is something you should take into consideration before you go live with the Web page / site you’re developing. As far as I can see you’re placing a H1 element on the page without it containing anything meaningful, which isn’t semantic and you shouldn’t really be doing that either, I would recommend placing the Web page title or heading inside the H1 element and instead use CSS to put the vertical break in the page.

In fact, if you’d like to post the (X)HTML markup in this thread I’d be more than happy to help improve it for you, so it not only validates, but is semantic too.

Use the second one - XHTML 1.0 Strict, but you will also need to amend your <html> element to include the xmlns attribute, like so:

<html xmlns="http://www.w3.org/1999/xhtml">

Otherwise it will output a validation error without it.

All the best,

Andrew Cooper

Andrew,
That would be great, but earlier I was wondering about wether <divs> were slower than <span>s. My experience was that <div>s are slow.

If I wanted to use divs I could change

<body><h1><span class=“header” title=“…”> </span></h1>…

to

<body><div class=“header” title=“…”> </div>…

and change the CSS

span.header{display:block;margin-left:auto;margin-right:auto;background-image:url(/aanutrition.jpg);width:808px; height:123px}

to

div.header{display:block;margin-left:auto;margin-right:auto;background-image:url(/aanutrition.jpg);width:808px; height:123px}

or maybe

.header{display:block;margin-left:auto;margin-right:auto;background-image:url(/aanutrition.jpg);width:808px; height:123px}

Is that what you were thinking?

But my experience is that divs are slow and no one says whether using a strict DTD has any advantage over a transitional DTD.

If there’s no advantage of strict over transitional, why would I bother if an extra div is going to slow the loading of my site ?

Thanks Andrew,

Chris

Left in the H1 and used doctype
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
and
<html xmlns=“http://www.w3.org/1999/xhtml” xml:lang=“en”>

I added xml:lang=“en” but not lang=“en”.

It validated for xhtml strict 1.0.

I know the download times for different test sites for my site. So after the change is fully digested by my webhost, it takes about 3 day, I’ll see if my site loads faster, as w3schools says it will.

Chris

Changed <h1><h1> to <p></p>, and it still passes strict validation. Don’t know why it works because <p> is defined in my CSS as indented:

p{line-height:1.25em;text-indent:36px;text-align:justify;margin:0 0 1.4em}

here’s the xhtml code

<p><span class=“header” title=“Good Things Happen When You’re Nutritionally Well”> </span></p><div id=“content”>

here’s the header css
span.header{display:block;margin-left:auto;margin-right:auto;background-image:url(/aa.jpg);width:808px; height:123px}

No idea why the header image wasn’t indented.

Thanks,

Chris

Chris,

Your approach is rather technical. It has a few flaws. The lack of semantics is one of them.

As we said in this thread, there are rules regarding content. First off, an html doc has inline level and block level elements.

Inline level elements: <a>, <span>, <br/>.

Block level elements: <h1>, <p>, <div>.

The first rule: you can’t have block level elements inside inline level elements.

You can have inline elements inside inline elements, inline elements inside block elements, block elements inside block elements.

But… there are rules. You can’t have inside <body>, which is a block level, as direct descendants, but block level elements. Now, this rule is not grounds for you to choose any block level element of your liking to wrap a <br/>.

Certainly not using a <h1> just for <br/>. Each element has meaning first. You should use the element according to its meaning, not because, technically, it’s a block level and makes you page validate. Validations is good, semantic is better.

Your assertion about <div> being slow is wrong. You can use <div>, according to spec rules, and this will not make your page slow, unless your code is invalid or a green monster from out of space. :slight_smile: