Can somebody enlighten me on the use of DOCTYPE?

@JennaWrennSep 03.2006

I went through W3school’s CSS tutorial, and maybe I am blind, but I didn’t come across anything about DOCTYPE. I couldn’t figure out why my page wasn’t picking up any of the external style sheet. Can somebody give me a quick explanation of what DOCTYPE is and how to use it? I’ll get the code up soon.

to post a comment

CSS

22 Comments(s) _↴

@JennaWrennauthorSep 03.2006 — #

[CODE]<HTML>
 
 <HEAD>
 <LINK href="jwstyle.css" rel="stylesheet" 
 
 type="text/css">
 </HEAD>
 
 <BODY>
 <P class="default">This is a default paragraph 
 
 stlye.
 </BODY>
 </HTML>[/CODE]

The reason it is so short is because I wanted to get it to work before I tried to use it...

Here's what I have for an Ex Stlye Sheet so far. It is called jwstyle.css.

[CODE]body {background-color: rgb (239,219,181) 
 
 url('cloth034.png') repeat fixed;}
 p.default {font-size:11pt; margin-left: 15px}[/CODE]

@ray326Sep 04.2006 — #Doctype: http://www.alistapart.com/articles/doctype/

body { background: rgb(239,219,181) url(cloth034.png) fixed; }

/* or */

body {

background-color: rgb(239,219,181);

background-image: url(cloth034.png);

background-attachment: fixed;

}

p {font-size:11pt; margin-left: 15px;} /* no class needed for real default */

@felgallSep 04.2006 — #Matching </p> tags for every <p> are needed though for the HTML to be valid.

@CharlesSep 04.2006 — #Matching </p> tags for every <p> are needed though for the HTML to be valid.[/QUOTE]That is completely false. HTML has [i]lots[/i] of optional tags and other things and the P element end tag is not needed.<!ELEMENT P - O (%inline;)* -- paragraph -->[/quote]That's from the HTML 4.01 DTD that your DOCTYPE points to. It's in a semi-human readable format and it tells the browser that the P element has a start tag, "-", and an optional end tag, "O" and it contains zero or more inline elements. Inline elements are defined elsewhere in the DTD but the P element is not among them. If you omit the end tag and follow with any non-inline element the browser automatically inserts the closing tag for the P element.

@felgallSep 04.2006 — #If you want to choose where the paragraph ends so that any styles are applied correctly to the paragraph in all browsers then you need to include it.

It may be valid to leave it out but that is telling the browser that it can choose for itself where the paragraph ends and so different browsers will make different choices resulting in the page appearing differently in different browsers. Since the idea of using standard valid code is to try to get the page to look the same on all browsers then leaving out optional end tags is not something that you should consider doing.

@The_Little_GuySep 04.2006 — #Some of you HTML tags won't work properly with out the use of a Doctype.

@CharlesSep 05.2006 — #If you want to choose where the paragraph ends so that any styles are applied correctly to the paragraph in all browsers then you need to include it.

It may be valid to leave it out but that is telling the browser that it can choose for itself where the paragraph ends and so different browsers will make different choices resulting in the page appearing differently in different browsers. Since the idea of using standard valid code is to try to get the page to look the same on all browsers then leaving out optional end tags is not something that you should consider doing.[/QUOTE]Forgive me for being out of line here, but I am continually floored that you are permitted to teach a subject about which you know so little.

The DTD makes very clear the rules of HTML and so there is no ambiguity about how a document is parsed when you omit the optional tags. The P element is closed three ways:[list]

[*]The P closing tag is enountered;

[*]An element that the P element cannot contain is enountered;

[*]The parent element is closed (with or without a closing tag).

[/list]In XHTML closing tags are required. This is to allow a level of error checking and to eliminate ambiguity [i]in the absence of a DTD[/i]. The point of XHTML is to allow it to be mingled with other mark up languages and sometimes writing a new DTD is more trouble than it is worth.

@felgallSep 05.2006 — #I am constantly amazed that you have such a non-existant understanding of the difference between what the standards say and how real web browsers actually work - which are not necessarily all that close to being the same thing.

