HTML <div> Division tag
Tags: learnhtml, htmld
Published: 2021-05-10 08:40:41

---
title: HTML <div> Division tag
published: true
date: 2021-02-23 20:42:39 UTC
tags: LearnHTML,HTMLD
canonical_url: https://sharepointanchor.com/learn-html/html-div-division-tag/
---

The HTML **<div> 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 **<div> 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 <div> tag**.

**Note** : Don’t use the **<div>** tag inside the **<p>** tag. Because, the **paragraph will be broken** at the point, where the <div> tag is entered.

<svg aria-hidden="true" focusable="false" data-icon="clock" width="20" height="20" fill="none" stroke="currentColor" style="display:inline-block;vertical-align:-0.1em" role="img" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>Estimated reading time: 6 minutes

## Syntax:

The division tag contains both **starting <div> tag** and **ending </div> tag**. The content is written between these two tags.

```

<div> Create your content here...</div>

```

### HTML <div> Tag Characteristics:
<style> th, td{ padding: 20px; } </style>

| HTML <div> tag | Used to define a section of the document |
| Content categories | Flow content, palpable content. |
| Permitted content | Flow or <abbr title="Web Hypertext Application Technology Working Group">WHATWG</abbr> 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 <div> Tag:

Here is the sample of HTML division 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:

![](https://sharepointanchor.com/wp-content/uploads/2021/02/Result-27.png)<figcaption>Result</figcaption>

## Flexbox:

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.

### Sample of a Flex box with HTML <div> 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:

![Result](https://sharepointanchor.com/wp-content/uploads/2021/02/result-flex-1.png)<figcaption>Result</figcaption>

## Use CSS Float Property with HTML <div> Tag:

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.

### Sample of the HTML <div> 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:

![Result](https://sharepointanchor.com/wp-content/uploads/2021/02/div-tag-result.png)<figcaption>Result</figcaption>

## HTML <div> Tag with Negative Margins:

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.

### 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:

![Result](https://sharepointanchor.com/wp-content/uploads/2021/02/result-2-8.png)<figcaption>Result</figcaption>

## Relative+absolute positioning in <div> Tag:

If you want to position <div> relative to a particular element you can use a combination of **position: relative** and **position: absolute**.

### 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:

![Result](https://sharepointanchor.com/wp-content/uploads/2021/02/res.png)<figcaption>Result</figcaption>

## Attributes:

The  **<div>**  Division tag supports the  **global attributes**  and the  **event attributes** in HTML.

<style> th, td{ padding: 20px; } </style>

| Attribute | Value | Description |
| --- | --- | --- |
| title | | This attribute will **specify the abbreviation of the definition term** when hovering the mouse over the term. |

## Styling Methods for <div> Tag:

You can use the following properties to style an HTML **<div>** Division tag.

### Properties to style the visual weight/emphasis/size of the text in <div> tag:

- **CSS font-style** – This CSS property helps to set the font style of the text such as normal, italic, oblique, initial, inherit.
- **CSS font-family** – This CSS property specifies a prioritized list of one or more font family names or generic family names for the selected element.
- **CSS font-size** – This CSS property will help to set the size of the font.
- **CSS font-weight** – This CSS property used to define whether the font should be bold or thick.
- **CSS text-transform** – This CSS property will control the text case and capitalization.
- **CSS test-decoration** – This CSS property specifies the decoration added to text such as **text-decoration-line** , **text-decoration-color** , **text-decoration- style**.

### Styles to coloring the text in <div> Tag:

- **CSS color** – This CSS property will specify the color of the text content and decorations.
- **CSS background-color** – This CSS property helps to set the background color of an element. 

### Text layout styles for <div> Tag:

- **CSS text-indent** – This CSS property is used to specify the indentation of the first line in a text block.
- **CSS text-overflow ** – This CSS property helps to describe how overflowed content that is not displayed should be signaled to the user.
- **CSS white-space** – This CSS property describes how white-space inside an element is handled.
- **CSS word-break**  – This CSS property decides where the lines should be broken.

### Other Properties for <div> Tag:

- **CSS text-shadow**  – This CSS property helps to add the shadow to text.
- **CSS text-align-last**  – This CSS property will set the alignment of the last line of the text.
- **CSS line-height** – This CSS property defines the height of a line.
- **CSS letter-spacing** – This CSS property helps to decide the spaces between letters/characters in a text.
- **CSS word-spacing** – This CSS property specifies the spacing between every word.

## Browser Support:

![](https://sharepointanchor.com/wp-content/uploads/2021/02/Browser-Support-10.png)<figcaption>Browser Support</figcaption>

### Related Articles:

- **[HTML <dd> Definition Description Tag](https://sharepointanchor.com/learn-html/html-dd-definition-description/)**
- **[HTML <center> Center Tag](https://sharepointanchor.com/learn-html/html-center-tag/)**
- **[Basic HTML Definitions and Usages in the Real World](https://sharepointanchor.com/learn-html/basic-html-definitions-and-usages-in-real-world/)**
- **[HTML <code> Code Tag](https://sharepointanchor.com/learn-html/html-code-tag/)**
- **[HTML <aside> Aside Tag](https://sharepointanchor.com/learn-html/html-aside-tag/)**

The post [HTML <code><div></code> Division tag](https://sharepointanchor.com/learn-html/html-div-division-tag/) appeared first on [Share Point Anchor](https://sharepointanchor.com).