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.
Let’s examine the download
class a bit.
- The CSS
padding
property defines the space between the border and the content - To draw a border around we will use CSS
border
property. 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 inurl
property. This will be our background image of the element. - What is not so clear is
no-repeat
value. By default, the background-image is repeated horizontally and vertically. In our case we just one one download image so we have usedno-repeat
so that only one image is displayed - CSS3 property
border-radius
is the reason for the “rounded corners”. Usewebkit-border-radius
in Safari andmoz-border-radius
in 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>
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>
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>
Download the source code
This was an example about div and span elements.