The <div> is a generic container that is used in HTML to group elements together so style can be applied to them using CSS; div elements are empty by default and have to be filled with HTML elements to work. The <div> tags come in pairs, one open tag and one closing tag:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: large;
}
.first {
width: 500px;
border: 1px solid black;
padding: 20px
}
.square {
width: 100%;
height: 250px;
color: white;
border: none;
}
.blue {
background-color: royalblue;
border: none;
}
.purple {
background-color: purple;
border: none;
}
</style>
</head>
<body>
<div class="first">
<h4>I'm a div that is holding two smaller divs.</h4>
<div class="square blue">1</div>
<div class="square purple">2</div>
</div>
</body>
</html>The biggest thing to note about the <div> tag is that it is not a semantic HTML element. That means it is not clearly evident what the <div> does by looking at the tag (unlike <caption>, <address>, <section>, etc.)
If used too much, it might lead to accessibility issues where screen readers are concerned. Be sure to use <div> tags as a last resort when there is not a semantic HTML element that could possibly be a better choice.
The <div> container is a block-level element. It will take up the entire width of the viewport unless it is controlled by the developer using CSS or inline-styling. In addition, there is a line break before and after it unless the display property is changed to some sort of inline value or flex.
In terms of layout, divs are fairly flexible. They can be nested inside each other. That being said, <div> containers will break paragraphs – so don’t nest a <div> tag inside a <p> tag. In addition, there are weird anomalies when you insert <div> containers inside headline tags (<h1>, <h2>, etc.) as it seems the <h1> wins out and the <div> is ignored.
Attributes
HTML <div> elements have access to HTML’s event and global attributes. Event attributes are those that are used when a user interacts with your web page in some way – for instance, an onclick, when a user clicks on an image, or an onmouseover, when a user guides their mouse over an element. Global attributes are those attributes that are available to all HTML elements.
A full list of these HTML attributes can be found on the Mozilla Developer Network website.
How to Style
Styling a <div> is fairly straightforward and can be done multiple ways. Inline styling can be done by adding a style attribute to the <div> with style properties and values added as a string:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inline Styling</title>
<body>
<div style="width:500px;border: 3px solid black; padding: 20px;">
<h4>I'm a div that is holding two smaller divs.</h4>
<div style="background-color: royalblue; border: none;">1</div>
<div style="background-color: purple; border: none;">2</div>
</div>
</body>
</html>Styling can also be done in the <style> tag in the <head> of the HTML document or on an external stylesheet. This is where the <div> class or id attribute will come into play.
Classes can be used on multiple elements that you want to be styled the same way. An id can only be used once in an HTML document. Think of it like this: you can have multiple students grouped together that are in the same grade with the same age, teacher and subject, but each student has its own personal id attribute that describes who they are as a human being.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: large;
}
.first {
width: 500px;
border: 3px solid black;
padding: 20px
}
.square {
width: 100%;
height: 250px;
color: white;
border: none;
}
#blue {
background-color: royalblue;
border: none;
}
#purple {
background-color: purple;
border: none;
}
</style>
</head>
<body>
<div class="first">
<h4>I'm a div that is holding two smaller divs.</h4>
<div id="blue" class="square">1</div>
<div id="purple" class="square">2</div>
</div>
</body>
</html>The class attribute and the id attribute can be used at the same time on one <div>. The id is treated as more specific than the class attribute, so any styling specific to that particular <div> can use an id attribute so it overrides any class styling.
Conclusion
Today we learned what a <div> is, what its attributes are and how the element is styled. For more information on how the display property affects <div> containers, see CareerKarma’s articles on box model and flexbox model.
About us: Career Karma is a platform designed to help job seekers find, research, and connect with job training programs to advance their careers. Learn about the CK publication.
