Jump to content
Larry Ullman's Book Forums
Sign in to follow this  
Max

<Doctype Html>

Recommended Posts

Larry says in his book that not using 'head' creeps him out. I have to say that <!doctype html> is doing the same to me.

Firstly, it is highlighted red in my text editor (SciTE).

Secondly, what does an old (e.g. 2010) browser do with it?....treat it as strict? Transitional? Can it handle frames? Will it go into quirks mode?

Thirdly, when using this with utf-8 a number character (as in Nº) became a smiley face on my website. I've now changed it to 'N°'

 

I think I understand what the old coding did (e.g.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">)

...that it was telling the browser how to interpret the html from the server in a certain way and I was sort of comfortable with that, but the new one seems too SHORT!

Share this post


Link to post
Share on other sites

Hey Max. If you read that chapter of the book where I talk about the doctype, you'll see that I explain that older browsers treat this as standards mode. I *believe* you can do frames. There is no strict/transitional distinction with the HTML5 doctype.

 

But if you're not comfortable with it, don't use it! No problem at all.

Share this post


Link to post
Share on other sites

The HTML5 doctype is the recommended doctype for all pages these days though, so I recommend always using it Max, even if you don't fully understand it.

Share this post


Link to post
Share on other sites

Thanks for that. In future I will use <!doctype html> and be more disciplined when it comes to using symbols.

Share this post


Link to post
Share on other sites

One thing that still bothers me is the older browsers - if they worked perfectly with <!DOCTYPE HTML> then how many millions of man hours have been wasted around the world typing <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">) every time a website was created? This doesn't appear in Maria Castros (otherwise authoritative) HTML book.

 

Sorry if I'm sounding fussy, but why didn't someone five years ago say 'hey - you don't need to type all that stuff - just <!DOCTYPE HTML> will do.'?

Share this post


Link to post
Share on other sites

That's a good question.

As far as I know, the HTML5 doctype was engineered the way it was in order to be backwards compatible with older browsers (i.e., to force them into standards mode).

 

I really don't know why no one ever thought of that before, but I think in the past, different people actually had an incentive to use different doctypes, depending on the layout and structure of their site.

Now that most people use modern browsers that understand HTML5 though, the HTML5 doctype is of course preferred, and as an added bonus, it puts older browser in standards mode, which is enough.

 

All in all, I suppose the Web is still pretty young, and even the "experts" are still learning things all the time, so I suppose it's not too surprising. I'm just glad we have the "one doctype to rule them all" now.

Share this post


Link to post
Share on other sites

I thought that for a bit of enlightenment, I would do a bit of experimentation. I wrote a simple bit of html, split it into three (html 5, transitional and strict) and passed them individually throught the W3 validator. This is the html (this happens to be transitional):

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta charset="utf-8">

<title>Testing html</title>

<!--[if lt IE 9]>

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->

</head>

<body>

<!--This is some code deliberately written to test the different doctypes-->

<!--Testing straigtforward code-->

<p>This tests paragraph</p>

Break with closing slash

<br /><br />

Break without closing slash

<br><br>

Marquee<br /><br />

<marquee height="40px" behavior="scroll" loop="infinite" />

For all your garden machinery sales, service and repairs. <img src = "Bullet.png" /> Free expert advice. <img src = "Bullet.png" /> Modern and vintage machinery specialists. <img src = "Bullet.png" /> Free estimates. <img src = "Bullet.png" /> Free local collection and delivery. <img src = "Bullet.png" /> New and reconditioned mowers with full warranty delivered FREE within Reading and the surrounding areas. <img src = "Bullet.png" /> Allen Asuka Atco Castel Countax Echo Flymo Gardencare Hayter Honda Husqvarna Mountfield Qualcast Sarp Stihl Suffolk Warrior Webb Wolf <img src = "Bullet.png" />

</marquee>

<br /><br />

iframe:<br /><br />

<iframe frameborder="2" width="425" height="350" scrolling="yes" marginheight="0" marginwidth="0" src="http://www.larryullman.com">No support for iframes.</iframe><br />

<br /><br />

Tables:<br /><br />

<table align = "left" bgcolor = "yellow" cellpadding = "3" cellspacing = "2" rules = "cols">

<tr bgcolor = "blue" valign = "top" align = "right"><td bgcolor = "green" width = "100px" height = "20px">Should be background green and 100px wide</td><td width="200px">Should be background yellow and 200px wide</td></tr>

</table>

<br /><br />

<p>Now introduce some errors:....<br /><br />

<p>

<b>This text emboldened...<i>--and this bold</b> and now italic only<div>Division opened and para closed</p><br /> <br />

</div>

para not closed

</html>

 

These are the results:....

 

HTML 5:

 

32 errors, 1 warning

 

HTML Transitional:

 

25 errors, 2 warnings

 

HTML Strict:

 

65 errors, 2 warnings

 

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

Line 5: <meta charset="utf-8">

 

HTML 5: No error.

 

Transitional: Line 5, Column 19: there is no attribute "charset"

The attribute given above is required for an element that you've used, but you have omitted it. For instance, in most HTML and XHTML document types the "type" attribute is required on the "script" element and the "alt" attribute is required for the "img" element.

 

Typical values for type are type="text/css" for <style> and type="text/javascript" for <script>.

Line 5, Column 27: end tag for "meta" omitted, but OMITTAG NO was specified

 

Strict: No Character Encoding Found! Falling back to UTF-8.

Line 4, Column 26: required attribute "content" not specified

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

Line 14:

 

HTML 5: None

 

Transitional: None

 

Strict: Line 14, Column 1: character data is not allowed here

 

Break with closing slash

 

You have used character data somewhere it is not permitted to appear. Mistakes that can cause this error include:

 

putting text directly in the body of the document without wrapping it in a container element (such as a <p>aragraph</p>), or

forgetting to quote an attribute value (where characters such as "%" and "/" are common, but cannot appear without surrounding quotes), or

using XHTML-style self-closing tags (such as <meta ... />) in HTML 4.01 or earlier. To fix, remove the extra slash ('/') character. For more information about the reasons for this, see Empty elements in SGML, HTML, XML, and XHTML.

 

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

 

Line 15:

 

HTML 5: None

 

Transitional: None

 

Strict: 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

 

<br /><br />

 

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

 

Line 18:

 

HTML 5: None

 

Transitional: end tag for "br" omitted, but OMITTAG NO was specified

 

<br><br>

 

start tag was here

 

<br><br>

 

Strict: Line 18, Column 13: 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

 

Marquee<br /><br />

 

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

 

Marquee: All versions had a good old moan about 'Marquee' which is fair enough, but it does seem to work OK in the browsers that I tried.

 

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

 

Line 24:

 

HTML 5: The frameborder attribute on the iframe element is obsolete. Use CSS instead. The marginwidth attribute on the iframe element is obsolete. Use CSS instead.

 

…dth="0" src="http://www.larryullman.com">No support for iframes.</iframe><br />

 

Transitional: value of attribute "frameborder" cannot be "2"; must be one of "1", "0"

 

Strict: Line 24 - Too much to mention. A real old groan!

 

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

 

Line 25:

 

HTML 5: None

 

Transitional: None

 

Strict: 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

 

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

 

Line 26:

 

HTML 5: None

 

Transitional: None

 

Strict: character data is not allowed here - Tables:<br /><br />

 

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

 

Line 27;

 

HTML 5: The bgcolor attribute on the table element is obsolete. Use CSS instead.

 

Transitional: None

 

Strict: there is no attribute "align" - there is no attribute "bgcolor" etc...etc.

 

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

 

Line 28:

 

HTML 5: The bgcolor attribute (and others!) on the tr element is obsolete. Use CSS instead.

 

Transitional: None

 

Strict: there is no attribute "height"

 

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

Line 33:

 

HTML 5: End tag b violates nesting rules.

 

Transitional: end tag for "i" omitted, but OMITTAG NO was specified

 

Strict: end tag for "i" omitted, but OMITTAG NO was specified - document type does not allow element "div" here; missing one of "object", "ins", "del", "map", "button" start-tag

 

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

 

Line 34:

 

HTML 5: End tag div seen, but there were open elements.

 

Transitional: end tag for element "div" which is not open

 

Strict: end tag for element "div" which is not open

 

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

 

Line 36:

 

HTML 5: End tag for html seen, but there were unclosed elements.

 

Transitional: end tag for element "div" which is not open

 

Strict: end tag for element "div" which is not open

 

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

 

Line 37:

 

HTML 5: None

 

Transitional: end tag for "p" omitted, but OMITTAG NO was specified

 

Strict: end tag for "body" omitted, but OMITTAG NO was specified

 

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

 

 

I haven't a clue what it all means - any comments would be gratefully accepted.

Share this post


Link to post
Share on other sites

Interesting experiment. Thanks for doing that and sharing the results.

Please forgive me for not reading your entire post though. I looked at only some of the results.

 

I do recall the W3C validator always flashing a warning when the HTML5 doctype is used, stating that the validator is still in the experimental stage for the HTML5 doctype.

Share this post


Link to post
Share on other sites

I think the first thing we need to acknowledge is that the HTML5 doctype actually means nothing.

It's there purely as the minimum to force all browsers into standards mode. That's it.

Beyond that, whether HTML5 is actually supported or not is up to the individual browsers.

 

So, yeah, using the HTML5 doctype (if you want to call it that), is completely fine and the preferred doctype these days.

Share this post


Link to post
Share on other sites

It is safe to use HTML5. I expect many major sites have not switched yet in part because they haven't updated their site in a while. Or, in a corporate environment, people shy away from new things.

 

Max, largely what your results mean is that different standards have different approaches. It used to be common, for example, to put stylistic properties such as the frame border in the HTML. But since then, CSS has been developed and widely supported, so it's now the preferred route. You can't just change the doctype and then validate it; you would change all the HTML (and CSS) to match the doctype in use.

 

Think of it like different grammar rules for different dialects of a language. Spanish in Spain will have some different rules than Spanish in Mexico. Neither set of rules is "correct", but rather correct for that dialect.

  • Upvote 2

Share this post


Link to post
Share on other sites

Both Google Plus, Facebook and Youtube use it. You should start using HTML5 too.

 

Okay Antonio, i will be starting my practice site soon, so yeah I am gonna use it, here we come header's, footer's, section's, aside's etc. It all does make more sense so i will do it, it also makes it easier to pick parts out without specifying id's with CSS for particular sections in generic div's.

Share this post


Link to post
Share on other sites

HartleySan - "It's there purely as the minimum to force all browsers into standards mode." I agree with you there HartleySan. Also - does this mean that W3 will eventually drop strict mode? How many sites are written in strict?

Also, if HTML 5 is eventually used by 99% of sites, will it allow all 'transitional' deprecated elements?...and if so, isn't that heading away from the aim of W3 to cleaner html (i.e. strict mode). Having said all of this, the deprecated and error laden code above seems to work in every browser I have tried. Even the marquee which was summarily condemned by all three validators works well.

Larry - I understand what you are saying and will not hesitate to use html 5 in future. I guess the problem with other (x)html types is reverse engineering. Like the development of the PC, new motherboards had to be designed with an eye to running older software (DOS) which slowed the development of the 286 and 386 somewhat.

 

I can only imagine the discussions between programming teams at IE or Firefox trying to accomodate all of the different html types in their code. I bet they'd love for someone to say 'Right - the whole world is using html 5 from now on - no exceptions!"

Share this post


Link to post
Share on other sites

The browser makers are the ones who decide what HTML5 features are supported and how. The W3C just serves as an advisory body.

Also, like I said, the doctype doesn't actually mean anything. Well, it might mean something, depending on the browser, but all browser are so loose in their interpretation of HTML, it almost doesn't matter.

 

With that said, the best bet these days is to use the HTML5 doctype and then always use the W3C validator for all your HTML.

If your HTML is 100% valid, then you will never have to worry about weird, cross-browser issues. Of course, the other option is XHTML, but that doesn't technically support the new HTML5 tags.

Share this post


Link to post
Share on other sites

Hi HartleySan - Yes - and as Larry points out in his book, always use valid "action" tags in case a user has an old browser that doesn't support html5 and/or JS, not action = "#".

 

Perhaps one day we will all be using html5 and all the rest will be a distant nightmare - but it still seems to me that they are drifting away from clean (i.e. strict) coding - have they just given up?

Last question - can anyone explain to me who and why thought up a line of text like <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml"> or was he just showing off??????

Share this post


Link to post
Share on other sites

You are missing the point, Max. Instead of enforcing strict standards, they instead offer more possibilities with HTML5. HTML5 is built to support a lot of the old elements, adding a lot of new ones, and make it easier to get browser independent code. W3C writes a guideline for how each of these elements should work, and it's then up the browsers to implement them as close to the standard as possibly.

 

The reason for these long doctypes is because HTML is based on XML. The doctype is simply pointing to the "rules" for the parser. What this line says is only important for a machine. If you have ever seen a XML scheme, that is pretty much what that line is telling the browser to look at. This is a dictionary for how to interpret the different HTML standard.

  • Upvote 1

Share this post


Link to post
Share on other sites

You are missing the point, Max. Instead of enforcing strict standards, they instead offer more possibilities with HTML5. HTML5 is built to support a lot of the old elements, adding a lot of new ones, and make it easier to get browser independent code. W3C writes a guideline for how each of these elements should work, and it's then up the browsers to implement them as close to the standard as possibly.

 

The reason for these long doctypes is because HTML is based on XML. The doctype is simply pointing to the "rules" for the parser. What this line says is only important for a machine. If you have ever seen a XML scheme, that is pretty much what that line is telling the browser to look at. This is a dictionary for how to interpret the different HTML standard.

 

I checked out Youtube and stuff for HTML5, ive got the Visual Quickpro QUIDE for HTML5 and CSS by Bruce Hyslop and honestly YouTube barely even use any of those new Tags. If they think they are using HTML5, man they have got a lot of work to do. Do you think the browser can get round the page better, or don't you think it would be more benefit for search engines using HTML5 to pick out the appropriate content. What help would HTML5 have, would we have a header, footer, sidebar key on our keyboards? :mellow:

Share this post


Link to post
Share on other sites

YouTube is doing what all the other major sites are doing: Avoiding the use of HTML5-specific tags to make their support range as wide as possible. I imagine someday (possibly in a couple of years), when IE6 and IE7 are no longer officially supported, YouTube and other websites will start to migrate over to using HTML5 tags in an effort to make things better.

Share this post


Link to post
Share on other sites

YouTube is doing what all the other major sites are doing: Avoiding the use of HTML5-specific tags to make their support range as wide as possible. I imagine someday (possibly in a couple of years), when IE6 and IE7 are no longer officially supported, YouTube and other websites will start to migrate over to using HTML5 tags in an effort to make things better.

 

So do you think its best keeping things simple in a site right now and just using generic div's or go with the html5 tags?

Share this post


Link to post
Share on other sites

My approach is to use the HTML5 tags with the HTML5 shiv because it gives you the best of all worlds and will get you into the HTML5 habit which I think will be adopted quite quickly as more and more websites are accessed via mobile devices.

Share this post


Link to post
Share on other sites

Edward, I guess it depends on your intended audience. If you don't care about IE6/7 users, then go with the HTML5 tags. They're obviously better for a variety of reasons.

Also, as margaux suggested, you can use the HTML5 tags with the HTML5 shiv for the "best of both worlds".

I personally don't like that approach though, as it both complicates things and adds additional JS, which I prefer not to do whenever possible.

Of course, it's not wrong to use the HTML5 shiv, but I'd rather just use divs with IDs like header, footer, nav, etc., for now and not have to worry about compatibility issues.

Share this post


Link to post
Share on other sites

Just to stir this up a little more - let's say that I want to use html5 from now on, but agree with everyone that strict is the ultimate benchmark for quality of programming- Then, if I use html5 validation, it will permit me to use deprecated tags as well as do things like not closing a tag (e.g. <br> is OK now????).

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...