Function
Use of <!DOCTYPE...> tags generates a lot of controversy. W3C requires their use on every page, but many pages don't bother with them. The tag does not have any effect in a browser's rendering of HTML or CSS.
The tag's function is to describe what type of document is being viewed - an HTML file in the case of this page. It is primarily read by HTML validators to see what "DTD" to compare the code to. I use the following <!DOCTYPE...> on my pages:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
When a <!DOCTYPE...> tag is used, it is always the very first tag coded at the top of the page. Even before the <html> tag. You want it read before any other tag. It's one of the few tags that go outside of the <html>/</html> tagset.
I'll break this tag down and explain it. First, you need to understand what a DTD is:
DTD
DTD stand for Document Type Definition. It is a document/file that describes the function of each tag and attribute of a mark up language. The DTD is critical for programming in XML, XHTML, and SGML. It's not quite so important for coding in HTML because the W3C makes the ultimate standards for HTML and takes care of the DTD for you.
Browsers base their rendering engines based upon a mark up language's DTD. The DTD is the document that gives gives tags and attributes their power.
The W3C approves HTML's DTD. The DTD changes every time a new tag or attribute is added to HTML. The current version as of this writing is HTML 4.01.
Details
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
The "!DOCTYPE" is the core element of the tag. Note the exclamation point. That tells browsers and code validators that this tag is a form of comment. (Remember <!-- comment -->?). This indicates that a definition of the document being tagged follows.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
The "HTML PUBLIC" gives an overview of the type of document the tag represents. In this case it's an HTML file using W3C's public DTD for HTML. Note that there is a space after "!DOCTYPE" and "HTML".
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
The highlighted text indicates that a W3C approved DTD for HTML is being followed.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
The highligthed portion indicates what version of HTML is being used. Using "Transitional" is less strict than just "HTML 4.0". It will allow a validator to overlook some use of deprecated tags.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional //EN">
The "EN" indcates that the tags on the page use English elements and attributes. It does not indicate that the content is in English.
Optionally you can add the URL to the specific DTD your code conforms to at W3C:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
This is the URL to the DTD for HTML 4.0 Transitional. I like the name "loose.dtd". It refers to a less strict adherence to HTML 4.0. This would refer a code validator to a totally different DTD than "strict.dtd" when validating the code.
Three Forms
Currently there are three forms of <!DOCTYPE...> for HTML: Transitional, Strict, and Frames. The specific tags with URLs are below:
For very strict validation and compliance:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
For less strict validation and inclusion of some deprecated tags:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
For a <frameset>:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Frameset//EN" "http://www.w3.org/TR/REC-html40/frameset.dtd">
Summary
When coding in HTML, the <!DOCTYPE...> tag isn't necessary unless your page is to be run through a code validator. It, and DTDs, become much more important as you begin coding with XML and XHTML.
The format of the <!DOCTYPE...> tag is strict. Pay attention to spaces and use of quotes.
There are three types of <!DOCTYPE...>s: Strict, Transitional (less strict), and Frameset. Use the appropriate tag for each.
Most HTML editors will let you automatically add your choice of several pre-formatted <!DOCTYPE...> tags to the tops of your page templates.
To Special Tags Exam
Back To Advanced HTML Index
|