In this article, we will come to know all about <div> tag. What does div stands for and when should we use it? How is it different from <span> tag?
The main approach in web page design is to decouple the structure from presentation but there must be something which helps us to define the structure and this where the role of <div>comes into play. <div> tag allows use to divide our web page into meaningful structure which is the name div. Once we have defined the structure we can control its presentation using CSS.
Suppose we want to display a section for download, we can use a new div tag to define the download section.
download.html:
<!DOCTYPE HTML>
<html>
<head>
<style>
.download {
padding: 10px 20px 20px 50px;
border: 1px solid #CEEBCE;
background: url(icon_download.png) 10px 5px no-repeat;
background-color: #F2F2F2;
color: #555;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
width: 450px;
height: 15px;
}
</style>
</head>
<body>
<div class="download">Download the source code: <a
ref="/"><strong>SomeFile.zip</strong></a></div>
</body>
</html>
Take a note of the class attribute. It is set to ‘download’ which we will use to to add presentation to the structure. See .download class in the style section of the html code.
Div Example – Download Class
Let’s examine the download class a bit.
- The CSS
paddingproperty defines the space between the border and the content - To draw a border around we will use CSS
borderproperty. The size of border is set to 1px, style is solid and color is set to Hex Code #CEEBCE. - The background properties are defined using CSS property
background. You will specify the image path inurlproperty. This will be our background image of the element. - What is not so clear is
no-repeatvalue. By default, the background-image is repeated horizontally and vertically. In our case we just one one download image so we have usedno-repeatso that only one image is displayed - CSS3 property
border-radiusis the reason for the “rounded corners”. Usewebkit-border-radiusin Safari andmoz-border-radiusin Mozilla
We are now clear that <div> tag is used for structuring the doc but using too much of it will add clutter to your code. If there is an existing element that already represents the structuring then we shouldn’t be wrapping it within a div instead we can use it directly to add style.
For example, we want to apply some style to a list of items.
If we use a <div> tag, it would look like:
download_div_around_ul.html:
<!DOCTYPE HTML>
<html>
<head>
<style>
.download {
padding: 10px 20px 20px 50px;
border: 1px solid
#CEEBCE;
background: url(icon_download.png) 10px 5px no-repeat;
background-color: #F2F2F2;
color: #555;
margin-bottom: 2px;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius:
25px;
width: 450px;
height: 15px;
}
#menu li a{
background-color:#f4f4f4;
color:#313131;
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li>
<a href="/">Rose</a>
</li>
<li>
<a href="/">Sun Flower</a>
</li>
<li>
<a href="/">Lotus</a>
</li>
</ul>
</div>
<div class="download">
Download the source code:
<a ref="/">
<strong>SomeFile.zip</strong>
</a>
</div>
</body>
</html>
div Around ul
Instead of using a new <div> tag, we can use <ul> tag itself.
download_ul_style.html:
<!DOCTYPE HTML>
<html>
<head>
<style>
.download {
padding: 10px 20px 20px 50px;
border: 1px solid
#CEEBCE;
background: url(icon_download.png) 10px 5px no-repeat;
background-color: #F2F2F2;
color: #555;
margin-bottom: 2px;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius:
25px;
width: 450px;
height: 15px;
}
#menu li a{
background-color:#f4f4f4;
color:#313131;
}
</style>
</head>
<body>
<ul id="menu">
<li>
<a href="/">Rose</a>
</li>
<li>
<a href="/">Sun Flower</a>
</li>
<li>
<a href="/">Lotus</a>
</li>
</ul>
<div class="download">
Download the source code:
<a ref="/">
<strong>SomeFile.zip</strong>
</a>
</div>
</body>
</html>
Define div either by id or class
You can define a <div> tag either using an id attribute or class/code> attribute. This will allow you to create CSS style rules which in turn will control the space the
element occupies on screen and then change the appearance of all the elements contained within it. Let’s see an example of each case. In the below example, we define a CSS style called ‘container’ and next define <div> identified by id or class. If it is defined by class, in CSS style sheet, you need to define it using ‘.container’. If it is defined by id, you need to define it using ‘#container’. CSS margin property is used to define the space around elements. It is set to auto which means browser decides the margin for you.
container_div_by_id_class.html:
<!DOCTYPE HTML>
<html>
<head>
<style>
.container{
width: 70%;
margin: auto;
padding: 20px;
border: 1px solid #666;
background: #ffffff;
}
#container{
width: 70%;
margin: auto;
padding: 20px;
border: 1px solid #666;
background: #ffffff;
}
</style>
</head>
<body>
before div
<div class="container">
Div styled by class
</div>
after div
<div id="container">
Div defined by id
</div>
</body>
</html>
Define Div By Id or Class
How is Div different from Span?
The <span> element acts like an inline equivalent of the <div> element. In a browser, the contents of the <div> element will start on a new line.
In the below example, we add a <span>; element to the above example.
div_span_comparison.html:
<!DOCTYPE HTML>
<html>
<head>
<style>
.container{
width: 70%;
margin: auto;
padding: 20px;
border: 1px solid #666;
background: #ffffff;
}
#container{
width: 70%;
margin: auto;
padding: 20px;
border: 1px solid #666;
background: #ffffff;
}
</style>
</head>
<body>
before div
<div class="container">
Div styled by class
</div>
after div
<div id="container">
Div defined by id
</div>
before span
<span class="container">
Span element
</span>
after span
</body>
</html>
Div and Span Comparsion
Download the source code
This was an example about div and span elements.
