web training room for online courses
Online Training for Asp.net MVC Web Designing Development, MS SQL, Digital Marketing

How to use Div Tag in HTML

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.

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.
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


Comment
Name Email Website
Subscribe
 
HTML DIV Tags
Div Tag in HTML document, HTML Tutorial



Consulting