Dtd (!doctype) Element.

[atar.yosef]

Hello to all!!! Now I'm learning HTML and I arrived to this page of the HTML tutorial and at the bottom appear a minor explanation about the DTD element.I didn't succeed to understand properly what is in fact DTD and I ask for help from you to explain me please more detailed what is exactly DTD and why do we need it.Any explanation will be appreciated if it will be clearly and detailed.Please note that I'm newbie at HTML so you should explain me as more as detailed.Waiting for your response!!!

[Ingolme]

The DTD tells the browser which set of rules it has to follow the parse the document. You'll have to learn DTD if you want a complete understanding of it.

[atar.yosef]

The DTD tells the browser which set of rules it has to follow the parse the document. You'll have to learn DTD if you want a complete understanding of it.

Hello there!!!Firstly, thanks you about your relationship.Secondly, at the DTD tutorial I saw that the <!DOCTYPE> element is intended to XML files, so why do the HTML tutor wrote to insert the DTD element inside a HTML file?

[Ingolme]

Because the <!DOCTYPE> declaration also applies to SGML documents and HTML is a subset of SGML.W3Schools doesn't have an SGML tutorial because SGML became obsolete in favor of XML.You can learn more about SGML here: http://en.wikipedia.org/wiki/SGML

[atar.yosef]

Because the <!DOCTYPE> declaration also applies to SGML documents and HTML is a subset of SGML.W3Schools doesn't have an SGML tutorial because SGML became obsolete in favor of XML.You can learn more about SGML here: http://en.wikipedia.org/wiki/SGML

So, if that is the case, that SGML standard was vanished in favor of XML standard, so still the question is living-- why do we need the DTD at HTML document, while HTML is of course not a part or subset of the XML standard??? :)

[jeffman]

SGML is the parent of HTML and XML. HTML requires a doctype because SGML requires a doctype. This is true even when XML replaces SGML.You must also remember that the HTML 4 standard is 10 years old. A lot of changes have happened in the last 10 years. These old rules don't always make sense today. But they are still the rules, so we must use them.Notice that HTML 5 will not require a doctype declaration. I believe that HTML 5 will not allow transitional documents, so that the standards that govern HTML will be assumed by browsers, and a declaration of the specification will be unnecessary. (No doubt browsers will continue to support HTML 4 and older documents.)A full implementation of HTML 5 is years away, although many browsers are already implementing parts of the HTML 5 DRAFT specification that seem to be agreed on. Until then, we use doctypes.

[thescientist]

So DD or Ingolme, if HTML 5 will have no doctype, and that browser will assume standards, where does that leave developers as far as being able to create consistent web pages based on a specific set of standards dictated by a doctype? For instance, Strict usually insures the greatest compatibility, but are we going to have to expect that browsers are going to be rendering in some sort of quirks mode? I figured the doctype was meant to avoid those kinds of issues. Or will HTML 5 be its own specific standard, as opposed to having transitional, frameset, and strict version, like for HTML 4.01?

[Ingolme]

So DD or Ingolme, if HTML 5 will have no doctype, and that browser will assume standards, where does that leave developers as far as being able to create consistent web pages based on a specific set of standards dictated by a doctype? For instance, Strict usually insures the greatest compatibility, but are we going to have to expect that browsers are going to be rendering in some sort of quirks mode? I figured the doctype was meant to avoid those kinds of issues. Or will HTML 5 be its own specific standard, as opposed to having transitional, frameset, and strict version, like for HTML 4.01?

Unfortunately, there's a mistake with all the browsers.The whole concept of using different redering engines for different doctype declarations is wrong. It's not part of the specification. Browser vendors thought it would be a good way to distinguish pages that were designed for older browsers from pages that are designed for newer browsers.Ideally, all websites should be rendered in standards mode, but the problem is that too many corporate websites would break if they tried that.HTML 5 should only be rendered in standards compliant mode. The DOCTYPE for an HTML 5 document is <!DOCTYPE html>. Browsers should be able to render it in standards compliant mode by seeing an empty DOCTYPE declaration at the top of the page.

[atar.yosef]

SGML is the parent of HTML and XML. HTML requires a doctype because SGML requires a doctype. This is true even when XML replaces SGML.You must also remember that the HTML 4 standard is 10 years old. A lot of changes have happened in the last 10 years. These old rules don't always make sense today. But they are still the rules, so we must use them.Notice that HTML 5 will not require a doctype declaration. I believe that HTML 5 will not allow transitional documents, so that the standards that govern HTML will be assumed by browsers, and a declaration of the specification will be unnecessary. (No doubt browsers will continue to support HTML 4 and older documents.)A full implementation of HTML 5 is years away, although many browsers are already implementing parts of the HTML 5 DRAFT specification that seem to be agreed on. Until then, we use doctypes.

Hello there Deirdre's Dad!!!! Firstly, very thanks you about your kind, clear and detailed response. every time I amaze anew from your clear answers, thanks you!!! Secondly, I want to understand, if the major browsers always will provide compatiblity to the older HTML specification, so why do we need at all to be pedantic about our HTML code, while even we will write our HTML documents according to the old HTML specification, they will be accepted by the browsers? and why the W3School's HTML tutorial always emphasize and recommend to write the HTML documents according to the strict HTML 4.01 specification?Waiting for your response!!! :)

[Ingolme]

Because browsers running in quirksmode are very different from eachother while browsers running in standards compliant mode are nearly the same.It means that to get your page to look correct in all browsers is much easier when using standards compliant mode.In Internet Explorer, if your page is running in quirksmode and you have a box with 10px padding and a 400px width, it's going to look like this:

|------400px------|.-----------------.|	  10px	   ||  -------------  || |			 | ||  -------------  ||				 |.-----------------.

While Firefox will display it like this:

  |------400px------|.---------------------.|		 10px		||  -----------------  || |				 | ||  -----------------  ||					 |.---------------------.

In Standards Compliant mode, both browsers use the second method, which is the way the W3C recommends.

[jeffman]

There are documents on the web that have existed for 15 years with no updates. The W3 and browser designers have always intended for old documents to be rendered as they were when they were designed. We call this backward compatibility.For that to work correctly, there must be a way to distinguish standards-compliant documents from older documents. The thing that does that is the doctype.I also believe that the creation of the transitional doctype was a mistake. Backward compatibility is already ensured by the browsers, and it applies to documents that have no doctype at all. The transitional doctype only encourages sloppy designers to remain sloppy. One result of this is the constant parade of designers on this board who complain that their pages work in one browser, but not in another browser. They believe, mistakenly, that the browsers are at fault, when it is actually a poor doctype and sloppy code that is at fault.The decision to create one strict doctype for HTML 5 is a giant leap for progress.

[thescientist]

I think I getcha. So HTML 5 will, by default, be strict? Sweet. So, <!DOCTYPE html> will be equivalent to something like <!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 5//EN" "http://www.w3.org/TR/html5/strict.dtd">?

[jeffman]

That's my take, yeah.

[thescientist]

nice. much easier to remember, too.

[atar.yosef]

Hello to all the fellows!!!! I am so happy about your kind help and support!!! I want to thanks to Deirdre's Dad and to Ingolme about their detailed, clear answers.But just one thing I didn't understand at the ingolme's post that he demonstrated clearly what is the difference between Firefox and Internet Explorer at the displaying of the older documents, and what that I didn't understand in his example is why the W3C recommend on the Firefox displaying at their new HTML 5 specification, here is the IE displaying this is apparently the correct way to display this example because the padding of 10px need to be taken from the the border of the 400px border, is not? I'm very hope that I explained myself clearly and wait for your response!!!

[Ingolme]

Hello to all the fellows!!!! I am so happy about your kind help and support!!! I want to thanks to Deirdre's Dad and to Ingolme about their detailed, clear answers.But just one thing I didn't understand at the ingolme's post that he demonstrated clearly what is the difference between Firefox and Internet Explorer at the displaying of the older documents, and what that I didn't understand in his example is why the W3C recommend on the Firefox displaying at their new HTML 5 specification, here is the IE displaying this is apparently the correct way to display this example because the padding of 10px need to be taken from the the border of the 400px border, is not? I'm very hope that I explained myself clearly and wait for your response!!!

