All HTML documents have the same basic structure. There is a canned set of element tags that go at the beginning of the document, and a canned set of complimentary element tags that go at the end. The four major parts of an HTML document are: the DOCTYPE declaration, the root element, the <head> element, and the <body> element.
When a web browser interprets the code in an HTML document and displays it on screen in the form of a usable web page, this is called parsing the document. In order for the web browser to correctly parse the HTML code and render the web page, it needs to have these four basic elements written correctly.
These tags tell the web browser two things right off the bat: that the document it is downloading is HTML, and which specific type of HTML it is. They also contain the instructions that the web browser follows in order to render the web page on the screen.
DOCTYPE HTML PUBLIC ¡ What?
The very first line of any HTML document needs to be the DOCTYPE declaration. DOCTYPE is short for Document Type, and this line of code is used for telling the web browser the specific version of HTML in which the document is written.
This series of tutorials is focused on good HTML markup practices and the creation of standards-compliant documents, so the DOCTYPE declaration that we¡¯re going to use is HTML 4.01 Strict:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Basically what this line of codes does is point the web browser to the specific Document Type Definition (DTD) that outlines all of the rules, elements, and attributes of HTML 4.01 Strict, and applies those rules to the web page being loaded. Let¡¯s move on now, this is making my head hurt.
The Root Element
The root element of an HTML document is the container that holds the <head> and <body> elements. It is composed of an opening tag and an end tag. The root element¡¯s opening tag comes on the very next line after the DOCTYPE declaration, and its end tag is the very last line of the document.
The opening tag and end tag of the root element have traditionally always been as follows:
<html>
Head, body, and all page contents go here.</html>
At this point, we¡¯ve got the first two lines of an HTML document. The first line is the DOCTYPE declaration, and the second line is the root element¡¯s opening tag.
What I like to do at this point is to hit Enter (or Return) about a dozen times to create some space, and then go ahead and type in the root element᾿s end tag as well. Then I click at the beginning of the third line in the document, and move on to the <head> element.
The head Element
The <head> element contains descriptive information about the web page. Some of it is visible to the user, and some of it is not. This descriptive information is called metadata, which basically means data about data. In this case, it¡¯s data about your HTML document.
The <head> element has an opening tag and an end tag just like any other non-empty element:
<head>
(a few other elements are nested here)</head>
Several other elements need to be nested within the head element, the most important of which is the <title> element. This is the document title that will appear in the bar across the top of a web browser window. It will also appear in search engine results, directory listings, and most other links to your web page.
The <title> element is a non-empty element, and is nested within the <head> element as follows:
<head><title>This is the Title of the Web Page</title></head>
The other elements that need to be nested within the <head> element are all metadata. That is, they contain descriptive data about the web page, but don¡¯t actually appear on the web page. They are appropriately called <meta> tags. There are several of these that are highly recommended in HTML documents. Please always include them:
<head><title>This is the Title of the Web Page</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta http-equiv="Content-Language" content="en"><meta name="robots" content="all"><meta name="author" content="Author"><meta name="copyright" content="Copyright (c) 2007 Author"><meta name="description" content="The description that you want people to see when your web page appears in search results."><meta name="keywords" content="pertinent, keywords, and key phrases, that, accurately, give, the gist, of what, this page, is about"></head>
Notice that the <meta> tags are empty elements, but they do contain required attributes. The set of <meta> tags that I᾿ve provided here assumes that your language is English, which I gather is a relatively safe assumption given that you¡¯re reading this tutorial.
The first two <meta> tags, the ones that contain http-equiv, need to be present in order for the web browser to parse the document with the correct character set and language settings. Don¡¯t modify these two, just copy and paste.
The rest of the meta tags need to be customized for each web page that you create. Please use these as a template, just make sure to fill in the correct information in their content attributes.
Alright, so we¡¯ve got a DOCTYPE declaration, a root element, and a <head> element. We only need to have one more major element in place, and then our HTML document will be ready to be fleshed out with some page content. Click on the line below the <head> element¡¯s end tag, and let¡¯s move on to the <body> element.
The body Element
The <body> element is the area where all other markup elements¡ªyour web page content¡ªbelong. This is where you put all of your headings, paragraphs of text, numbered lists, bullet lists, hyperlinks, images, videos, Flash applications, forms¡ªyou name it. Everything that is visible in the web browser window belongs between the opening tag and the end tag of the <body> element.
There are no preset attributes that have to go along with the <body> element¡¯s opening or end tags. This one is as simple as it gets:
<body>
All of your page content goes here.</body>
Tying It All Together: A Skeleton HTML Document
Here comes the fun part. Are you ready to see what this entire page of geek babble (it¡¯s a technical term) boils down to? You now know how to produce a skeleton HTML document template, which you can keep and reuse as many times as you want. I created this template for myself back in 2004, and have reused it at least two or three thousand times. See below for the completed product:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><title>This is the Title of the Web Page</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta http-equiv="Content-Language" content="en"><meta name="robots" content="all"><meta name="author" content="Author"><meta name="copyright" content="Copyright (c) 2007 Author"><meta name="description" content="The description that you want people to see when your web page appears in search results."><meta name="keywords" content="pertinent, keywords, and key phrases, that, accurately, give, the gist, of what, this page, is about"></head><body>
All of your web page content goes here.</body></html>
When you examine the source code of any web page that¡¯s written in HTML, there will be many more markup elements than just these. When you boil away all of the madness, however, they all fit into this same basic shell (or a similar variation of it).
discuss this topic to forum