Often good programming practice differes significantly from both and it is good programming practice to include all "optional" tags unless they are optional through not actually being relevant to particular situations.

@JavaKid93Sep 05.2006 — #sorry for interupting but what does enountered mean??

@felgallSep 05.2006 — #He misspelt encountered.

@JavaKid93Sep 05.2006 — #oh ok thanks,

@CharlesSep 06.2006 — #I am constantly amazed that you have such a non-existant understanding of the difference between what the standards say and how real web browsers actually work - which are not necessarily all that close to being the same thing.

Often good programming practice differes significantly from both and it is good programming practice to include all "optional" tags unless they are optional through not actually being relevant to particular situations.[/QUOTE]There is quite a bit of a difference between some relatively new feature and something that was there from the start. Optional tags is and always has been a fundamental feature of HTML. [i]From the original IETF DTD:[/i]

&lt;!ENTITY % font " TT | B | I "&gt;
 &lt;!ENTITY % phrase "EM | STRONG | CODE | SAMP | KBD | VAR | CITE "&gt;
 &lt;!ENTITY % text "#PCDATA | A | IMG | BR | %phrase | %font"&gt;

<!ELEMENT P - O (%text)*>
[i] http://www.w3.org/MarkUp/html-spec/html-spec_9.html#SEC9.1 [/i][/quote]Every browser does and always has understood that certain tags are optional.

This a feature of SGML, which makes it fundamental to HTML and which is again something quite a bit different from some new feature that hasn't yet been universally adopted.

