What is a DOCTYPE and What Does it do?
When a browser scans your website, the first thing it looks for is its DOCTYPE. It helps render your website the proper way. Ever realized that a browser isn’t a real life guy that can guess in what language and type it is written? Well, a browser is just a tool for people to view your website and if it doesn’t know what and how it has to show a page, there can be some problems in layout. So when there’s a wrong, outdated or no DOCTYPE at all, your HTML, CSS or DOM codes are rendered as they where designed in the late 90′s. That’s not something a web developer like you want, right?
Most new, major browsers render the page the way the DOCTYPE says them to do. With major browsers I mean Internet Explorer 5.0 and up and of course Mozilla’s Firefox 1.0 and up. It is very logical new upcoming browsers will be using DOCTYPES as well. Only Opera doesn’t use DOCTYPEs, they always render a webpage a standard-compliant way.
So, you know why to use a DOCTYPE, but what is a DOCTYPE really. A DOCTYPE describes a document type definition (DTD). This is a machine-readable document that gives the browser the information it needs to display the right way as defined in the DOCTYPE. Example; if the DOCTYPE refers to XHTML 1.0 transitional, it get the information the XHTML 1.0 transitional DTD provides to proper render the webpage.
I hope you understand now what a DOCTYPE is. As a web developer you have to make choices and you might not know how you can use a DOCTYPE and when. In the next topic, I’ll show you the DOCTYPES you can use. You can also visit the W3C’s site for more information.
Different types of DOCTYPES
Of course, there are differences between HTML 4.01, XHTML 1.0 and XHTML 1.1. The DOCTYPE you have to choose depends on the language you have chosen.
HTML 4.01
Strict
1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">Transitional
1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">Frameset
1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">XHTML 1.0
Strict
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">Transitional
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">Frameset
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">XHTML 1.1
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">Conclusion
Now, do you understand why you need to add a DOCTYPE? If not, please read my article again or leave a comment on this blog. In my opinion, this is a code everyone should use, especially if you think standards are important for the development of the web!
Thanks for reading this article. Please send me an email or leave a comment.






Very informative. Will help beginners out alot.
Nice and helpful article.Thanks for sharing with us.
Hi,
Thanks for your artical, i learnt about DOCTYPE you explained very well.
Thanks once again,
jonathan
Thanks for your kind replies. A new article is coming up!
Edit: Visit the new article here!
Maybe you should explain why there are different doctypes and that you should allways try to use Strict.
The article is on the ‘DOCTYPE’ subject, not on which language and type you should use. Thanks for your comment.
thank you for this information!
Hello
Great book. I just want to say what a fantastic thing you are doing! Good luck!
Bye
thnx… nice site
nice site… look on my site
Hello,
Thanks for your comments guys!
@Music-Band: Thanks for your offer but an adult website isn’t the subject this blog is about. If you have any other sites, other than gambling, adult, we can talk.
That’s how it is. ,
Hey, i was surfing the web and i saw your blohg, pretty cool. May i link u from mysite?
Thats really cool information about Doc type files…and descriptions…
Thanks !!
[...] know. It is written in XHTML 1.0, so your browser will render your webpage the ‘XHTML 1.0’ way. You can read more information on DOCTYPEs here. We are ready to start with the rollover menu. First, we will only code the structure. If we have [...]
Thank you for sharing!
very interesting and informative! tnx pal!
Thank you very much for your clear explanation of what a DOCTYPE is. I will take a look at my site to make sure I used the right DOCTYPE! Thanks
Nice Article Dude
nice article frnd
Thanks for the information I never realized that the doc type was used to help render your website with browsers. Now thinking about it makes sense to have somewhat of a universal language that is accepted by multiple browsers.
Very informative, I was always looking for a decent article on this subject. I appreciate your information and look forward to learning more from your blog.
Great information i think most people with sites don’t even realize the importance of this and having a validated website.
Great information i think
[...] Those codes will tell your browser everything it needs to know. It is written in XHTML 1.0, so your browser will render your webpage the XHTML 1.0- way. You can read more information about DOCTYPEs here. [...]
Well, I havn’t still understood why are people using Transitional DOCTYPES for new projects? How can it make our work easier…
Very enlightening article, thanks for sharing, this was pretty useful.
I have been a frequent visitor of this blog for some time now, so I thought it would be a good idea to leave you with my thanks.
Regards,
Deana
DOCTYPE drove me nuts back when I started validating documents (and did not pass the test), because I had chosen the wrong type for the code I wrote. Looking back, I guess most folks would have done the same. Have you?
I enjoyed reading this article, its very interesting and i really learnt from it. Thanks for this great share.
Great article mate, a lot of people miss out on the basics , articles as such help getting a better understanding ,certainly helpful for beginners , will be looking forward to more. cheers!
thanks ive always wondered what a doctype meant i guessed it meant document type but didnt know anything after that.
[...] a Leave a Reply [...]
This is interesting article. You have nicely described. This information also helps to those who have no idea about it. Thanks for sharing…
I was recently trying to XHTML validate my wordpress blog and I had to learn a lot about DOCTYPE to get it accomplished – though I never really got the full hang of it. Thanks to your post here, I think I get the whole picture now.
Cheers.
Great information Stefan. I’m a newbie to this and this information helped me a lot in understanding the functions of the browser and doctypes. And the article was easy to understand. Fantastic job. Good luck and keep up the good work
Man, good thing I got an HTML guy to take care of this now. I did it for the first 6 months and was still just scratching the surface. Good article.
Great post. It is really very useful to me.
Thanks for the information I never realized that the doc type was used to help render your website with browsers. Now think that it makes sense, I will do.