Long Overdue 2021 Update! xD
Nowadays you'll want to use the modern, HTML5 doctype: The code for that is simply:
<!doctype html>
I'll leave the rest of this chapter here for "old time's sake", but yeah use the doctype above!
I've taught you how to build a web-page, and how each of the different parts work. There's one last thing however that we need to look at, and this is the document type, or doctype. This goes right at the start of the HTML, before the <html> tag and tells the browser what type of HTML document you are using. There are several different types of HTML document, and they are all very similar, but allow you to do different things. Here is an overview of the most common doctypes:
- XHTML 1.0 Strict - This is the most clean, strict HTML doctype. It is based on a language called XML (which is where the X comes from). This doctype forces you to separate structure and content from presentation. Everything I have taught you is based on this doctype, so you should have no problem making your web-pages XHTML Strict compliant.
- XHTML 1.0 Transitional - This doctype allows you to mix in some outdated presentational information within your HTML. Before the web became advanced as it is today, people would not use CSS and would mix attributes into HTML that had CSS like functionality. Unfortunately there was no real standard and each browser interpreted these differently, which is another reason CSS was create. Everything I have taught you in these tutorials is completely compatible with this doctype.
- XHTML 1.0 Frameset - This doctype is the same as the transitional doctype, except that it also allows you to create a frameset. A frameset is where you divide up your web-page into frames. Each frame points to a web-page of it's own, and you can make it so that clicking the links in one frame will change the page that another frame points to. This is useful for navigation, but also an outdated technique that is not good for search engines and comes with a flurry of problems of it's own. Frames still have their uses (for example in web applications like the Tryout system you've been using throughout this tutorial), however I do not recommend them for general website building, and that is why I have left them out of this tutorial.
HTML 4.01 Strict, HTML 4.01 Transitional and HTML 4.01 Frameset
Before XHTML 1.0, people used HTML 4.01. HTML 4.01 is very similar to XHTML 1.0, and changing your code from XHTML 1.0 to HTML 4.01 and vice versa requires very little work (99% of it is frankly exactly the same). The benefit of using XHTML 1.0 however, is that it is much more clean than HTML 4.01, and this is because of the XML component of XHTML 1.0. Older browsers will also support XHTML 1.0 because of how similar it is to HTML 4.01, and XHTML 1.0 is also now the modern standard and is has been designed so that it will survive the test of time and will be compatible with all future web-browsers.
Here's the Code
And so, here's the code ready for you to copy and paste at the top of your website. Like I say, really you should be using XHTML 1.0 strict, which is compatible with everything I have taught you in these tutorials, but just in case you ever need them I will put the other doctypes here for you as well.
| Required Doctype | HTML Code |
|---|---|
| XHTML 1.0 Strict | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
| XHTML 1.0 Transitional | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
| XHTML 1.0 Frameset | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> |
| HTML 4.01 Strict | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
| HTML 4.01 Transitional | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
| HTML 4.01 Frameset | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> |
A bit more techy stuff
The second thing required for your XHTML 1.0 Strict code to be valid is that you choose which version of XML you would like to base your HTML on. This is done using the xmlns attribute, which is an attribute of the html tag! Again, it would be quite difficult to remember this, so instead you can copy and paste it from here. Replace the opening <html> tag in your web-page with:
<html xmlns="http://www.w3.org/1999/xhtml">
Specifying Character Encoding
And finally, you also need to specify a character encoding for your web-page. Simply, this tells the browser which range of characters your web-page is going to be using. Except in rare circumstances, you should be using utf8, which will generally give you all the letters, numbers, and symbols you need. The character set is actually specified in the <head> section in the document. You need to put the following code anywhere in the <head> section for XHTML 1.0:
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
If you're using HTML 4.01, you just take the space and the slash out from the end.
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
Here's the code for a minimal, working web-page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Blank web-page</title>
</head>
<body>
<p>Hello world!</p>
</body>
</html>
You may wish to simply copy and paste the above code when you want to start a new web-page from scratch.
How do I Know if My Web-Page Complies with the Version of HTML I am Using?
Fortunately, the inventors of HTML, called the World Wide Web Consortium, or W3C for short have a free service called a HTML validator which you can use to check your web-pages are valid. This service checks that your code conforms with the doctype you have chosen. The great thing, is that in doing this it also picks up mistakes in your code, and so you can use it to fix any errors that you missed when creating your web-page!
Why Validate?
As you've seen from the the demonstration code throughout these tutorials, your web-pages will still render perfectly well even without the stuff in this chapter. The reason for this is that web-browsers and will render web-pages the best they can even if the web-pages are not actually standards compliant. There are benefits however to utilizing the techy stuff I have displayed in this chapter:
- Standard compliant code will work the same way on all modern and future web-browsers
- Standard compliant code is backwards compatible, future compatible and works now.
- Using the validator allows you to spot mistakes you may have missed
- It looks professional. Big companies often require their web developers to conform to modern web-standards
Of course, in the end it's up to you, but I hope I have displayed here that standards compliance is the right way to go, and that you appreciate the benefits above!
Now that the techy stuff has been covered, I ask that you take the final quiz, since the next chapter... is the last...