{understanding HTML}

Understanding Basic Blogger HTML

Introduction

The layout of your blog is controlled by its template. Having an understanding of the basic structure of a template comes in handy when dealing with your Blogger blog. This article will take you through the main sections of a Blogger template explaining each section in very simple terms.

The Outline

At the highest level, the template can be viewed as comprising three sections. They are:

• the Header, which is the head element of the HTML document
• the Skin, which is contained inside the header and
  
• the Body, the body element of the HTML document
  

The header defines meta information about the document, the skin defines the look and feel of your blog and finally the body is what contains all the columns and widgets that form the blog.

The Header

Header section has the usual items contained in the head of an HTML page. The title of the page is included here. When your blog's main page or an individual post page loads up, the piece of code data:blog.pageTitle will be replaced with the actual title for that page. The header also contains certain meta elements. For example, the Google Webmaster Tool uses a meta element to verify the blog ownership.

The first two lines of the template carry some technical information which you don't really have to understand. However, for the sake of completeness, here's a brief description on them. The very first line in the blog declares that this template is an XML document. In fact, the template is an XHTML document, which is a type of an XML document. The next line is a DOCTYPE declaration and that tells the browsers the Document Type Definition (or DTD) that is applicable to the template.

The Skin

The skin is embedded inside the header. Understanding the skin section is vital for being able to tweak your blog's template. The skin, as the name suggests, defines the look and feel of your blog. In other words, it is the skin that carries all the styling (or presentation) and layout information of a blog.

It is comprised entirely of a set of Cascading Style Sheet (CSS) declarations or rules. Each rule of CSS defines certain values that are applied to the different HTML elements such as the paragraphs ( the p element), headings (the h1, h2, ... elements) etc. A full explanation of CSS is beyond the scope of this article. For now just remember that it is the skin that controls whether hyperlinks in your blog should appear underlined or not (with the text-decoration property set to none) or whether your sidebar should have a border or not (using the border property), and so forth.

The Body

This is the placeholder for all the content of your blog. The blog's header (don't confuse this with the header of the HTML page), the main posts area, the sidebars and the widgets, all go inside the body. Note, however, that the body only defines which element contains which element or, in other words, which element is contained inside which element. This is the containment hierarchy of the blog. As explained above, the styling of all these elements are handled by the CSS rules defined in the skin.

When you add a widget using the Add Page Element feature, it gets included in the body section. Again it is important to remember that the body of the template only has placeholders for the widgets, sidebars etc. The actual content is filled only when the blog loads up in a browser window. The contents are pulled from the Blogger's database and are sent to the browser when a visitor actually views the blog.

Summary

In conclusion, remember that a blog's template consists of three sections: the header, the skin and the body. The header mostly contains meta data which you don't have to tinker with that much. Most of the customizations done to a blog are done in the skin and the body sections.

resource