Guide to HTML Layout

Introduction
Layout means where you place what. From a technical point of view it also means what element do you use for a purpose and where.

A containing block is a containing element. A containing element is an element that can house other HTML elements. Normally you would partition your web page with containing elements. Inside each Containing element you have to put small HTML elements.

This article gives you a guide on how to place the small elements in the containing block. In this blog, I wrote an article titled, Layout with DIVs instead of Frames for HTML. You should read that one before reading this, as that one shows you how to partition your web page with DIV elements.

You need basic knowledge in HTML and CSS to understand these two articles.

Note: If you cannot see the code or if you think anything is missing (broken link, image absent, text), just contact me at forchatrans@yahoo.com. That is, contact me for the slightest problem you have about what you are reading.

Examples of Containing Elements
Examples of containing elements are the BODY, DIV, Paragraph, and FORM elements. So far as this article is concerned, the most important containing element is the DIV element. Note: the List elements (UL, OL and DL) are also containing elements (block-level elements); however they receive special HTML elements (LI, DT, DD accordingly).

In a partition, you can still have small containing elements like the Paragraph element.

Layout in a Containing Block
Here, I want to guide you on how you place your elements in a partition (containing element). This section will carry you till the end of the article.

Right element for the right purpose
Use the right element for the right purpose. Use a Radio Input Element when you want a Radio Input and not a checkbox. Use a Paragraph element when you want a Paragraph and not a DL element. Use an unordered list element when you have an unordered list and do not use hyphens with line break elements.

Use of Line Break Element
Use a line break element to force the next inline element to the next line. Of course you force the next inline element when you want to. Use an extra line break element when you want a blank line of the text (font) height. Just note that two consecutive line break elements result in at least one blank line.

Short Sentence
If all you have to put in your containing element is just a short phrase or short sentence, you do not need a paragraph element. Under this condition, you can force the next element to the next line using a line break element. Use a paragraph element when you actually have a paragraph. If you have a series of paragraphs, use a series of Paragraph elements for that.

The SPAN Element
If in a long line of text, you want to give a phrase a particular look, put the phrase in a SPAN element. Use the style attribute of the SPAN element or CSS to give the look. You can get more of this in a CSS course.

Floating
You can push an image to the extreme left of the containing element or extreme right of the containing element, using the CSS float property. Under this condition, text would be on the top, side and/or bottom of the image. Under this condition, the image height does not determine the height of any line as it would in many cases. Under this condition, the image of does not occupy any line even though it occupies its space. To float an image left, use the following style attribute in the image tag:

style = "float:left";

To float an image right, use the following style attribute in the image tag:

style = "float:right";

Floating does not only work with images; it works with any inline element. An image is an Inline element. You float an image anywhere within your text. The image can be in any of the text lines of your page. It just goes left or right depending on the value you give.

Center Alignment
A heading (H1, H2, H3, H4, H4, or H6) always occupies one line from the left edge of the containing element to the right edge of the containing element. An H element is actually a containing block, but it is meant to take just one line content. By default, the content (text phrase) of the H element is left aligned. To have it center align, use the following CSS property and value for the H element:

text-align:center

You can apply this property to any smaller containing element that is inside your partitioning containing element. An example of such an element is the Paragraph element (as well as the H element). So, if you want the content of your paragraph to be center align use the above property and value for the style attribute of your paragraph element or in the CSS Paragraph rule set.

The "text-align:center" is applicable to inline elements, not only text.

This center alignment feature works in a horizontal perspective (centering the H text for example). There is no corresponding feature yet for the vertical perspective; for example, you cannot center text vertically in a DIV element. However, vertical centering is possible with the cell (TD element) of a TABLE element. Be careful, when using the TD element; it is not really a containing block.

Text Justification
If you type the following CSS property and value in the style attribute or CSS rule of a containing element, the text in the containing element would be justified:

text-align:justify

I like this. So if you have this for the Paragraph element, the text of the paragraph element would be justified. Now, if you have this for a partitioning element (DIV), the text immediately inside the partitioning element would be justified, and the text inside a smaller containing element, which is inside the partitioning element, will also be justified.

Justification and centering use the CSS text-align property.

Title of Web page
It is good to make the title of your web site (home page) an H1 element instead of an Image. The Search Engine companies would prefer, you have it as an H1 element instead of an image.

The Logo
A logo is an Image that identifies your company. A logo for a web site is not obligatory but will give an image identity of you, to your customers. The Mercedes company logo for example is a circle with three radius lines inside.

Partitioning your Web Page
In the article, Layout with DIVs instead of Frames for HTML, I explain how to partition your web page. The partitioning (layout) I give you here is common, but very effective and popular. It is one of the examples I explain in the article. Here each partition is a DIV element. Display the code in a browser and read what I have typed at the displayed page. To see an example of such a developed professional web page, click, http://www.cool-mathematics.com .

This is the code:

"http://www.w3.org/TR/HTML1/DTD/HTML1-strict.dtd">

Title, logo and/or banner goes here.

Links can go
here.

The main
page content goes here.

If you had tried the code, you would have notice that there are border lines that mark out the DIV elements. There are three DIV elements. To remove these borders, remove the following code from each of the three DIV's style attribute:

; border:solid 1px black

Layout means where you place what. From a technical point of view it also means what element you use for a purpose and where.

We can stop here. I hope I have given you a good guide.

Chrys