MAT 125: Web Design 1: Fundamentals : Using Doctypes

What is a DOCTYPE?

A DOCTYPE or document type declaration at the top of your html page tells the browser/validator which version of HTML or XHTML you are using to build your code. DOCTYPES are key at making your pages web compliant. Your markup and CSS may not work correctly without them.

Without a DOCTYPE, the browser goes to "Quirks" mode - complying with outdated standards from the late 1990's.

Doctypes come in different standards. Strict ones are exactly that, they expect your code to be completely compliant to work correctly. Transitional ones are the easiest ones to use. They are more forgiving. You should work towards making your code completely XHTML compliant. This means an end tag for every tag you open (the empty tags such as img or br are the space and then the slash - />), using quote marks for every value, all tags written in lower case letters. The more we all use this standard, the sooner browsers will display our hard work more consistently.

Choose one, copy and paste it in the head of your document.

DOCTYPEs to Use

XHTML 5

HTML 5:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
</head>

As you can see, the doctype for HTML5 is very simple


HTML 4.01 Strict or Transitional

STRICT:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
</head>

TRANSITIONAL:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
</head>


XHTML 1.0 Strict or Transitional

STRICT 1.0 XHTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
</head>


TRANSITIONAL 1.0 XHTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>


XHTML 1.1 DTD

STRICT XHTML 1.1:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>