<div>

The <div> tag is a container tag generally used to group blocks of content in HTML.

It does not provide any style by default, but it is very useful for structuring a page and applying CSS styles or behaviors with JavaScript.

Structure and syntax of the <div> tag

Basic structure and syntax

Here is the basic syntax of a <div> tag:

<div>
  Elements are placed here...
</div>

Usage example

Here is a typical example:

<div>
  <p>Paragraph of text in a container</p>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
  </ul>
</div>

In this example, the <div> tag groups a paragraph and an unordered list (<ul>).

Attributes

The <div> tag accepts standard HTML attributes such as:

• class: to apply CSS styles by a class;
• id: to identify a unique container;
• style: to apply styles on the fly.

Best practices

Several best practices should be kept in mind when using the <div> tag! 😉

First, use it primarily to structure your layout in a logical and hierarchical manner: think about dividing your sections clearly to allow better readability and maintenance of your code.

Next, prioritize semantic tags like <header>, <main>, or <article> when relevant, to improve accessibility and SEO for your page.

Search engines have an easier time understanding your page thanks to semantic tags, so avoid structuring everything with your <div> tags.

Finally, avoid nesting too many <div> tags. Prefer using semantic tags like <section> for logical groups of content, or <span> for inline styles.

Difference with other similar tags

• <span>: The <span> tag is similar to <div>, but it is used for inline elements, unlike the block-type elements with <div>.
• <section>: Unlike <div>, <section> provides a clear semantic for defining parts of a document.

Browser compatibility

The <div> tag is compatible with all modern browsers.