doctype question. Its a rookie question

[drewdin]

Hi All,

I am new to web design and I'm trying to start off on the right foot. I dont see a clear cut winner when it comes to doctypes. Any recommendations on what I should be using?

I am planning on using xhtml 1.0 or 1.1, any suggestions would be greatly appreciated. Thanks

[tedster]

Welcome to the forums, drewdin. Here are some good threads to check out:

Why most of us should NOT use XHTML [webmasterworld.com]
Choosing the best doctype for your site [webmasterworld.com]

[drewdin]

thanks, i appreciate it. I also just found another article that also told me not to use xhtml and use html 4.01 strict due to it being a very close match to html 5 and an easy converson. I'm going to give these articles a read! Thanks again

[JAB Creations]

Actually XHTML is the very best thing you can use...if you use it correctly.

XHTML when served as application/xhtml+xml forces you to write strict code, any XML parsing errors and the whole page breaks (except in WebKit browsers (Safari and Chrome) as they will display a broken rendering of the page and Internet Explorer 8 and older will ask you to save the file since IE8 and older do not support XHTML correctly).

Complicated? Sure! Worth the "aggravation"? I've seen more then my share of people blowing hours if not days tracking down something as simple as a missing quote. If web designers and web developers used XHTML a missing quote in a saved web application, ALT+TAB, reload, broken page with an error message...you then know that there is an issue, have the line number, and the description of the error; that issue will be resolved in seconds, not hours.

Additionally HTML4/5 are not extensible. HTML5 is not something I find desirable in many ways however by sticking with XHTML 1.1 I can extend it to support (X)HTML5 features while maintaining clean and consistent code.

When doing web design and web development having error messages thrown at you left and right might sound undesirable however no one ever pulled ahead of others in life by doing what everyone else has done. You can opt to fixing errors as quickly as you find them and ensuring your work is solid and difficult for others to challenge or you can give yourself an advantage by working that much harder because in my personal experience by going that extra mile I've made my world unbelievably easier, saved countless hours of time, and spent much more of my time producing instead of troubleshooting.

In the long term if you're not doing serverside coding (e.g. PHP, ASP, CF) and can not do content negotiation then you're not going to be able to pull off XHTML correctly...however learning a language like PHP is well worth your time.

With the serverside fallback support for non-XHTML browsers the example code below will work in all browsers. If you don't know how to run a web server all you need to do is download a copy of XAMPP (it's free to download/use), adjust the htdocs setting (XAMPP\apache\conf\httpd.conf) to where you would prefer to save your web applications, and you'll be rocking in no time.

Are there cons beyond that with XHTML? Well someone might say you can't use document.write in JavaScript but you'll seriously want to avoid using that, innerHTML, or putting script elements in to the body and stick to standards. Also use an editor such as SuperEdi so when you save files (in the save as dialog window) you can remove the BOM (Byte Order Mark, proprietary Microsoft...stuff).

Not that Tedster is leading you wrong though I do think people should have the pros and cons laid out before them on equal terms. Honestly if I had come across something like this a year or two in to learning it would have easily shaved off several years of figuring this all out on my own. XHTML won't allow second-rate code though so far not only has XHTML allowed me to do everything HTML would, I'm doing things I just couldn't dream of with XHTML that HTML just isn't capable of doing. All that's left is for you to give it an honest attempt. ;)

- John

example.php
For using with XAMPP web server on your computer...

<?php
if (isset($_SERVER['HTTP_ACCEPT']))
{
$mime_ua = stristr($_SERVER['HTTP_ACCEPT'],'application/xhtml+xml');

if ($mime_ua) {$mime = 'application/xhtml+xml';}
else {$mime = 'text/html';}
}
else
{
$mime = 'text/html';
}

header('content-type: '.$mime.'; charset=utf-8');

echo '<?xml version="1.0" encoding="UTF-8"?>'."\n";
if ($mime=='application/xhtml+xml') {echo '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">'."\n";}
else if ($mime=='text/html') {echo '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">'."\n";}
?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Example XHTML Template</title>
<meta name="description" content="Example XHTML template." />
<meta name="keywords" content="word1, word2, word3" />
<meta name="language" content="EN" />
<meta name="robots" content="INDEX, FOLLOW" />
<base href="http://localhost/example1/" />
<link href="themes/style.css" media="screen" rel="stylesheet" title="classic" type="text/css" />
<script src="scripts/index.js" type="text/javascript"></script>
<script src="scripts/onload.js" type="text/javascript"></script>
</head>

<body>

<h1>Example XHTML Template</h1>
<div>
<p>This is an example XHTML template.
&#160; Best to test this out initially in Firefox or Opera, thirdly in Safari, and lastly in Internet Explorer.</p>
</div>

</body>
</html>

example.xhtml
Will work with all browsers (Firefox, Opera, Safari) except for IE8 and older (will work in IE9)...

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Example XHTML Template</title>
<meta name="description" content="Example XHTML template." />
<meta name="keywords" content="word1, word2, word3" />
<meta name="language" content="EN" />
<meta name="robots" content="INDEX, FOLLOW" />
<base href="http://localhost/example1/" />
<link href="themes/style.css" media="screen" rel="stylesheet" title="classic" type="text/css" />
<script src="scripts/index.js" type="text/javascript"></script>
<script src="scripts/onload.js" type="text/javascript"></script>
</head>

<body>

<h1>Example XHTML Template</h1>
<div>
<p>This is an example XHTML template.
&#160; Best to test this out initially in Firefox or Opera, thirdly in Safari, and lastly in Internet Explorer.</p>
</div>

</body>
</html>

"No one ever achieved greatness by playing it safe." - Harry Gray

