HTML div tag |Class, id | Align, center, top, right | Width, border

HTML div tag also knows as the Divison tag. HTML <div> tag is very useful and used for multiple purpose. Div gives a more modular structure to the webpage and more organized. <div> tag used in HTML mostly for a division like navigation bar, text, images, header, footer, etc.

Some definitions will define <div> as a container unit that encapsulates other page elements and divides the HTML document into sections. A module approach in <div> element is to group together HTML elements and apply CSS styles to many elements at once.

HTML div tag Class, id Align, center, top, right Width, border

HTML div example

Let’s see the example of div created section with the background color is light-grey. Using an inline css to change the div color background. And div container is holding 2 elements<h> and <p>.

<!DOCTYPE html>
<html>
    <body>
        
        <div style="background-color:lightgrey">
            <h3>This is a heading</h3>
            <p>This is a paragraph. A blue light is off.</p>
        </div>
    </body>
</html>

Output:

HTML div example

HTML div class |  <div class=”name”>

A dive class is used to identify which div tag will change the style (Changing color and set border etc.) through CSS.

See example if <div class=”box”>, so “box” is identity. It used in CSS with dot prefix. (.box)

HTML div id |  <div id=”name”>

Same as div class, id is used. id and class both are attributes.

For an example if <div id=”box”>, so “box” is identity. It used in CSS with hash prefix. (#box)

HTML div align Center | Top | Right

Align is an attribute of a div tag in HTML. With aligning attributes, you can set the other elements’ positions inside the <div> section.

You can set the align attribute with center, top, right values. See below example.

<!DOCTYPE html>
<html>
    <body>
        
        
        <div align="center" style="border:1px solid blue">
            Center text in a div element!
        </div>
        
        
    </body>
</html>

Output:

HTML div align Center Top Right

HTML div tag attributes

The <div> tag also supports the Global and Event Attributes in HTML.

Question: How to create an HTML div box?

Answers: To creating a box using div tag. You need to define width and border in CSS (any kind of CSS).

<!DOCTYPE html>
<html>
    <head>
        <style>
            #box{
                background-color: lightblue;
                width: 200px;
                border: 5px solid red;
                padding: 5px;
                margin: 5px;
            }
        </style>
    </head>
    <body>
        
        <h2>Div Box</h2>
        
        
        <div id="box">This text is the actual content of the box. A example of div box with a 5px border and color is red. </div>
        
    </body>
</html>

Output:

create an HTML div box output

Question: How to use the div tag in HTML to divide the page?

Answers: See below example code of divide the page in three parts using div tag.

HTML

<div id="wrapper">
    <div id="first"></div>
    <div id="second"></div>
    <div id="third"></div>
</div>

CSS

div {
    display: block;
}
#wrapper {
    width: 400px;
    height:400px;
}

#first {
    float:left;
    width: 33%;
    height: 100%;
    background: red;
}

#second {
    float:left;
    width: 67%;
    height: 30%;
    background: green;
}

#third {
    float:left;
    width: 67%;
    height: 70%;
    background: blue;
}

Question: What is Default CSS Settings of <div> tag?

Answer: Most browsers will display the <div> element with the following default values in CSS:

div {
  display: block;
}

Do comment if you have any doubt and suggestion on this “HTML Division Tag” tutorial.

Note: The All  Examples of HTML div tag are tested on Safari browser (Version 12.0.2).
OS: macOS 10.14 Mojave
Code: HTML 5 Version


Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.