Journalists' Toolkit > HTML and CSS > Top Lines in HTML and CSS

Top Lines in HTML and CSS

Let's look at the code behind the curtain in our HTML and CSS.

<!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" />

Above is a nice, correct start to a modern, standards-compliant HTML document. (See the bottom of this page for the HTML5 version.)

The doctype declaration

"The doctype declaration should be the very first thing in an HTML document, before the <html> tag. The doctype declaration is not an HTML tag; it is an instruction to the Web browser about what version of the markup language the page is written in."

Source: W3schools.com

If we fail to specify the doctype (or we do it incorrectly), trouble will ensue. These two pages explain:

The character set

In the old days (not so long ago), we used to do this:

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

Why has this changed?

As the world becomes more open-platform and cross-cultural, we need more flexibility in languages and character sets. ISO-8859-1 is fine for Western European languages, but limited in terms of other languages. So in the interest of being more globalized, we have changed from ISO-8859-1 to UTF-8.

UTF-8 emcompasses a much larger character set. ISO-8859-1 is smaller and thus more limited in what it allows us to do.

More information: Setting the HTTP charset parameter

The CSS file and UTF-8

At the top of our CSS style sheets, nowadays we can write this:

@charset "UTF-8";

If you omit these references to UFT-8, or you mix 'n' match incorrectly, you may see some strange results on your Web pages. These strange results (such as the appearance of the characters ) are explained here: Display problems caused by the UTF-8 BOM.

The function of @charset is this: It allows the author to specify the character-set encoding of the style sheet.

But do you need it? No. If the style sheet is external to the HTML document, it is assumed to be encoded using Unicode (UTF-8) unless otherwise specified.

The @charset rule is allowed to occur only once in an external style sheet and it must be the very first statement in the style sheet. It should be used only on external style sheets.

Source: @Charset - Cascading Style Sheet Syntax

What about HTML 5 and XHTML 1.1?

"HTML 5 is not a W3C recommendation yet!" Source: HTML 5 Tag Reference.

See the HTML and CSS Resources page for several resources for HTML5. A basic page will be coded like this:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>An HTML5 Page</title>
</head>

<body>
<p>Some text here.</p>
</body>

</html>

For information about XHTML 1.0 and 1.1, see this page at W3schools.com.

Creative Commons License This page was written by Mindy McAdams and updated on Jan. 12, 2011. It is available for re-use under a Creative Commons license.