Difference between a <div> and a layer

The term "layer" appeared in 1997.

Layers are elements of HTML language added by Netscape in their browser's 4.0 version. <layer> tag consisted in a transparent block within which text, images, animations and even other blocks could be inserted.

The advantage was that layers -contrarily to tables that did not always allow a precise positioning because they were not created on that purpose- could be placed to the pixel in the page.

Layers could also overlap each other, completely or in part only, as transparent pages one over the other.

<layer> tag disappeared quickly because it wasn't recognized by Internet Explorer, but also because it appeared too late. W3C had already planned on fixing the positioning not in HTML language but within CSS style sheets. This is why <layer> never appeared in standard HTML language 4.0. However, the term "layer" stayed, very often misunderstood.

Softwares such as Dreamweaver reused the principle by creating their own "layers" first with <layer> then with <div> which is a generic block tag to which they automatically add a variety of properties that are not only restrictive but also useless (absolute positioning, z-index, name...). Dreamweaver used <span> for a long time as a layer even though it is an inline tag that was never meant to be used for blocks. (precisions on the differences beetwen block and inline tags).

Considering that the new CSS properties to position elements are part of the official standard and are recognized by Netscape as well as by Internet Explorer, then the HTML technique of layers should be disregarded.

Actually, the term "layer" does not mean anything anymore since each block tag can become a layer(<div>, but also <p>, <h1>,...). CSS styles allow the positioning of any tag and giving it any property (color, text size, position, overlapping,...), there is no more specific tag for layers, even if <div> is still misunderstood as a "layer".

The only rigorously true use of the term "layer" nowadays is for designing containers that overlap (use of the property z-index).

Print article

Raphael GOETTER
www.alsacreations.com