SummaryEach time I begin to code a page, I have to consider a few basics. These are things anyone who codes pages should be aware of already, but for those new or who would like a concise outline, here are some thoughts on: Document Type Definitions (DTDs), especially Doctype declarations; head elements, including metadata and relative links; and stylistic choices related to good practices.
NOTE: Throughout, we will use » to indicate a line-wrap.
DTDsUsing X(HT)ML requires an XML declaration including version information at the start of the page. For this purpose, I generally use: However, you can choose to use any particular version of XML your heart desires. Following this is the Doctype declaration, which must be the first item in the file if not using XML (and hence requiring the XML declaration to be the first item of the page). For the Doctype declaration, we want to let the browser know what format our page is using. Hence, when using HTML 4.01 Transitional, you should use:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 » Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">And when using XHTML 1.0 Strict, you use:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 » Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- » strict.dtd">I myself use the latter on my websites, but here is a convenient list of other Doctype declarations:
HTML 4.01 Frameset<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 » Frameset//EN" "http://www.w3.org/TR/html4/frameset.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 Strict<!DOCTYPE html PUBLIC "-//W3C//DTD HTML » 4.01//EN" "http://www.w3.org/TR/html4/strict.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"">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 Strict<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 » Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- » strict.dtd">XHTML 1.1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML » 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">Further examples can be found on the W3C website at
http://www.w3.org/QA/2002/04/valid-dtd-list.html.
NOTE: Do not forget to include the xmlns attribute in your html tag if you're using xhtml:
<html xmlns="http://www.w3.org/1999/xhtml" » xml:lang="en" lang="en">Head ElementsThe W3C page referred to above mentions the following meta tag which I personally use and would like to endorse:
<meta http-equiv="content-type" » content="text/html;charset=utf-8" />This is also obviously the place to declare a linked stylesheet, unless using the
@import feature of CSS, with the following declaration:
<link rel="stylesheet" href="cv01.css" type="text/css" />The W3C also recommend using
<meta http-equiv="Content-Style-Type" content="text/css" /> to let the browser know how your page is styled. Obviously this may be different for you if you're using XSL(T) with your X(HT)ML.
I also think this is a good place ot include any
<script> tags used throughout the page, as they share a similar relationship to the page as your stylesheets do.
General Style for EncodingGood practice dictates that we use comments and whitespace in our code to make it more legible (read: human readable). I, for the most part, am not in the habit of commenting my web page code as it tends to be fairly intuitively laid out. This is aided, though, by my careful use of whitespace: while using a tab for each layer of code may result in a blocky-looking text file, using a space for each level aids legibility and is still generally sufficient for most distinctions. For example, a basic page template:
<? xml version="1.0" encoding="utf-8"?><!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" » xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" » content="text/html;charset=utf-8" /> <link rel="stylesheet" href="cv01.css" » type="text/css" /> <title> The Page's Title </title> </head> <body> <p> The Page's Content </p> </bodyl> </html>If your page is particularly complex, adding a few blank lines, for instance between
</head> and
<body> can add clarity. Comments are always a good idea, especially on collaborative projects or pages that you aren't likely to work on for a long time.
ConclusionWhile this has by no means been a comprehensive outline of good practices for encoding modern web pages, I hope that it aids you at least as a summary or reference regarding DTDs, head elements, or stylistic choices. Make your code legible, and make sure that browsers know how to handle it.
