Open In App

HTML Div Tag

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

The <div> tag is known as the Division tag. The div tag is used in HTML to make divisions of content in the web page like (text, images, header, footer, navigation bar, etc). Div tag has both open (<div>) and closing (</div>) tags and it is mandatory to close the tag.

The Div is the most usable tag in web development because it helps us to separate data in the web page and we can create a particular section for particular data or function in the web pages.

Div tag Usage:

  • The div tag is the block-level tag.
  • It is used for applying styles and layout structure <div> and allows us to manipulate and position content through CSS.
  • It also divides content into logical sections, aiding in the readability and maintainability of the code.
  • As we know a Div tag is a block-level tag, the div tag contains the entire width. Hence, every div tag will start from a new line and not the same line.

Example 1: 

In this example, we will see the implementation div tag with an example.

html




<html>
 
<head>
    <title>gfg</title>
    <style type=text/css>
        p {
            background-color: gray;
            margin: 10px;
        }
 
        div {
            color: white;
            background-color: 009900;
            margin: 2px;
            font-size: 25px;
        }
    </style>
 
</head>
 
<body>
    <div> div tag </div>
    <div> div tag </div>
    <div> div tag </div>
    <div> div tag </div>
 
</body>
 
</html>


Output:

divblockelement

Output

Example 2: 

In this example we don’t use div tag and hence we need to apply CSS for each tag (in the example using H1 H2 and two paragraphs p tags) 

html




<html>
 
<head>
    <title>gfg</title>
    <style type=text/css>
        p {
            color: white;
            background-color: 009900;
            width: 400px;
        }
 
        h1 {
            color: white;
            background-color: 009900;
            width: 400px;
        }
 
        h2 {
            color: white;
            background-color: 009900;
            width: 400px;
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
    <p>How many times were you frustrated while looking out
        for a good collection of programming/algorithm/interview
        questions? What did you expect and what did you get?
        This portal has been created to provide well written,
        well thought and well-explained solutions for selected
        questions.
    </p>
    <h2>GeeksforGeeks</h2>
    <p>GCET is an entrance test for the extensive classroom
        program by GeeksforGeeks to build and enhance Data
        Structures and Algorithm concepts, mentored by Sandeep
        Jain (Founder & CEO, GeeksforGeeks).He has 7 years of
        teaching experience and 6 years of industry experience.
    </p>
</body>
 
</html>


Output:

Screenshot-2023-12-05-162314

Output

We can use CSS in any of the divisions (<div> tag) using the following methods: 

1. Using class:

We can use class on that particular div and apply CSS either inside a <style> tag or linking an external CSS file.

  • In case of internal CSS: We need to define Class in the <head> section of HTML within <style> element.
  • In case of External CSS: We need to create a separate .css file and include it in HTML code inside <head> section using <link> element.

Example :

This is the example with respect to above approach by using class.

html




<!DOCTYPE html>
<html>
 
<head>
    <link rel="stylesheet" href="color.css">
    <title>
        gfg
    </title>
</head>
 
<body>
    <center>
        <div class="color">
            <!--open tag of Div!-->
            <caption>
                <h1>GEEKSFORGEEKS</h1>
            </caption>
            <h1>Inline CSS is not USED in THIS method.
            </h1>
        </div>
        <!--closing tag of Div!-->
    </center>
</body>
 
</html>


CSS




.color {
    height: 400px;
    width: 600px;
    border: 1px solid;
    background-color: 009900;
}


Output:                               

inlinecssdivtag2

Output

2. Inline CSS:

We can directly use CSS in div also. This method does not require class. Div in HTML coding is used as a container tag also because it is the one that can contain all other tags.

Example:

html




<!DOCTYPE html>
<html>
 
<head>
    <title>
        gfg
    </title>
</head>
 
<body>
    <center>
        <div style="height:300px; width:500px; color:white;
            border:1px solid; background-color: 009900;">
            <!--open tag of Div!-->
            <caption>
                <h1>GEEKSFORGEEKS</h1>
            </caption>
            <h1>Inline CSS is USED in THIS method.
                In this div no class is used.
            </h1>
        </div>
        <!--closing tag of Div!-->
    </center>
</body>
 
</html>


Output:

inlinedivcss-(2)

Output

Difference Between div tag and span tag

Properties Div Tag Span Tag
Elements Types Block-Level Inline
Space/Width Contain Whole Width Available Takes only required Width
Examples Headings, Paragraph, form Attribute, image
Uses Web-layout container for some text
Attributes Not required,with common css, class Not required,with common css, class

The span tag does not create a line break similar to a div tag, but rather allows the user to separate things from other elements around them on a page within the same line. avoiding of line break, results only that selected text to change, keeping all the other elements around them same. Below example will display the difference between span and div tag while div tag contains whole width and span tag contain only required width and rest parts are free for another element. 

Example:

This example will display the difference between span and div tag while div tag contains whole width and span tag contain only required width and rest parts are free for another element. 

html




<!DOCTYPE html>
<html>
 
<head>
    <title>gfg</title>
    <style type=text/css>
        p {
            background-color: gray;
            margin: 10px;
        }
 
 
        div {
            color: white;
            background-color: 009900;
            margin: 2px;
            font-size: 25px;
        }
 
        span {
            color: black;
            background-color: gray;
            margin: 5px;
            font-size: 25px;
        }
    </style>
</head>
 
<body>
    <!-- below some div tags -->
 
    <div> div tag </div>
    <div> div tag </div>
    <div> div tag </div>
    <div> div tag </div>
 
    <!-- below some span tags -->
    <span>span-tag</span>
    <span>span-tag</span>
    <span>span-tag</span>
    <span>span-tag</span>
</body>
 
</html>


Output:

spandiv

Output

 Supported Browser:

  • Google Chrome 1 and above
  • Microsoft Edge 12 and above
  • Firefox 1 and above
  • Opera 15 and above
  • Safari 1 and above

HTML is the foundation of webpages, is used for webpage development by structuring websites and web apps.You can learn HTML from the ground up by following this HTML Tutorial and HTML Examples.



Last Updated : 20 Dec, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads