The Advantages of Using Div Tags
You may not recognize them, but div tags appear on many websites you visit every day. Div tags are an integral part of modern Web design, and there are advantages to using them when laying out HTML documents. Although it takes a little JavaScript to manipulate divs, you only need basic HTML skills to create them.
Other People Are Reading
-
Definition
-
Divs are containers that consist of two HTML tags: "<div>" and "</div>." Anything between these tags becomes part of the div block. Think of a div has a desktop filled with different types of objects. On a Web page, a div can contain images, menus and any other HTML element that you can place on a Web page. You can even add a div to another div to create a nested affect. Some sites place a div containing text on top of another div containing an image to produce banner effects. A div's ability to group objects helps you create complex layouts that would be difficult to build without using div containers.
Positioning
-
After grouping elements inside a div, you can move the div anywhere you like on a Web page. Simply set a div's positioning attribute to "absolute," and set its top and left properties to the desired screen coordinates. Divs also come in handy when you need to create headers, footers and sidebars. Populate a div with the elements needed to create one of these items, and dock the div to the appropriate location on the page. Because divs are HTML block elements, every div you add to a page appears below the previous div you placed on the page.
-
Animation
-
Create engaging animation effects by setting a div tag’s CSS position attribute to absolute. Doing this allows you to modify a div’s position using JavaScript. Place your favorite image inside the div to get an animated image that moves around your Web page in a path that you define. JavaScript’s "setTimeout" function makes this possible. Call a "setTimeout" function that calls an animation function repeatedly, and your div moves until you stop the "setTimeout" function.
Visibility
-
One of the most important div features is one that you do not always see. Divs have a CSS display attribute. Developers use this powerful attribute to make Web page items collapse and reappear on demand. You may have seen this effect when you clicked a button on a Web page, and an image or menu suddenly appeared. The "block" and "none" display values allow you to show and hide a div.
-
References
Resources
- Photo Credit Stockbyte/Stockbyte/Getty Images
