The HTML tag is known as Division tag. This tag creates a division or section in an HTML document. It is used as an empty container , you can style it with CSS or manipulated it with JavaScript.
The tag is mostly used in web development because it helps to create a particular section for particular data or functions in the web pages. It is a block-level element. By default, browsers always place a line break before and after the tag.
Note : Don’t use the tag inside the tag. Because, the paragraph will be broken at the point, where the tag is entered.
Estimated reading time: 6 minutes The division tag contains both starting tag and ending tag. The content is written between these two tags. | HTML Here is the sample of HTML division tag. Flex box is a one-dimensional layout method for laying out items in rows or columns. This is used to control the alignment, direction, order, and size of the items inside the container. The CSS float property defines where the container should be placed on the web page. It allows the elements to appear next to, or apart from, one another, etc. The margin property defines the space around an HTML document. The Negative margins can be applied to both static or floated elements in an HTML document. If you want to position The Division tag supports the global attributes and the event attributes in HTML.
th, td{ padding: 20px; }
You can use the following properties to style an HTML Division tag.
The post HTML
Syntax:
<div> Create your content here...</div>
HTML Tag Characteristics:
th, td{ padding: 20px; }
| Content categories | Flow content, palpable content. |
| Permitted content | Flow or WHATWG HTML. |
| Tag omission | None, both opening and closing tags are mandatory. |
| Permitted parents | Any HTML element that accepts flow content or (in WHATWG HTML) |
| Implicit ARIA role | No corresponding role |
| Permitted ARIA roles | Any |
| DOM interface | HTMLDivElement |
Sample of the HTML Tag:
<!DOCTYPE html>
<html>
<head>
<title>HTML <div> Tag</title>
</head>
<body>
<h2> Example of HTML <div> Tag </h2>
<div style="background-color:#dff0d8">
<p>Welcome to our website. Here is the example of HTML <div> tag.</p>
<p>This is the sample paragraph.</p>
</div>
</body>
</html>
Result:
Flexbox:
Sample of a Flex box with HTML tag:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.flex-container {
display: flex;
align-items: center;
width: 100%;
height: 200px;
background-color: #43156D;
}
.flex-container > div {
width: 35%;
height: 60px;
margin: 5px;
border-radius: 3px;
background-color: #D2B0F2;
}
</style>
</head>
<body>
<div class="flex-container">
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
Result:
Use CSS Float Property with HTML Tag:
Sample of the HTML tag with CSS float property:
<!DOCTYPE html>
<html>
<head>
<title>HTML <div> Tag</title>
<style>
.content {
overflow: auto;
border: 2px solid #666;
}
.content div {
padding: 10px;
}
.content a {
color: darkgreen;
}
.blue {
float: right;
width: 40%;
background-color: #D2B0F2;
}
.green {
float: left;
width: 30%;
background-color: #EDFA84;
}
</style>
</head>
<body>
<h3>Example of HTML div tag</h3>
<div class="content">
<div class="blue">
<p><b>This is the first paragraph</b></p>
<a href="#">This is some hyperlink inside <div> tag.</a>
<ul>
<li>List item 1</li>
<li>List item 2</li>
</ul>
</div>
<div class="green">
<p>This is some paragraph inside div tag.</p>
<ol>
<li>List item 1</li>
<li>List item 2</li>
</ol>
</div>
</div>
</body>
</html>
Result:
HTML Tag with Negative Margins:
Example:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.content div {
padding: 2%;
}
.content a {
color: darkblue;
}
.main-content {
width: 30%;
margin-left: 32%;
}
.blue {
width: 25%;
margin-top: -5%;
background-color: #D2B0F2;
}
</style>
</head>
<body>
<div class="content">
<div class="main-content">
<h1><a href="#">This is some hyperlink inside div tag.</a></h1>
</div>
<div class="blue">
<h2>Heading 2</h2>
<a href="#">This is some hyperlink inside div tag.</a>
<ul>
<li>List item 1</li>
<li>List item 2</li>
</ul>
</div>
</div>
</body>
</html>
Result:
Relative+absolute positioning in Tag:
Example:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.content {
position: relative;
height: 200px;
border: 1px solid #666;
}
.content div {
position: absolute;
width: 35%;
padding: 20px;
}
.blue {
right: 20px;
bottom: 0;
background-color: #7FFFD4;
}
.green {
top: 10px;
left: 15px;
background-color: #87CEEB;
}
</style>
</head>
<body>
<div class="content">
<div class="blue">
<p>This is some paragraph inside div tag.</p>
</div>
<div class="green">
<p>This is some paragraph inside div tag.</p>
</div>
</div>
</body>
</html>
Result:
Attributes:
Attribute
Value
Description
title
This attribute will specify the abbreviation of the definition term when hovering the mouse over the term.
Styling Methods for Tag:
Properties to style the visual weight/emphasis/size of the text in tag:
Styles to coloring the text in Tag:
Text layout styles for Tag:
Other Properties for Tag:
Browser Support:
Related Articles:
Code Tag Division tag appeared first on Share Point Anchor.
Share Point Anchor
Posted on • Originally published at sharepointanchor.com on
HTML <div> Division tag
For further actions, you may consider blocking this person and/or reporting abuse
Top comments (0)