HTML HTML Tutorial HTML Forms HTML Graphics HTML Media HTML APIs HTML Tags



HTML Tag: div

The HTML Tag: div is one of the most commonly used tags in HTML. It stands for "division" and is used to divide a web page into sections or groups of content. The div tag is a container tag, which means that it does not have any specific meaning or purpose on its own. Instead, it is used to group other HTML elements together and apply styles or formatting to them as a group.

The div tag is a block-level element, which means that it takes up the full width of its parent container and creates a new line after it. It can be used to group together other HTML elements, such as text, images, forms, and other HTML tags. By grouping these elements together, you can apply styles or formatting to them as a group, rather than individually.

The div tag is also commonly used to create layout structures for web pages. By dividing a web page into sections using div tags, you can create columns, rows, and other layout structures that help to organize the content on the page. This can be especially useful for creating responsive web designs that adapt to different screen sizes and devices.

Here are some examples of how the div tag can be used in HTML:

Example 1: Basic Div Tag

The following code creates a basic div tag:

<div>
  <p>This is some text inside the div tag.</p>
</div>

This code creates a div tag that contains a paragraph of text. You can apply styles or formatting to the div tag using CSS, which will affect all of the elements inside the div tag.

Example 2: Div Tag with Class Attribute

The following code creates a div tag with a class attribute:

<div class="container">
  <p>This is some text inside the div tag.</p>
</div>

This code creates a div tag with a class attribute of "container". You can use the class attribute to apply styles or formatting to the div tag and all of the elements inside it. For example, you could use CSS to give the div tag a background color or border.

Example 3: Div Tag with ID Attribute

The following code creates a div tag with an ID attribute:

<div id="header">
  <h1>This is the header.</h1>
</div>

This code creates a div tag with an ID attribute of "header". You can use the ID attribute to apply styles or formatting to the div tag and all of the elements inside it. For example, you could use CSS to give the div tag a specific height or width.

Example 4: Div Tag with Nested Elements

The following code creates a div tag with nested elements:

<div class="container">
  <h2>This is the heading.</h2>
  <p>This is some text inside the div tag.</p>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</div>

This code creates a div tag with a class attribute of "container" and several nested elements, including a heading, paragraph, and unordered list. You can apply styles or formatting to each of these elements individually, or to the div tag as a whole.

Activity