The div attribute is a generic
block-level element. It doesn’t convey any meaning about its contents (unlike a p element that
signifies a paragraph, or an h1 or h2 element that would indicate a level 1 or level 2 heading,
respectively); as such, it’s easy to customize it to your needs. The div element is
currently the most common method for identifying the structural sections of a
document and for laying out a web page using CSS.
Some
developers perceive similarities between the p and the div elements, seeing
them as being interchangeable, but this isn’t the case. The p element offers more
semantic information (“this is a paragraph of text, a small collection of
thoughts that are grouped together; the next paragraph outlines some different
thoughts”), while the div element
can be used to group almost any elements together. Indeed, it can contain
almost any other element, unlike p, which
can only contain inline elements.
Example:
The
HTML below shows two divs being
used in conjunction with id attributes
to identify different sections of a web page:
<html>
<body>
<div style=“width: 100%; height: 20%;
background-color: #e34c97”>
<h1>This is the heading</h1>
</div>
<div style=“width: 100%; height: 70%;
background-color: #98cd89”>
<h4>This is the main
content</h4>
</div>
<div style=“width: 100%; height: 10%;
background-color: #870bc4”>
<small>This is the
footer</small>
</div>
</body>
</html>
No comments:
Post a Comment