Earlier this week, we posted about the differences between XHTML and HTML, which are pretty slight. They both use the same basic vocabulary (tags), and the overall same structure, but XHTML is stricter in its syntax than HTML.
So how do you know which one is being used at all, and how does the browser know which rules to interpret the document under?
That’s where the DOCTYPE comes in. Try this: go to any website and right click anywhere on the page. You should see an option to “View Source” which will pull up a bunch of code. This is the code that the browser is reading to render the page you’re seeing. If the site is built correctly, the first thing on the page should look something like this:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
This code tells the browser what kind of document you’re viewing, which in turn lets the browser know how to render it. In this case, the webpage is an XHTML document, which tells the the browser to hold the document to the more rigid rules of that language, instead of the more lax rules of HTML. If the document is written in HTML, the DOCTYPE might also include which version of HTML. This is not only helpful for the browser, but also for developers who may work on the site later.
Other important things to know about DOCTYPE include:
- The DOCTYPE tag is not technically written in HTML; it’s only an instruction to the browser.
- It must be the first item in the document, before the <html> tag.
- It is not case sensitive.
- Your webpage may not render correctly if you have the wrong DOCTYPE listed!
To check that your given DOCTYPE is aligned with the code you have on your webpage, you can run your site or page through the W3 Validator. This handy tool will not only tell you what problems you may have on your page, but what line they are on so you can quickly address them!