The elements of the structure in HTML 4

The elements of the structure in HTML 4

1. The boxes <div>

In HTML 4, the main element to structure web pages is the famous "<div> box". With <div> is possible to create areas of a rectangular display. Each of these areas <div> those boxes, can be uniquely identified by an identification code, and so we can format it with CSS. This unique identification code is established with the id attribute.

Example:

<div id="bannerSuperior">
 ...
</ Div>
We may also use the classes, when this format is repeated on the page and it is not, therefore, a unique format.

Example:

<div class="comentarios">
 ...
</ Div>
Then, once you have determined the structure, apply the design with CSS, selectors by identifying corresponding to the identification code or the class in question.

Example:

# BannerSuperior {
 ...
}
. {Comments
 ...
}
In the following example we can see the structure of a blog page with boxes <div> type:



2. The "divitis"

With HTML 4 and CSS 2.1, page structure, when it is relatively complex, it may require a lot of boxes <div>. We get to create pages with dozens of <div>. If you fall into this excess, have contracted the disease called "divitis", ie overuse <div> boxes.

3. A no semantic content

All those boxes <div> present another problem: the semantics of containers. Each box <div> differs from others with its unique identification code, that the web designer will be assigned based on their "humor" or its "win" at the time.

For that reason, boxes <div> not semantic: the expected content is not defined by any parameter. A box <div> identified with id = "left" does not give us any information about its content. It could be a navigation bar, legal information or any other content.

However, the evolution of HTML is directed toward greater use of semantics.