[drewdin]

wow, great post! i guess i started things backwards as i read a book on PHP before learning html. The book I am using to learn html uses xhtml 1.0 strict.

As I have been looking around, i see xhtml 1.1 and html5 coming out soon. As a starting point i would love to start on the right foot and use the most future ready doctype. I dont think there is a clear cut winner and I have been finding great information to use either html 4.01 strict, xhtml 1.0 strict or xhtml 1.1.

If you were going to start with one today, which one would it be? Maybe i'm making to much of this and i should just keep using xhtml 1.0 like I have been? Thanks guys

[mattur]

XHTML2 has been *abandoned* by the W3C in favour of HTML5. It's as dead as a dodo.

Do not use XHTML unless you know what you're doing, and have a specific requirement to do so. XHTML never took off, except as malformed HTML.

Using XHTML is harder, more complex, requires special software to do properly and delivers *zero benefits* for 99.999% of web authors. That's why it never took off.

Current versions of IE do not work - at all - with proper XHTML. So you have to send your XHTML pages as HTML, and these browsers just treat your lovingly-crafted XHTML *as* HTML with a load of errors stuck in it. It's completely pointless.

Use a HTML4.01 doctype. It's as future ready as you're going to get. Should you ever need to switch to XHTML at a later date, which you won't, the changes can easily be automated.

[JAB Creations]

Web 3.0 will not work with HTML 4 or 5. Stay tuned. ;)

- John

[mattur]

pffft. Meaningless buzzword-bingo was the main reason behind the misguided adoption of pseudo-XHTML ;)

Even the W3C admits [w3.org]:

"since XHTML added no new features (XHTML 1.0) or one new feature (Ruby, in XHTML 1.1) the incentive for users to move to the XML based format is small. They get no reward for doing so, beyond the rather theoretical satisfaction of creating well-formed content.

There is a serialisation of HTML5 as XML (XHTML5) but it's not recommended for general usage. It's possible a future web will use XML, but it isn't very probable.

[JAB Creations]

The nice thing about being the man who says you can and having a personal home page is that when all is said and done I'm able to show what I did.

- John

[Fotiman]

If you were going to start with one today

I would use the HTML5 doctype:
<!DOCTYPE html>

Because it is backwards compatible with HTML 4.01, is much more compact, and when I decide I want to add any of the newer HTML 5 elements, I won't have to change DOCTYPE.

Also, for a long time (August 2002 - January 2009), XHTML 1.1 was not permitted to be sent as text/html, meaning that it HAD to be sent with an XHTML mime type (application/xhtml+xml). This meant that XHTML 1.1 sites could not be viewed in IE (as IE still does not support that mime type). This was changed in January 2009 in XHTML Media Types - Second Edition, and XHTML 1.1 was allowed to be served as text/html. But during those 6 and a half years, XHTML 1.1 was not even an option for most people who were developing websites.

As has been pointed out above, if you're serving XHTML as text/html, you should use one of the HTML doctypes instead. I admit, I developed using XHTML 1.0 for a long time, and eventually switched back to HTML 4.01 because I realized that I was gaining nothing by using the XHTML doctype, since my pages (served as text/html) were still being treated as HTML by the browsers. I will say that I'm glad I moved to XHTML for a while because it did improve my coding habits, and I took those benefits with me when I switched back to HTML 4.01. For example, I never leave out the optional closing tag on elements, I surround all attributes with quotes, and I use all lowercase tags and attributes. The markup I produce is cleaner, and therefore easier to maintain. But it's still HTML that I'm serving.

[rocknbil]

HTML4/5 are not extensible.

Which has alwas been my point . . . who is using XHTML to extend the HTML set? Rare, if ever. If your output is HTML, describe it as HTML.

no one ever pulled ahead of others in life by doing what everyone else has done.

Funny you say this, **most** people who declare XHTML doctypes are doing it exactly for this reason, because someone told them it's the latest and greatest, that HTML is "soooo 1995," and by using it will show everyone how tech you are, yet when you show them it doesn't validate the way they've done it they have all sorts of excuses why that is.

XHTML won't allow second-rate code

**IF** you take the time to validate it. I see second rate XHTML all the time, it's a large part of what I do, fixing busted invalid coded web sites containing everything from <font> tags to <center>, and all hung with the glorious "XHTML strict."

HTML is not second rate. Many, almost MOST, times it's appropriate. It's not a Mac vs. Windoze, Ford vs. Chevy argument, there are appropriate environments for both.

[Fotiman]

there are appropriate environments for both.

I agree with that statement. And I would suggest that 99% of the time, an HTML doctype is the appropriate choice.

[drewdin]

Thanks guys, i think that i might drop the xhtml, use the structure i learned from it and preoduce pages using 4.01 strict or html5.

because I am a rookie and i scanned the w3 website for a simple html5 structure. Is this all i need to get started using html5 and css? I dont need to specify charset, content, etc... if i am missing anything please let me know, Thanks again everyone!


<!DOCTYPE html>
<html>
<head>
<title>Sample page</title>
<link type="text/css" rel="stylesheet" href="stylesheet.css" />
</head>
<body>
<h1>Sample page</h1>
<p>This is a sample.</p>
</body>
</html>

[drewdin]

sorry to waste some time but I answered one of my own questions, i used the w3 validator and noticed i was missing the meta element that specified the charset, etc...

[Fotiman]

Here's a great HTML5 tutorial:
[diveintohtml5.org...]

[phranque]

another good html5 starter resource:
HTML5 Boilerplate - A rock-solid default for HTML5 awesome:
http://html5boilerplate.com/ [html5boilerplate.com]