Why DOCTYPE is important and how to use it correctly
I decided to hold regular lectures and practical classes with my PHP, MySQL, Javascript programming staff. As well as other technologies necessary for the production of quality sites. I decided to start from the very "top", with HTML tags. I will be glad to any comments :)
At once I will make a reservation that I found most of the information on the Internet, at the bottom of the article there will be links to sources. Some of the information was translated with google translate.
So:
It seems that you did everything right, but your website for some reason does not look or does not work, as expected, in the latest versions of browsers.
You wrote the correct standard XHTML code and standard CSS. You used the standard DOM (Document Object Model) specification to manage dynamic elements on the page. And yet, in browsers that seem to be made in compliance with these standards, your site does not work. Most likely, the error lies in the wrong DOCTYPE header.
This short article will tell you about the DOCTYPE headers that work, and also explain the practical and theoretical significance of this seemingly abstracted from reality tag.
According to the HTML and XHTML specifications, the DOCTYPE tag (which means “document type declaration”) tells the validator which version of (X) HTML you are using in your page. This tag should always be in the first line of each page. The DOCTYPE tag is a key component of web pages that claim to conformity to standards: without it, your code and CSS will not pass the validator check.
The DOCTYPE tag is also important for the correct display and operation of the page in standards-compliant browsers (Mozilla, IE5 / Mac, and IE6 / Win).
The DOCTYPE tag, in the attributes of which the full URI (full web address) is indicated, tells browsers to display the page in compliance with a certain standard or a sub-type of this standard.
If you use the incomplete DOCTYPE tag, its obsolete look, or forget about it at all, the browser will go into the “mysterious” (quirk) mode and will proceed from the assumption that you wrote the code for the page with errors and freely departed from the standards, ie . as written in the late 90s.
In this mode, the browser will try to parse your page using backward compatibility rules and display, for example, CSS in the way that Internet Explorer version 4 would display it, and DOM will work in the way it worked in this browser (IE switches to its old DOM, and Mozilla and Netscape 6 switches to God-knows what).
It is clear that these frills are not desirable for you. But that’s what you’ll get if you use the incomplete or incorrect DOCTYPE tag.
')
When creating NN4, IE4 did not comply with CSS rules in accordance with the standard. The implementation of Netscape was just awful, IE4 approached the implementation of the standard better, but nevertheless, it did not fully implement it. Although IE 5 Windows fixed a lot of IE 4 errors, there were other failures in CSS (mostly in the window model).
Therefore, when standards compliance became important, W3C put browser makers in front of a tough choice.
Getting close to the W3C specification was one solution to the problem, but if the browser makers simply changed the CSS implementation to fully comply with the standards, many websites would “crawl” to a greater or lesser degree or be completely inoperable. Such a rapprochement with the observance of the standard would cause problems. On the other hand, non-compliance with standards could introduce perpetual confusion in the era of browser wars.
Therefore, the solution to this problem was
In other words, all browsers had to work in two modes: compatibility mode for the old rules, and strict mode for the standard.
IE Mac was the first browser to use both modes, and Windows IE 6, Mozilla, Safari, Opera followed suit.
IE 5 Windows, as well as older browsers like Netscape 4, are permanently locked in compatibility mode.
The decision on which display mode to call is required was found in the use of the “DOCTYPE” switch. According to standards, any (X) HTML document must have a DOCTYPE that tells the world what type of (X) HTML document it uses.
This is a new DTD that is as strict as XHTML 1.0 Strict, and is based on the framework and modules described in the Modularization of XHTML (I didn’t look for what it is :).
A bit old (from 2004 to 2008), of course, but I did not find a new one.
www.qindex.info/Q_get.php?g_clss=forum&g_prcss=thrd&g_tmplt=&g_brd=5&g_thrd=128
IE8 has four modes: IE 5.5 compatibility mode, IE 7 standard mode, IE 8 standard mode, and IE 8 compatibility mode.
The choice of method depends on the data from various sources: DOCTYPE, meta elements, HTTP headers, periodically downloaded data from Microsoft (!), Intranet, settings made by the user, settings made by the administrator, availability of the site in the microsoft list, etc.!
http://hsivonen.iki.fi/doctype/ie8-mode.pdf
http://hsivonen.iki.fi/doctype/ - detailed table of operating mode selection (all browsers)
http://en.wikipedia.org/wiki/Doctype
http://www.htmlbook.ru/html/!doctype.html
http://www.webmascon.com/topics/coding/25a.asp
http://www.quirksmode.org/css/quirksmode.html - what is Quirks mode
http://www.quirksmode.org/css/box.html - fix box models
The latest lookup table is http://hsivonen.iki.fi/doctype/
http://htmlfixit.com/tutes/tutorial_XHTML_and_HTML_-_The_differences.shtml the difference between HTML and XHTML
http://htmlfixit.com/tutes/tutorial_XHTML_and_HTML_Validation__Deprecated_tags_and_attributes.php obsolete tags and attributes and what to replace them with
http://www.w3.org/TR/html401/appendix/changes.html accurate information on tags obsolete in HTML 4.01
upd: slightly corrected errors
At once I will make a reservation that I found most of the information on the Internet, at the bottom of the article there will be links to sources. Some of the information was translated with google translate.
So:
Why DOCTYPE is so important
It seems that you did everything right, but your website for some reason does not look or does not work, as expected, in the latest versions of browsers.
You wrote the correct standard XHTML code and standard CSS. You used the standard DOM (Document Object Model) specification to manage dynamic elements on the page. And yet, in browsers that seem to be made in compliance with these standards, your site does not work. Most likely, the error lies in the wrong DOCTYPE header.
This short article will tell you about the DOCTYPE headers that work, and also explain the practical and theoretical significance of this seemingly abstracted from reality tag.
What is the doctype?
According to the HTML and XHTML specifications, the DOCTYPE tag (which means “document type declaration”) tells the validator which version of (X) HTML you are using in your page. This tag should always be in the first line of each page. The DOCTYPE tag is a key component of web pages that claim to conformity to standards: without it, your code and CSS will not pass the validator check.
The DOCTYPE tag is also important for the correct display and operation of the page in standards-compliant browsers (Mozilla, IE5 / Mac, and IE6 / Win).
The DOCTYPE tag, in the attributes of which the full URI (full web address) is indicated, tells browsers to display the page in compliance with a certain standard or a sub-type of this standard.
If you use the incomplete DOCTYPE tag, its obsolete look, or forget about it at all, the browser will go into the “mysterious” (quirk) mode and will proceed from the assumption that you wrote the code for the page with errors and freely departed from the standards, ie . as written in the late 90s.
In this mode, the browser will try to parse your page using backward compatibility rules and display, for example, CSS in the way that Internet Explorer version 4 would display it, and DOM will work in the way it worked in this browser (IE switches to its old DOM, and Mozilla and Netscape 6 switches to God-knows what).
It is clear that these frills are not desirable for you. But that’s what you’ll get if you use the incomplete or incorrect DOCTYPE tag.
')
Problem
When creating NN4, IE4 did not comply with CSS rules in accordance with the standard. The implementation of Netscape was just awful, IE4 approached the implementation of the standard better, but nevertheless, it did not fully implement it. Although IE 5 Windows fixed a lot of IE 4 errors, there were other failures in CSS (mostly in the window model).
Therefore, when standards compliance became important, W3C put browser makers in front of a tough choice.
Getting close to the W3C specification was one solution to the problem, but if the browser makers simply changed the CSS implementation to fully comply with the standards, many websites would “crawl” to a greater or lesser degree or be completely inoperable. Such a rapprochement with the observance of the standard would cause problems. On the other hand, non-compliance with standards could introduce perpetual confusion in the era of browser wars.
Decision
Therefore, the solution to this problem was
- allow web developers who know about standards to choose which mode to use.
- continue to display old pages by the old (compatible) rules. (quirks mode)
In other words, all browsers had to work in two modes: compatibility mode for the old rules, and strict mode for the standard.
IE Mac was the first browser to use both modes, and Windows IE 6, Mozilla, Safari, Opera followed suit.
IE 5 Windows, as well as older browsers like Netscape 4, are permanently locked in compatibility mode.
The decision on which display mode to call is required was found in the use of the “DOCTYPE” switch. According to standards, any (X) HTML document must have a DOCTYPE that tells the world what type of (X) HTML document it uses.
Valid DTDs
| Doctype | Description |
| HTML 4.01 | |
| <! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 // EN" " www.w3.org/TR/html4/strict.dtd"> | Strict HTML syntax. |
| <! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 Transitional // EN" " www.w3.org/TR/html4/loose.dtd"> | HTML transition syntax. |
| <! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 Frameset // EN" " www.w3.org/TR/html4/frameset.dtd"> | HTML document uses frames. |
| XHTML 1.0 | |
| <! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Strict // EN" " www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> | Strong XHTML syntax. |
| <! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Transitional // EN" " www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | Transitional syntax XHTML. |
| <! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Frameset // EN" " www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> | The document is written in XHTML and contains frames. |
| XHTML 1.1 | |
| <! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.1 // EN" " www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> | XHTML 1.1 developers assume that it will gradually replace HTML. This definition has no division into types, the syntax is one and obeys clear rules. |
HTML 4.01 DTDs
- HTML 4.01 Strict - Does not allow presentational (design) markup, arguing that it should be CSS.
- Transitional DTD allows some obsolete attributes and elements.
- If frames are used, the frameset doctype should be used.
XHTML 1.0 DTDs
- XHTML Strict DTD is the strictest existing DTD: obsolete (see below) tags are not supported, and the code must be written correctly
- The XHTML Transitional DTD is the same as the XHTML Strict DTD, but old tags are allowed. This is the MOST POPULAR currently DTD.
- XHTML Frameset DTD is the only XHTML DTD that supports frames.
XHTML 1.1 DTD
This is a new DTD that is as strict as XHTML 1.0 Strict, and is based on the framework and modules described in the Modularization of XHTML (I didn’t look for what it is :).
Usage statistics for various DTDs
A bit old (from 2004 to 2008), of course, but I did not find a new one.
www.qindex.info/Q_get.php?g_clss=forum&g_prcss=thrd&g_tmplt=&g_brd=5&g_thrd=128
It turns out that More than 50% of sites work in quirk mode - that is, in IE4 mode!
Outdated tags and attributes
Outdated tags in alphabetical order
- <applet> Use the <object> tag.
- <basefont> use CSS.
<blockquote> use CSS.- <center> use CSS.
- <dir> use <ul>.
<em> use CSS.- <font> use CSS.
- <isindex>
- <listing> use <pre> or CSS.
- <menu> replace with <ul> or CSS tag.
- <nextid>
- <plaintext> use <pre> or <a href='view-source:http://somesite.com'> Source code </a>.
- <s> use <del> or <ins>.
- <strike> use <del> or <ins>.
- <u> use CSS.
- <xmp> use <pre> and CSS style.
Outdated HTML / XHTML tag attributes. All of them can be replaced by CSS styles.
- align
- alink
- background
- bgcolor
- color
- hspace
- link
- size
- text
- type
- vlink
- vspace
The difference between HTML and XHTML (the rules for XHTML are indicated)
- Tags should be written in lower case, instead of <IMG SRC = "resource / frankisboat.gif" WIDTH = "389" HEIGHT = "227" BORDER = "0" ALT = "boat">, as it was in HTML, you need to write : <img src = "resource / frankisboat.gif" width = "389" height = "227" border = "0" alt = "boat" />
- All tags must be closed, either using a tag with a slash in a pair, like a paragraph (<p> </ p>) for example, or self-closing tags, like for example (<br />).
- All tags must be properly nested, without overlaps.
- Obsolete tags should not be used.
- All attributes must be typed in lower case.
- All attribute values ​​must be enclosed in single or double quotes.
- All attributes should be used in long form, not short: disabled = "disabled" in XHTML versus DISABLED in HTML
- The structure should be separated from the content. For example, the <p> tag is part of the content (paragraph) and you cannot put an example table in it, because the table is part of the structure (formatting).
Compatible and IE8
IE8 has four modes: IE 5.5 compatibility mode, IE 7 standard mode, IE 8 standard mode, and IE 8 compatibility mode.
The choice of method depends on the data from various sources: DOCTYPE, meta elements, HTTP headers, periodically downloaded data from Microsoft (!), Intranet, settings made by the user, settings made by the administrator, availability of the site in the microsoft list, etc.!
Scheme (break the leg) determine in which mode IE8 browser works
http://hsivonen.iki.fi/doctype/ie8-mode.pdf
Information sources
http://hsivonen.iki.fi/doctype/ - detailed table of operating mode selection (all browsers)
http://en.wikipedia.org/wiki/Doctype
http://www.htmlbook.ru/html/!doctype.html
http://www.webmascon.com/topics/coding/25a.asp
http://www.quirksmode.org/css/quirksmode.html - what is Quirks mode
http://www.quirksmode.org/css/box.html - fix box models
The latest lookup table is http://hsivonen.iki.fi/doctype/
http://htmlfixit.com/tutes/tutorial_XHTML_and_HTML_-_The_differences.shtml the difference between HTML and XHTML
http://htmlfixit.com/tutes/tutorial_XHTML_and_HTML_Validation__Deprecated_tags_and_attributes.php obsolete tags and attributes and what to replace them with
http://www.w3.org/TR/html401/appendix/changes.html accurate information on tags obsolete in HTML 4.01
upd: slightly corrected errors
Source: https://habr.com/ru/post/71364/
All Articles