HTML Help & Resources

Generic Block Level Containers

The DIV tag, thanks in part to the flood of templates on the market, has supplanted the TABLE tag, as the most commonly used container. However, with the emergence of cascadding style, and the great flexibility it provides, designers have found the DIV tag provides more design capabilities as opposed to TABLES.

It has been documented, in various blogs and websites, on the Internet, that nested elements inside tables do not provide the desired relevancy, with search engines, as nested elements inside DIV containers do. Some crawlers will not account for HTML elements beyond a certain level inside tables, while the same is not true of DIV containers. It is for this reason, combined with the style capabilities, that DIV has overtaken TABLE as the more commonly used container.

Using style elements, DIV containers can virtually mimic the affects of tables, both in appearance and structure, able to nest several levels of DIV's inside one another, creating columns and row, like that of a TABLE.

The elements of style, and how to use them, are not covered in this reference. For more information on how to utilize the power of cascadding style, visit our CSS reference instead.

DIV, like TABLES, are containers, used to house elements and apply various structural benefits to HTML documents.

Avoid using DIV's to directly contain text, instead using the P,A,H1..H6 tags, which are defined for use with text.

Note, in the above example, the right, and perhaps, the wrong way to implement the use of a DIV container. Having said that, using DIV's to directly contain text ( without any other supporting HTML tag, such as P, for instance ) is not forbidden, or illegal. For the purposes of this reference, however, in light of the fact we specialize in search engine optimization, text found directly inside DIV containers, and not inside a P or H2 tag, for instance, will not receive the best possible relevancy with search engines.

How Do I Center a Block Level Container ?

By using CSS, and the property of margin = auto, for the left and right margin, while defining a width for the element, will automatically center a block-level container. Note, if a width is not defined, or the width is greater than its parent container, the container will not center.

Move on to the Next Topic - SPAN Inline Containers.