My explanation of the quirksmode box model doesn't apply to HTML 5. It's for older pages.The correct way is to add the padding to the width of the box.If the box is 400px wide and you add 10px of padding then the resulting box should be 420px wide, the content area will still be 400px wide.If you use the old Internet Explorer method, then if your box is 100px and you add 50px of padding there would be no content area left in the box.

[jeffman]

Ingolme's example shows the wrongness of the IE technique for rendering boxes.But I understand their motivation. A 100px box with a 2px border is 104px according to W3 standards. According to the old IE technique, it is still 100px. This makes pixel math very simple and intuitive. The standard makes pixel math more complicated. Changing the size of one element can require changes to the size of many other elements.But that is a small price to pay. As Ingolme writes, the content area never changes in stands mode, and that is the most important thing. Borders, margins and padding are decoration, not content. I also find that doing a little more pixel math makes developers more aware of what they are doing. Intuition can break, but math always works.

[atar.yosef]

My explanation of the quirksmode box model doesn't apply to HTML 5. It's for older pages.The correct way is to add the padding to the width of the box.If the box is 400px wide and you add 10px of padding then the resulting box should be 420px wide, the content area will still be 400px wide.If you use the old Internet Explorer method, then if your box is 100px and you add 50px of padding there would be no content area left in the box.

Thanks you very much!!! I think that I got your intention Have a great day!!! :)

[atar.yosef]

Ingolme's example shows the wrongness of the IE technique for rendering boxes.But I understand their motivation. A 100px box with a 2px border is 104px according to W3 standards. According to the old IE technique, it is still 100px. This makes pixel math very simple and intuitive. The standard makes pixel math more complicated. Changing the size of one element can require changes to the size of many other elements.But that is a small price to pay. As Ingolme writes, the content area never changes in stands mode, and that is the most important thing. Borders, margins and padding are decoration, not content. I also find that doing a little more pixel math makes developers more aware of what they are doing. Intuition can break, but math always works.

Thanks you Deirdre's Dad about your reference, but one thing I didn't understood ---

Why the math of the standard HTML (the new method of rendering that the padding is calculated from the border away) is more complicated to calculation then the older IE rendering technique (that render the padding from the box border inside)??And something in addition, what is the "box" that you are speak about it? do you mean to a table cell (who created by the <td> tag) or maybe to an <iframe>??Waiting for your response!!!

[Ingolme]

Thanks you Deirdre's Dad about your reference, but one thing I didn't understood ---

Why the math of the standard HTML (the new method of rendering that the padding is calculated from the border away) is more complicated to calculation then the older IE rendering technique (that render the padding from the box border inside)??And something in addition, what is the "box" that you are speak about it? do you mean to a table cell (who created by the <td> tag) or maybe to an <iframe>??Waiting for your response!!!

This is a standard box:

<div></div>

You add margin, padding and borders with CSS.The margin will tell you how much the box is offset from any other elements nearby or the boundaries of the parent element.Padding defines how much space there is between the edge of the box and the content within it. The border is meant to be a decoration, but it twakes space obviously. It is places outside the content area so that it won't remove space that could be useful for the content.Just put this code on a page with a DTD, and then try it on a page without it to see the difference:

<div style="margin: 20px; border: 1px solid black; padding: 20px; width: 200px;">Some content</div>

[jeffman]