Now it is true that serveral features of HTML were never adopted by browsers - shorttags, external entities - and these are listed in the 4.01 spec. ( http://www.w3.org/TR/html401/appendix/notes.html#h-B.3 ) but you won't see optional tags among the list. That's because they are universally supported.

And the spec. recognizes another class of features, things that you can do, that are universally supported, but that are best to be avoided. Omitting the quotes around certain attribute values is among this list, omitting optional tags is not.

You can't just go around making up rules under the pretence that it can't hurt and it might do some good. Well, actually you can and you have. Next you'll be telling us to strap a canned ham to our heads because there's no telling how some browser will behave is we don't.

@felgallSep 06.2006 — #Charles,

 Over the last 30+ years of programming and 25+ years of using markup languages I have read many hundreds of standards manuals many of which are as applicable to the web as to the various other environments that they apply in. Many of these are as "official" as the SW3C standard (which appears to be the only one out of thousands that you appear to even know exists) while others actually are official standards. I therefore have no need whatever to go making up standards.

The standard about always including optional items such as closing paragraph tags in HTML and semi-colons on the end of all Javascript statements is one that is always followed by any sensible person who has heard of it because it is actually a useful standard to follow since not following it inevitably leads to problems at a later date.

You have a thorough THERORETICAL knowledge of one standards document while I have a PRACTICAL knowledge of several hundred such documents. I would not go so low as to make stupid suggestions about you the way you made the rediculous one about Ham but then that may be all that you know about other than for the W3C documents that you appear to have memorised and so all I can say is that I feel sorry for your knowing so little while thinking that the little that you do know is so important.

@thereseSep 06.2006 — #Wow.

Jenna, about doctypes...

Here is a link to an explanation about doctypes. There are more explanations all over the web, I have not had a lot of luck with the W3c site about things I am just learning. Just do a google search for "doctype" till you find one that explains it to your satisfaction.

[URL]http://alistapart.com/stories/doctype/[/URL]

The doctype you probably want to use is:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">[/QUOTE]

Just put that on your html page at the very top above all other coding.

hope that helps

@KravvitzSep 07.2006 — #therese, why HTML 4.01 Transitional? Why not HTML 4.01 Strict?

&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd"&gt;

More on doctypes:

[url=http://hsivonen.iki.fi/doctype/]Activating the Right Layout Mode Using the Doctype Declaration[/url]

[url=http://www.juicystudio.com/choosing-doctype/]Choosing a DOCTYPE[/url]

[url=http://www.oreillynet.com/pub/a/network/2000/04/14/doctype/index.html]Use the Right Doctype[/url]

[url=http://www.webdevout.net/doctype_switching.php]Doctype switching[/url]

[url=http://www.communitymx.com/content/article.cfm?cid=85FEE]Rendering Mode and Doctype Switching[/url]

http://www.w3.org/QA/2002/04/Web-Quality

http://www.w3.org/QA/2002/04/valid-dtd-list.html

@thereseSep 07.2006 — #uh, i went to catholic schools for 9 years and rebel against anything "strict"? ?

I am not that smart, and I think I had some issues at one time with strict, so I use transitional. not really sure. Although now I am trying out xhtml and use a different doctype. It just looked like the best doctype for someone just starting out...

I don't know, like I said, I am not that smart :p

@CharlesSep 07.2006 — #[i]From the HTML 4.01 transitional DTD:[/i]

 This is the HTML 4.01 Transitional DTD, which includes
 presentation attributes and elements that W3C expects to phase out
 as support for style sheets matures. Authors should use the Strict
 DTD when possible, but may use the Transitional DTD when support
 for presentation attribute and elements is required.

[i] http://www.w3.org/TR/REC-html40/sgml/loosedtd.html [/i][/quote]Well, that day came long ago and we're not supposed to be using the transitional DTD any more.

And when we were using it we were supposed to start with something that validates as strict and then add the transitional.

XHTML can be a lot of fun and quite useful but it's not really suitable for the web. To see it really working save the file with a ".xml" extension and view it in MSIE.

@thereseSep 07.2006 — #well, i was trying out xhtml because i thought it was the updated html. so what am i supposed to be using to make simple webpages? i don't want to do fancy stuff like flash, databases, extensive php stuff, or use expensive programs like dreamweaver, etc. i just do simple things. so i use html or xhtml which i thought was html more well-formed, and css. what doc type should i use? i have 2 websites right now http://www.corumwebdesigns.com and http://www.corumwebdesigns.com/sgonline/index.php. Its php only because I am trying out including menus, not anything fancier. it doesn't validate right now and i will fix that, but what doctype do you suggest i use on these sites? and if xhtml is not appropriate for the web, what should i use?

To see it really working save the file with a ".xml" extension and view it in MSIE.[/QUOTE]
I tried this trick and just got errors. Was that your point? because i dont get it

@JennaWrennauthorSep 08.2006 — #Charles, Fellgal, quit it! Typical nerds.

In case you all missed it, my question was about doctype (thank you Ray326-- I'll check out the article later). Obviously that code is not what I am going to be using for my webpage, so I'm going to work out all the paragraph coding later. Right now I'm concerned about doctype.

Charles-- it seems a requirement of most public school teachers today is that they know nothing about what they are teaching. Get over it.

Fellgal-- Who cares if one person has book knowledge or street smarts right now? This thread is not a contest.

Ok, sorry, harsh, but please quit? And don't worry...before I go uploading my webpages, I will have someone test them in browers. I'm kind of having to put this on hiatus for a bit anyway.

@JennaWrennauthorSep 08.2006 — #Ok, I went back to the code and put in a Doctype for html 4.01 strict, and it doesn't show any of the css, only the text in that one paragraph, default font. Can somebody take a look at the code I posted and see if there's something I need to add to make it work?

@NogDogSep 08.2006 — #Well, this part of your CSS is wrong:

<i>
 </i>body {background-color: rgb (239,219,181) 
 
 url('cloth034.png') repeat fixed;}

I believe you want:

<i>
 </i>body {background: rgb (239,219,181) url('cloth034.png') repeat fixed;}

A couple good links to bookmark that will help you detect such problems:

http://validator.w3.org/

http://jigsaw.w3.org/css-validator/

Also in #CSS _↴

css tables Horizontal Menu Stretching why is list not the same in IE and mozilla?

Success!

Help @JennaWrenn spread the word by sharing this article on Twitter...

Tweet This

Can somebody enlighten me on the use of DOCTYPE?

22 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

Can somebody enlighten me on the use of DOCTYPE?

22 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

22 Comments(s) _↴

Also in #CSS _↴