HTML <div> Tag

Definition and Usage

<div> Tags define the divisions or parts (sections or subsections, division/section) within an HTML document.

<div> Tags can divide documents into independent and different parts. It can be used as a strict organization tool and is not associated with any format.

Any type of content can be placed <div> inside!<div> tags can be used as containers for HTML elements, then styles can be set with CSS or manipulated with JavaScript.

if id or class to mark <div>If class or id properties, it can be easily <div> tags set styles.

Note:By default, browsers always <div> by placing a newline character before and after the element.

Usage

<div> is a block-level element. This means that its content automatically starts a new line. In fact, the newline is <div> inherent unique formatting. It can be <div> with class or id of

No need to apply additional styles <div> can be added to

The same <div> Element Application class or id Properties, but in more common cases, only one of them is applied. The main difference between the two is that class is used for a group of elements (similar elements, or elements of a certain type), while id is used to identify a single unique element.

See also:

HTML Tutorial:HTML Block Elements and Inline Elements

HTML Tutorial:HTML Layout

HTML DOM Reference Manual:Div Object

Example

The <div> section of the document that uses CSS to set styles:

<html>
<head>
<style>
.myDiv {
  border: 5px outset red;
  background-color: lightblue;
  text-align: center;
}
</style>
</head>
<body>
<div class="myDiv">
  <h2>This is the title within a div element</h2>
  <p>This is some text within a div element.</p>
</div>
</body>
</html>

Try It Yourself

Case Study

<body>
 <h1>New Website</h1>
  <p>Some text. Some text. Some text...</p>
  ...
 <div class="news">
  <h2>News Headline 1</h2>
  <p>Some text. Some text. Some text...</p>
  ...
</div>
 <div class="news">
  <h2>News Headline 2</h2>
  <p>Some text. Some text. Some text...</p>
  ...
 </div>
 ...
</body>

Example Explanation

As you can see, the above HTML simulates the structure of a news website. Each div combines the title and summary of each news item, which means that div adds additional structure to the document. At the same time, since these divs belong to the same class of elements, they can be identified with class="news", which not only adds appropriate semantics to the divs but also facilitates further formatting of the divs with styles, which is a win-win situation.

Tip:For a deeper understanding of the usage of class and id, please read the section 'div, id, and other assistants' in the chapter 'Structured Markup' of 'W3school'.

Global Attributes

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

event attributes

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

Default CSS Settings

Most browsers will use the following default values to display <div> Element:

div {
  display: block;
}

Try It Yourself

Browser Support

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support