Welcome to another article on Building Better Web Pages. This article series comprehensively covers building an HTML document: easily learned, but rarely perfected.
Today’s article covers Doctype declarations. While there is a wealth of information on the internet already about Doctypes, I have always clicked away without really understanding what was really going on. Besides, we can’t completely cover “Building Better Web Pages” without it. The most basic questions are “Why do I need a Doctype?” or “Which Doctype should I use?” You might figure this would be easy to explain. I think can be, but I just never see it solidly stated.
Solid Statement: You must always have a Doctype and it must always be on the first line. Use the XHTML Strict Doctype on all new pages. It forces you to design your site correctly, instills good habits for the future, and is supported in all browsers as text/html content.
Below, I will tell you why you should always use the XHTML Strict Doctype, the differences are between Strict vs Transitional, and the differences between HTML vs XHTML. I will make these as clear and concise as possible for this article, but you can always get more information from the dedicated articles for each topic. Note that there is debate over using XHTML with the text/html Content-type versus the application/xhtml+xml Content-type. That argument is outside the scope of this article. Rest easy knowing that XHTML as text/html works across the board.
Why Do I Need a Doctype?
- Most importantly, your Doctype tells the browser how to render your page.
- Determines whether or not tags have to be lowercase.
- Determines whether or not tags have to be closed.
- Determines whether or not attributed must be quoted.
- Determines whether or not you can use legacy (old) tags and attributes.
- Determines whether or not frames are valid.
- It is necessary for a valid HTML document.
The web is always growing and changing. Old ways of doing things disappear and new ways emerge. Your document type is how current technology recognizes your page as being new, old, or a mix of both. It will also assist you in correctly updating your page to use the standards of today through validation. For instance, you will be warned that you are using an old tag like <font> if you have a Strict Doctype. The font tag was deprecated because it refers only to presentation and has nothing to do with the structure of your document. Using the Strict Doctype just helped you enforce proper standards by separating your content and presentation.
Why Should I use the XHTML Strict Doctype?
- Most importantly, it enforces good coding habits.
- Acts like an XML document that can be universally read.
- Does not use old legacy code that isn’t supported or used anymore.
- Helps to enforce separation of content and presentation.
- Avoids parsing errors by making sure all tags are closed.
- Avoids parsing errors by making sure all attributes are quoted.
- Avoids parsing errors by making sure all tags are lowercase
- Allows the use of frames.
XHTML documents are essentially XML. Enforced closing tags, quoted attributes, and lowercase tags are all thanks to XHTML. While these are perfectly fine when using HTML 4.01 Doctypes, it is generally bad practice. No other markup or scripting language uses such conventions. Therefore, the XHTML standard allows you to learn good habits that will extend into other platforms and languages.
The Strict version of XHTML is suggested because it forces the designer to use current standards of the day. Transitional versions of XHTML and HTML exist only for old pages that would be difficult to update to new standards. There are a lot of old tags and attributes that aren’t used anymore today, but exist on old pages thanks to a Transitional Doctype. Sadly, many old code snippets and tutorials are still floating around the internet that use these old conventions. Keep an eye out for them and always validate your code!
Doctype Characteristics
- Must be on first line of page
- Must use only a single line
- IS case-sensitive
There are technically 6 Doctypes available. I purposely ignore talking about the XHTML/HTML Framset Doctypes because they are pretty useless. HTML Doctypes to do not allow frames, period. This is yet another reason to use the XHTML Strict Doctype. Below are the correct syntax for the remaining available Doctypes. While I only recommend the top one, I have included the other 3 for posterity. Notice the case sensitivity in the word “html” at the beginning of each.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
I hope this article has been concise and clears up any confusion around the Doctype declaration. Let me know what you thought! If you would like to dive farther into a subject, check out one of the specific articles related to this subject. There is an incredible amount of information surrounding this single line of code.
Solid Reading
For building better web pages, any of the following books are a great! “Web Design For Dummies”
