Difference between XHTML strict and transitional

just wondered whats the use of strict and transitional…, any benefits if i will recode my xhtml transitional site into a strict version? pls give me an advice.

Transitional does exactly what it says on the tin.

Lets say that your current page is HTML Tag soup, it resembles a geocities site from 1999, font tags, center tags, marquees etc.

You decide that you want to sort out your HTML and get it looking something like. So your site is in a transition from tag soup to HTML 4.01 Strict, transitional is a mid point.

Atleast that’s how I see it.

The benefit to you of using a Strict DOCTYPE is that it encourages you to avoid presentational markup by forcing you to separate your presentation (CSS) and structure (HTML). Which is of course the right way to do things. :slight_smile:

A “nutshell” desciption: If the mark-up isn’t seperated from the style it’s transitional. Strict doesn’t let you use b, u, font, center, etc. tags. Benefits? you can maintain the site’s style without having to hunt through the mark-up for style elements. BTW, unless your server is sending the correct headers, the page is served as HTML not XHTML, but that’s a whole other topic.

As blain said, a Transitional doctype is meant to be used in a transitional (gasp!) period while you’re bringing an old-school tag soup document kicking and screaming into the 21st century. Just to be able to validate until you can get rid of all the presentational markup.

A Strict doctype is what you should use for all new documents. It ‘enforces’ the separation between structure (X/HTML), presentation (CSS) and behaviour (JavaScript).

Boldfacing (<b>...</b>) is allowed in Strict doctypes, as well as italicising (<i>...</i>). Most other presentational markup has been thrown out, though.

You’ll get a smug sense of satisfaction and you can sneer at those lowly designers using only transitional.

In the real world, you won’t see any benefits other than (possibly) cleaner code for you to look at. This can be a big benefit in and of itself when it comes time for site maintenance, but it’s up to you to decide whether it’s worth it on your site.

I’d also like to add that you can code with Strict’s rules under a Transitional doctype just fine; it’s just up to you to enforce the strictness instead of a validator.

You can also author with Strict’s rules without a doctype, but in both cases you won’t get the Full Standards Mode in modern browsers (assuming text/html). (Transitional doctypes trigger Almost Standards Mode at best.)

You can still validate against any DTD by using the DTD override feature in the W3C Validator, or even validate against XML Schema or [url=http://hsivonen.iki.fi/validator/]RELAX NG.

wow cooll thanks guys, but i heard that theres some problems in browser that producing some change in layout when inserting the strict document tag, i also experience that… firefox is producing space between my image when i use the strict tag

You can’t just change the doctype declaration from Transitional to Strict. You also need to learn how to use (X)HTML and CSS properly.

(X)HTML is a markup language, not a page design language. That’s what CSS is for.

The gap probably because you are using the DOCTYPE and are you misusing tables for layout.

Images are (replaced) inline elements, which means that the generated box will align vertically within the surrounding line box. The default vertical alignment is baseline, which means that the bottom edge of the image aligns with the basline of the text … even if there is no text adjacent to the image.

Older browsers incorrectly aligned images to the bottom of a table cell if there was no other content in the cell. That does not happen in ‘standards’ mode, which is triggered by a Strict doctype.

You thus need to set the vertical alignment yourself, or change the type of the generated box from inline to block. Either of these should work:

td img {vertical-align:bottom}
td img {display:block}

However, that is just fixing the symptoms, rather than curing the illness. The problem is that you are abusing the markup language for presentational reasons. Images are rarely tabular data, hence they should not be used with table markup.

if i had a professional site i would use only strict. but since my site is a help site for newbies and i have to link to a lot of stuff i want to open in a new browser window. so i use transitional.

I can see where you are coming from but using transitional so you can use target=blank is not really the answer.

opening a new browser window is a behaviour, therefore it should be accomplished using javascript not HTML.


HTML for structure
CSS for presentation
Javascipt for Behaviour