A Blank Page

Often times people start with invalid HTML documents before they’ve even added any content to the body. What? You say. How can that be? Well the answer is that they don’t have a proper doctype, HTML element or HEAD element. These all do more than you think to control how a page looks

Doctype

This tells the browser what kind of HTML you are writing. Yes, there is more than one kind. Currently HTML5 is the new kid on the block that is taking over. The good news about HTML5 is that the doctype is much simpler.

<!DOCTYPE HTML>

However not all browsers are up to HTML5 speed yet so it still pays to learn the other doctypes. They’re much longer and nobody really memorized them you can just copy and paste. While there are more the four that most people use are:

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

For more information on these doctypes visit http://www.apaddedcell.com/choosing-doctype-website

It would take too long to go through all of the details of which one to choose and why on this page. The short answer is that if you are creating a new site you should use one of the strict doctypes and if you are converting a site from an earlier version of HTML or one that wasn’t properly marked up then use a transitional doctype.

You will often see the XHTML strict doctype on this site.

REMEMBER the doctype is the FIRST thing on the page. Before your HTML tags or anything else.

Language and Character Encoding

For more information on setting language and character encoding see this page http://www.w3.org/International/techniques/authoring-html

And this page has links to lots of more information on character encoding: http://www.w3.org/International/tutorials/tutorial-char-enc/

The Web is everywhere and of course language is important. There are two types of language definitions you give on a page, Language and Character Encoding.

Language is just to tell search engines and other people who might want to know what the main language of the page is. This definition is purely informational and has no bearing on how the page looks.

The easiest, and best, place to do this is in the html element itself with the lang attribute
<html lang="en">

If you’re using an XHTML doctype then you would use

<html xml:lang="en" lang="en">

Yes it’s in there twice. While we’re at it XHTML requires a namespace as well so the proper XHTML is

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

Character Encoding

Character Encoding is very important to how your page looks. In computers everything is binary (1′s and 0′s) so the computer uses numbers to represent letters. This is called Character Encoding. For example 65 is A in ASCII. What is ASCII? It’s one of the early ways people translated letters and other typographical symbols into numbers. The problem is that it could only represent 128 characters (256 in the expanded version). For a language like Chinese with thousands of characters that just won’t work. So a number of different character encoding options arose. Eventually people realized it would be easier if there were just one and Unicode was created. Unicode has numbers for most characters in most languages and is now the default character encoding you an use in HTML.

Let’s look at what happens with and without proper character encoding definitions. Here is a screenshot of a page with no character encoding defined:

Notice how the Japanese and Cyrillic characters don’t show up properly.

And here is the same page with UTF-8, a Unicode character encoding:

Image of a page with proper character encoding. Characters in other alphabets show up properly.

You set the character encoding with a meta tag in the head element of your document. Here it is with the head and title elements also included:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

Here is an example of a blank XHTML Strict document that you can use to start writing HTML. If you start a page in Dreamweaver and it writes some of this for you either edit that to include these things or just copy this and paste it over what Dreamweaver wrote.

blank_xhtml_strict.html

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>