HTML Structural Elements Within the BODY Element

This section contains the structural elements which you could use as you create your posts via the Blogger post editor. Sometimes called block or container elementsyou can think of them as the building blocks of your content, or elements which contain contentthese bits of HTML markup can be found only within the BODY element of an HTML document.

Each of your blog posts is dynamically generated into a specific place in your Blogger template, already within the BODY element. However, there are also areas of your template that are within the BODY element but are not blog postsyour sidebar is a primary example. In these areas, as well as your blog posts, you can use the following container elements to hold specific page content.

Six Levels of Headings

HTML contains six levels of heading-related tag pairs: <h1></h1> through <h6></h6>. The <h1> heading is the largest, and the <h6> heading is the smallest. By default, your web browser will interpret these levels of tags using a generic stylelarge, bold fonts for the largest headers, smaller and nonbold fonts for the smallest headers. However, the styles for heading tags typically are outlined specifically in your stylesheet, if for no other reason than to ensure that the font family, style, and other text attributes match the overall look and feel of your template.

Headings should not be used simply to change the font size of specific blocks of text. Instead, they are meant to outline a hierarchy of contentthe overall title might be a level 1 heading, a subsequent heading would be a level 2, and yet another subsection of content would be a level 3 before another level 2 heading would be used, and so on. If you are using heading tags to outline the content of a post in this manner, do not skip a level; level 2 should follow level 1, level 3 should follow level 2, and so forth.

The only content that should go between the opening and closing heading tag pair is the actual heading. For instance:

 <h1>This is a Level 1 Heading</h1> 

If any other content appears between the tag pair, it will all be treated as a level 1 heading. For instance:

 <h1>This is a Level 1 Heading<br/> Here is some content</h1> 

Although it looks as if the user has typed some title text plus a line break plus another line of text, this entire text block would appear as a single level 1 heading.

Paragraphs

It should come as no surprise to you that paragraphs of content are often surrounded by the <p></p> paragraph tag pair. Unlike the heading tags seen earlier, paragraphs can contain other container tags such as those described later in this appendix. However, you might find that nested container elements cause more problems than they're wortha dropped or out-of-order closing tag can wreak havoc with your content display. So, if you want to display a paragraph of content followed by a list of items, followed by another paragraph of content, be sure to close the first paragraph tag, start and finish the list, and then start and finish another entire paragraph.

One important item to remember when typing content wrapped in paragraph container tags is that indentations and line breaks in the text that you type are not displayed as such when your content is viewed in a web browser. Line breaks are handled via the <br/> tag. Indentations can be hard-coded using a number of nonbreaking space entities (&nbsp;). Better yet, in Appendix B, you'll learn to modify the style of the <p> tag so that it indents the first line by a specific number of pixels. Appendix B also contains information on numerous other paragraph attributes, including text justification and line height, just to name a few.

Blocks of Quotations

If you've ever written a paper in school, you know that if you quote a significant amount of text you should set this text apart from the surrounding text. The HTML <blockquote></blockquote> tag pair is used specifically for this purpose. By default, your web browser will display content within the <blockquote></blockquote> using a generic font and by indenting the content a standard number of pixels. However, as you will learn in Appendix B, you may style the <blockquote> tag any way you chooseyou might want to indent the content by a particular number of pixels, or perhaps you want all the content to be italicized or on a differently colored background than the content which surrounds it. These attributes (and more) are all customizable.

NOTE

Content within the <blockquote></blockquote> tag pair can contain other block-level elements, including paragraphs and lists.

Ordered and Unordered Lists

HTML includes two types of lists: ordered and unordered. Unordered lists are often referred to as bulleted lists because the default indicator before the list item is typically the bullet character. Ordered lists typically have a numbered item indicator, one that increments as a list item is added to the mix. Both ordered and unor dered lists are typically indented, but that indentationboth the mere presence of it as well as the actual displayis customizable using stylesheet entries.

The structure of a list begins with the opening tag, either <ul> or <ol> depending on whether you want an unordered or ordered list. Following the opening tag are the list items, which are surrounded by the <li></li> tag pair. After the final list item, either the </ul> or </ol> closing tag is used, depending on the type of list.

This code produces a three-item unordered list, with each list item preceded by a bullet:

 <ul> <li>list item #1</li> <li>list item #2</li> <li>list item #3</li> </ul> 

This code produces a three-item ordered list, with the first item numbered 1, the second item numbered 2, and the third item numbered 3:

 <ol> <li>list item #1</li> <li>list item #2</li> <li>list item #3</li> </ol> 

NOTE

You can use line break tags (<br/>) or paragraph container tags (<p></p>) within list items. As long as the list item has not been closed, all its content will be indented.

To create nested lists, simply start and finish another full list before closing the outer list tag. For instance, the following code produces a bulleted item followed by three numbered items underneath it:

 <ul> <li>list item</li> <ol> <li>sub item #1</li> <li>sub item #2</li> <li>sub item #3</li> </ol> </ul> 

Your nested tables can be of the same list type, or as you see here, you can mix and match your lists. The most important aspect of lists, and especially nested lists, is that all the tags are opened and closed in the proper order.

NOTE

Some of the styles you can use to customize your unnumbered or numbered lists include the bullet style, the indentation distance, the line height, and the starting number for numbered lists.

Line Breaks and Horizontal Rules

Two very handy bits of HTML code are the line break and horizontal rule tags. The line break tag (<br/>) is used to force a line break between two lines. No additional whitespace is added; it simply forces the text to stop and then continue on the next line. The use of a line break is easily seen when typing postal addresses, when the address is within a set of paragraph tags:

 <p>Jane Doe<br/> 1234 Main Street<br/> Sometown, SomeState 99991</p> 

Without line breaks after the first and second lines, the output would appear as follows in your web browser:

 Jane Doe1234 Main StreetSometown, SomeState 99991 

However, with the line breaks the output looks like this:

 Jane Doe 1234 Main Street Sometown, SomeState 99991 

I'm sure you'll agree that the second example looks much more like a postal address than the first example! For additional space between lines, you may use two <br/> tags in succession or you can style your <br/> tag so that the line height is greater than the default used.

Like the line break, you can use the horizontal rule to insert a break in your content, but in this case the break comes with a visible line. The width, color, and style of this line can be customized via your stylesheet; you will learn options for doing so in Appendix B. In the meantime, just know that the horizontal rule tag (<hr/>) will produce a visible line with a forced line break above and below it.