Free Web Development Online Tutorials, Learn to Code
Div tag in HTML, Webpage Designing using HTML Div Tag, HTML5 Tags, Learn HTML Coding

How to use Div Tag in HTML Document

In this tutorial you will learn how to use DIV tag in webpage designing.

Div tag is like a container, is one of very popular and often used tag in web designing, Div has no shape on its own, but with style properties it can make the page beautiful, div can be of various shape and style, we can replace table tag with div for light responsive web designing.

Html div display

div tag example

Div tag is normally used for creating division or section on any webpage, using DIV tag we can easily design multiple section on a webpage, which is supported by all browser and rendering becomes easy

HTML Div Tag Example

This is how Div Tag look like :
<div>some text here</div>

Now we try different look of div tag with the help of style

Here are some text in Div

In above Div example we have written some in-line css style, like we have written following code

<div style="width:80%;font-size:24px;background-color:#f00;color:#fff;">
... text appear here
</div>

Div tag is also known as block level tag, because it blocks the entire width, let’s look at DIV tag example with CSS.

Div CSS Style Example

Note: we can also apply css on DIV tag itself

       <style>
    div {
        color: #fff;
        background-color: #000;
        margin: 2px;
        padding: 4px;
        font-size: 15px;
    }
    .designBlock {
        color: #fff;
        background-color: #f00;
        margin: 10px;
        padding: 10px;
        font-size: 18px;
        border: solid 1px #808080;
    }
      </style>
General Container
This is my Design Block 1
This is my Design Block 2

We often use div tag for grouping HTML elements together and apply CSS, it helps to maintain standard look and feel of div container and all child elements inside that div

Instead of writing inline CSS we also can call a class from external style sheet file like example below.

    <link href="~/css/webtrainingroom_style.css" rel="stylesheet" />

Learn more about CSS style sheet

Div tag DOM example

We often use div tag DOM for manipulating content inside the tag using JavaScript and JQuery. Let's see the example

<p id="divMessage"> </p>
<script>
document.getElementById("divMessage").innerHTML = "Hello, i am changing div innerHTML property value";
document.getElementById("divMessage").innerText = "Hello, i am changing div innerText property value";
</script>

Learn more about DOM using JavaScript

How to keep three DIV Side by Side

You probably have seen in many web pages, where three DIV comes side by side

Here is the example with code you can apply to your Div on web page.

Here are my content 1
Here are my content 2
Here are my content 3

Code

<style>
.parentDiv {
    width: 100%;
    padding: 5px;
}

.childDiv {
    float: left;
    width: 30%;
    margin: 5px;
    padding: 5px;
    border: solid 1px #808080;
    min-height: 100px;
    text-align: center;
}
</style>

You may also read How to use Span Tag in HTML Document to understand the difference between span and div

Comment
Name
Email
Website
Subscribe