When I say the math is more difficult using the standard, I don't mean we need geometry or calculus. I only mean that, in old IE, a 100px box is always 100px. Add a border, it is still 100px. Add some padding or margins, it is still 100px.In standards mode, if I want a 100px box to stay 100px, and I also want a 1px border, I must now change my box to 98px. If I want to add 3px of padding, but I still want my box to fit in 100px, I must change my box to 92px. (92 + (3 + 3) + (1 + 1) ) This confuses many people until they get used to thinking about it.Obviously, if I don't care how wide my box becomes, I don't have to do any arithmetic. But for convenience, I like to layout my designs in round numbers. I may also design a graphic for a heading or a button, and I don't want to change it if I don't have to. If I want my box to fit my graphic, then I must change its size any time I change the border or padding.As I said, in non-standard (quirksmode) IE, my box would always be 100px. That makes the math seem easier. But of course, since the size of my content area changes, I might also have to do some math to make sure my content fits into the space as it gets smaller and smaller. So maybe what I really have is the illusion of easiness in IE.And that is a reason the W3 chose to use a different model.IE is famous for creating shortcuts to help developers do their work. Sometimes the shortcut is a good idea. The innerHTML property that IE invented is a good idea, and in HTML 5, it is a standard. All modern browsers already use it. But sometimes an IE shortcut is a bad idea. Their old box model was a bad idea.

[atar.yosef]

When I say the math is more difficult using the standard, I don't mean we need geometry or calculus. I only mean that, in old IE, a 100px box is always 100px. Add a border, it is still 100px. Add some padding or margins, it is still 100px.In standards mode, if I want a 100px box to stay 100px, and I also want a 1px border, I must now change my box to 98px. If I want to add 3px of padding, but I still want my box to fit in 100px, I must change my box to 92px. (92 + (3 + 3) + (1 + 1) ) This confuses many people until they get used to thinking about it.Obviously, if I don't care how wide my box becomes, I don't have to do any arithmetic. But for convenience, I like to layout my designs in round numbers. I may also design a graphic for a heading or a button, and I don't want to change it if I don't have to. If I want my box to fit my graphic, then I must change its size any time I change the border or padding.As I said, in non-standard (quirksmode) IE, my box would always be 100px. That makes the math seem easier. But of course, since the size of my content area changes, I might also have to do some math to make sure my content fits into the space as it gets smaller and smaller. So maybe what I really have is the illusion of easiness in IE.And that is a reason the W3 chose to use a different model.IE is famous for creating shortcuts to help developers do their work. Sometimes the shortcut is a good idea. The innerHTML property that IE invented is a good idea, and in HTML 5, it is a standard. All modern browsers already use it. But sometimes an IE shortcut is a bad idea. Their old box model was a bad idea.

WOW, this is really a good clear and detailed answer!!! I am simple amazing!!!!But, also now I have two questions....1) You still didn't explain to which type of "box" you mean, its to say, what is in fact this "box" you always speak about it? by which <tag> is it be created?2) What is what you said:

The innerHTML property that IE invented is a good idea, and in HTML 5, it is a standard. All modern browsers already use it.

This is (inner HTML) totally a new concept for me, can you give in detail more about this if it don't bother you??

However, thank you a lot about your reference!!! and have a nice day!!!

[thescientist]

WOW, this is really a good clear and detailed answer!!! I am simple amazing!!!!But, also now I have two questions....1) You still didn't explain to which type of "box" you mean, its to say, what is in fact this "box" you always speak about it? by which <tag> is it be created?2) What is what you said: This is (inner HTML) totally a new concept for me, can you give in detail more about this if it don't bother you??

However, thank you a lot about your reference!!! and have a nice day!!!

1) The "box" he is referring to is what is known as the "box model" in CSS. It is a our way (as developers) of handling the positioning of elements and their content, relative to other elements and their content. http://www.w3schools.com/CSS/css_boxmodel.aspThere's no "tag" for it necessarily, it's just a way of seeing elements.2) InnerHTML is a Javascript property by which one can get the content of an HTML element. http://www.w3schools.com/htmldom/dom_methods.asp

[atar.yosef]

1) The "box" he is referring to is what is known as the "box model" in CSS. It is a our way (as developers) of handling the positioning of elements and their content, relative to other elements and their content. http://www.w3schools.com/CSS/css_boxmodel.aspThere's no "tag" for it necessarily, it's just a way of seeing elements.2) InnerHTML is a Javascript property by which one can get the content of an HTML element. http://www.w3schools.com/htmldom/dom_methods.asp

Thanks you a lot!!! Have a nice day!!!