HTML - <layer> Tag

Quiz

HTML <layer> tag is used to position and animate (through scripting) elements in a page. This tag was implemented only in the Netscape4 and is ignored by all other browsers.

A layer can be thought of as a separate document that resides on top of the main one, all existing within one window. The tag is a deprecated HTML element that was originally used in early versions of Netscape Navigator to position and animate elements on a webpage.

Syntax

<layer id = "layer1" 
       top = "" 
       left = "" 
       width = "" 
       height = "" 
       bgcolor = "">
<p>layer 1</p>
</layer>

Attributes

HTML <layer> tag supports the following attributes.

Attribute	Value	Description
above	layer name	The name of the inline layer that will be positioned directly above the current layer in the z-order.
background	URL	A filename or URL for an image upon which the inline layer's text and images will appear.
below	layer name	The name of the inline layer that will be positioned directly below the current layer in the z-order.
bgcolor	rgb(x,x,x) #xxxxxx colorname	The color to use for the inline layer background.
clip	number	The coordinates of the inline layer's viewable area.
height	pixels	The inline layer's height, in pixels.
left	number	The position of the left side of the inline layer. If the current inline layer is part of another layer.called the parent layer-then the position is relative to the parent layer.
name	layer name	The name of the inline layer.
pagex	number	The position of the left side of the inline layer relative to the browser window.
pagey	number	The position of the top of the inline layer relative to the browser window.
src	URL	The URL of a page that will appear inside the inline layer.
top	number	The position of the top of the inline layer. If the current inline layer is part of another layer--called the parent layer--then the position is relative to the parent layer.
visibility	show hide inherit	Determines whether the inline layer is visible.
width	pixels	The inline layer's width, in pixels.
z-index	number	The inline layer's position within the z-order. Inline layers with higher Z-INDEX values are positioned above inline layers with lower Z-INDEX values.

Examples of HTML layer Tag

Here are few examples that illustrate use of layer tag in HTML.

Layer tag in Netscape Browser

Let's look at the following example, where we are going to use the layer tag.

<!DOCTYPE html>
<html>

<head>
   <title>HTML layer Tag</title>
</head>

<body>
   <layer id = "layer1" 
            top = "250" 
            left = "50" 
            width = "200" 
            height = "200" 
            bgcolor = "red">
            <p>layer 1</p>
   </layer>
   
   <layer id = "layer2" 
            top = "350" 
            left = "150" 
            width = "200"
            height = "200" 
            bgcolor = "blue">
            <p>layer 2</p>
   </layer>
   
   <layer id = "layer3" 
            top = "450" 
            left = "250" 
            width = "200"
            height = "200" 
            bgcolor = "green">
            <p>layer 3</p>
   </layer>
</body>

</html>

Alternative for layer Tag

Following code shows how we can replace layer tag in modern browsers. We are using div elements and apply z-index to it in CSS.

<!DOCTYPE html>
<html lang="en">
<head>
   <style>
      .container {
         position: relative;
         width: 300px;
         height: 300px;
         border: 1px solid #000;
      }
      .layer {
         position: absolute;
         width: 100%;
         height: 100%;
      }
      .background {
         background-color: lightblue;
         z-index: 1;
         height: 300px;
         width: 300px;
      }
      .middle {
         background-color: lightgreen;
         z-index: 2;
         opacity: 0.5;
         height: 200px;
         width:200px;
      }
      .foreground {
         background-color: lightcoral;
         z-index: 3;
         height:100px;
         width:100px;
      }
   </style>
</head>
<body>
      <div class="container">
         <div class="layer background">
            ...................................
            ........Background Layer
         </div>
         <div class="layer middle">
            .................Middle Layer
         </div>
         <div class="layer foreground">
            Foreground Layer
         </div>
      </div>

      <p>
         Three div elements top of eachother, Background
         layer have z-index 1 which makes it the deepest
         layer. While the foreground layer have z-index 3, 
         hence that's the toppest layer.
      </p>
</body>
</html>

Supported Browsers

Tag
Layer	No	No	No	No	No

You can only implement layer tag in Netscape Navigator 4 browser.

Print Page