Understanding the Overall HTML Document Structure

Although your Blogger blog has an overall template into which your posts are dynamically generated, at its core is a structured HTML document. For instance, your Blogger template has the same opening and closing <html> tags and the same BODY and HEAD sections as an HTML document you'd find on a static website. In the case of your blog, you can find the core structural elements in your template, whereas your posts contain secondary structural elements as well as basic logical or physical markup.

You should understand the overall structure of an HTML document, including the elements outlined in the following sections. Because you have access to the underlying HTML document structure through your ability to edit your Blogger template, you don't want to screw up the document by deleting something that looks extraneous when it's really not!

Document Type Declarations

Your Blogger template might or might not include a document type declaration. If it does, it will be the first line of your template and will look something like this:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"         "http://www.w3.org/TR/html4/strict.dtd">

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

As its name suggests, this tag declares the version of HTML used throughout the document. The first document type shown earlier says that the document should validate against the rules of HTML 4.01 (strict), whereas the second begins a document that should validate against the rules of the XHTML 1.0 (strict).

Your Blogger template will utilize an XHTML document type declaration, which is essentially HTML 4 but with more stringent rules. XHTML-formatted documents are backward compatible with web browsers and other user agents that can render documents in HTML 4, but they also position your content so that it can be rendered in XML-compliant user agents as well.

What does this mean to you, the average Blogger user? It means very little, actually, because the Blogger application handles the vast majority of document creation chores. However, if you plan to extend your template using CSS and customize your posts using a lot of HTML, you should write your code in a manner that conforms to the document type declaration in use.

NOTE

All markup used throughout this book is compliant with an XHTML 1.0 (strict) document type definition.

The HTML Element

After the document type declaration, your template should include the opening <html> tag. The very last line of your template should be the closing </html> tag. When your blog is published and viewed via a web browser, everything between these two tags is considered part of the HTML element and will be assumed to be valid HTML (or XHTML) markup.

The HEAD Element

After the opening <html> tag comes the opening <head> tag. Within the HEAD element come the TITLE elementsurrounded by the <title></title> tag pairas well as any <meta> and <link> tags you want to use, stylesheet entries, and script elements such as JavaScript functions.

When extending your blog with third-party links and applications, you will often be instructed to place specific scripts in your template. For instance, if you use the Haloscan commenting and trackback system, you will be given a snippet of code to place in your template, something like this:

[View full width]
 <script type="text/javascript" src="/books/2/863/1/html/2/http://www.haloscan.com/load.php?user=yourUserName">< /script>

This code snippet will go within the HEAD element of your template. After including additional items within the HEAD element, close it using the </head> tag.

The TITLE Element

The title of your document is placed inside the HEAD element, contained within opening and closing <title> tags. For example: <title>My Blog Title</title>. No other information goes within the <title></title> tag pair. For the sake of maintaining a well-organized template, place the <title></title> tag pair directly after the opening <head> tag, before other elements within the HEAD area.

The `<meta>` and `<link>` Tags

Both <meta> and <link> tags contain various information about the documentnot actual document content, just information about it. For example, a common <meta> tag uses the "keywords" value for the name attribute to provide keywords applicable for the document:

 <meta name="keywords" content="open source, mozilla, firefox, blogger, flickr"/>

<link> tags work similarly, except the additional information provided is gathered from a link rather than the content attribute of the tag. For instance, the following <link> tag provides information regarding an RSS feed for my blog:

[View full width]
 <link rel="alternate" type="application/rss+xml" title="RSS" href="http://feeds.feedburner .com/NoFancyName"/>

Your Blogger template will contain several <meta> and <link> tags related to the Blogger application and the publishing process. Do not to remove any <meta> or <head> tags unless you completely understand their purpose and, more importantly, understand what will happen to your blog if you remove these items.

Stylesheet Entries

A standard Blogger template contains stylesheet information directly in the template, located between opening and closing <style> tags, within the HEAD element. Additional stylesheet information can be imported from external URLs, such as the following code used to import the Blogger navigational bar that can be found at the top of most blogs:

 @import url(http://www.blogger.com/css/navbar/main.css); @import url(http://www.blogger.com/css/navbar/3.css);

Even if your stylesheet information is pulled in from external URLs, these lines of code will be wrapped with <style> and </style> tags and will be present in the HEAD element within your template.

The BODY Element

After the closing </head> tag comes the opening <body> tag. All document content should be placed within the BODY element, which is closed using the </body> tag. The </body> tag should be the next-to-last tag in your template, followed only by the closing </html> tag.