START A COURSE

The HTML and CSS Blog:

What You’ll Learn in This HTML Lesson

what is a doctype bunny

Inquiring bunnies want to know

What is a Doctype? Why do you need one?This is a short and simple post explaining all that gobbledygook at the top of your HTML page. I’ll introduce you to the different Doctype declarations: the strict XHTML type, the transitional Doctype, the basic HTML4 Doctype, and I’ll introduce the newer, simpler, HTML5 Doctype.

What Is the Doctype?

Just like everything else on the WWW, HTML is constantly evolving. This means every now and then there’s a new standard of HTML. The World Wide Web Consortium (W3C.org) maintains HTML, and goes through a process of reviewing comments, discussions, improvements, and ratifications of the HTML language. It’s all HTML, but sometimes we get an upgrade. Thus you have to make clear which kind of HTML you’re going to be writing in.

All HTML Pages Need A Doctype Declaration

The very first tag on a page defines the version of HTLM being used. This tag is called a Doctype, because it tells you what kind of HTML document the browser is dealing with. As you may have noticed, just like cars, cell phones and Michael-Bay movies, every few years brings a newer version promising new features. If you are missing the Doctype, your browser will have to guess which kind of HTML you are using and this could cause errors.

funny michael bay meme from moviepilot

Fortunately, we didn’t let Michael Bay design HTML5 [image via MoviePilot.com]

Since the <doctype> tag usually appears first, put it just before the <html> tag. It’s nice to inform the browser what to expect from your code; not only are you using the <html> tag to tell it which language is being used, the <doctype> tag informs it which standard of HTML you intend to use. Is it old HTML 4.0 or clean and consistent and respectable XHTML 1.0? Are you using HTML5? If you are using XHTML, are you using strict or transitional standards? How picky are you?

Any Doctype Is Better Than No Doctype

The most important thing is to have SOME Doctype specified…it may not be that important which version you choose to use. If there is no Doctype at all, Internet Explorer freaks out over the lack of information and goes into something called “Quirks Mode.” It more or less assumes the worst-case scenario, like you didn’t tell me what version of code you are using so I’ll assume it is so old that CSS doesn’t even exist and some of our formatting probably won’t work. Grreeaaat.

The Doctype declaration must be exact (both in spelling and in case) to have the desired effect, which makes it sometimes difficult. Fortunately, you don’t really need to memorize the HTML page’s Doctype. Most people just save a blank HTML document in their text editor that has only the Doctype. This serves as a template. Or you may bookmark this page, and just copy and paste the Doctype when you create a new web page. If you are working in a program like Dreamweaver, the Doctype is added automatically when you tell it what kind of HTML page you want to make.

To make your work easier, below is a list of recommended Doctype declarations that you can use in your Web projects.

doctype

The Most-Used Doctype Declarations

XHTML 1.0 Strict Doctype

Use this Doctype to indicate your code is written with strict syntax, clean and consistent.

This is a fairly common Doctype, as web developers have been following stricter XHTML standards for the last 15 years or so. This standard will work forwards and backwards, and indicates you are writing very clean HTML, following stricter XHTML standards. Confused? Here’s more information on strict XHTML.

I prefer “Transitional” rather than “Strict” just because I get flagged on less errors when I validate code. It’s like saying you are picky, (XHTML transitional) but not obsessive (XHTML strict).

XHTML 1.0 Transitional

XHTML 1.0 Strict Doctype

 HTML 4.0 Doctype

This Doctype was common in the late 90’s. Prior to the development of XHTML strict standards, we wrote our code in the HTML 4 standard. Although web browsers still display HTML4 sites, it seems quite old to me. Mostly this Doctype screams: “I haven’t changed my website in over a decade,” or “my web developer isn’t staying up-to-date with changing standards.” But hey, if that’s the version of HTML you want to use, you’re going to need this HTML4 Doctype.

XHTML 4 Doctype

 

Internet Explorer quirks mode lizard

Much like this seemingly-friendly codeasaurus, lack of a Doctype drives IE into a crazed frenzy. Seriously you don’t want to see this codeasaurus get angry.

The HTML5 Doctype

Use this Doctype to tell your browser you are following the latest trends, using all the newest tags, and are leading the cutting edge.

This is my favorite Doctype. It’s really easy to remember. The HTML5 Doctype is remarkably short; the philosophy is that the browser should know what the specification is, and all we need to do is use HTML as our Doctype and we’re done. Short and sweet: I like it. It looks like this:

<!doctype html>

Yep, that’s it. It doesn’t even have the number 5 in it! How flexible is that!

The HTML doctype is very short

The HTML 5 makes everything simple

Doctype Declaration for Validation

It can be handy to use the Doctype to help you check for errors. The World Wide Web Consortium offers an automated validation service to check for errors in CSS or HTML markup. I usually just Google “HTML Validator” and look for the w3org HTML validator (why memorize anything more than I need to?).

Just like you browser, the validator needs a Doctype to validate; it needs to know what your expectations are. Do you want to know if your break tags are self-closed, like you would if you followed strict XHTML standards? Or are you using HTML5 looser standards? The Doctype will affect how the validator decides what is an error and how much to report to you.

When validating code, the HTML Doctype makes a big difference in the error report. The XHTML Doctype triggers the validator to report as an error missing slashes in self-closing tags, and missing “quotes” around values. The HTML5 Doctype isn’t worried about strict syntax, it cares about semantic web. Semantic is a fancy way of saying HTML should be used to describe the structure and content of your web page, not its appearance. So, validating with the HTML5 Doctype produces errors if you use HTML to control anything visual. The error says “This is obsolete. Use CSS instead” to encourage coders to use the CSS language for all visual formatting and design (colors, fonts, sizes, layout).

Thus, when you want help finding errors, choosing a Doctype has a big impact on what is going to show up on your error report.

World Wide Consortium

Brain Snack: You try it!

Learn HTML with this Activity:  Pick five of your favorite websites. View source code in existing websites and identify which Doctype declaration your favorite sites are using.

How to view source code:

Right-click on the web page you are viewing and look for “View Source Code” in the menu. It is interesting that you can see the actual HTML code for websites!

Here’s a short video that will show you how to view source code in a web browser:

Brain Snack: You try it!  

Learn HTML with this Activity: Create your own template with the Doctype declaration in place and the basic HTML tags required to create a page. Here are two examples, one using the XHTML transitional Doctype, and the other using the newer HTML5 Doctype.

XHTML Template

Here’s an example template created using the XHTML transitional Doctype declaration:

HTML5 Template

Here’s an example template created using the HTML5 Doctype declaration:

 

 

 

 

The Easiest Way to Learn HTML and CSS
Hi! I'm Diane. I'm an experienced web design teacher in San Francisco. I produce music videos to help new coders learn HTML. I'm dedicated to helping you learn to code, with tons of songs, videos, tutorials and activities. All our tutorials are free and we're adding new lessons every day. Subscribe to get the latest post in your inbox.
  • Pingback: HTML5 Tutorial: The New HTML5 Doctype - Learn HTML with Diane()

  • Robert Stehlik

    I tried creating an RSS feed for my Roku channel but keep getting this error code when trying to upload it to Roku. It has been validated but says no doc type.

    e feed URL(s) could not be validated.

    Failed to parse the feed with the following XML error: ‘Error: Forward-slash in opening tag not followed by > Line: 26 Column: 136 Char: <'.

    any help would be great.

HTML Lessons

©2013 Diane Presler. All rights reserved.