Suggest an edit

Improve this article

Refine the answer for “What is <div> used for? Why is <div> often called a "universal container"?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

The `<div>` tag is used as a **container for grouping elements** on a web page.
It carries no meaning of its own (unlike semantic tags such as `<section>` or `<article>`), but it lets you **organize structure and apply styles** through CSS.

---

### 1. The purpose of `<div>`

`<div>` is a **block element** that creates an independent area (block) on the page.
Everything inside a `<div>` can be **styled, positioned, and handled as a single whole**.

Example:

```html
<div>
  <h2>News</h2>
  <p>A new project was launched today...</p>
</div>
```

The browser treats this fragment as one logical block.

---

### 2. Why `<div>` is called a "universal container"

Because it:

- **has no semantics** (it doesn't say *what* is inside; it just groups elements);
- can be used **anywhere on the page**;
- suits **any purpose**: markup, styling, positioning, animation.

Example of use:

```html
<div class="header">...</div>
<div class="content">...</div>
<div class="footer">...</div>
```

Each block can be styled separately with CSS:

```css
.header { background: #333; color: white; }
.content { padding: 20px; }
.footer { text-align: center; }
```

---

### 3. Features of `<div>`:

- It is a **block element**: it takes up the full width of its parent container.
- It can contain other tags: text, images, forms, even other `<div>` elements.
- It is often used as the **basis for a page's layout** or interface components.

---

### 4. When not to use `<div>`

If a **semantic equivalent** exists, it is better to use it:

- instead of `<div class="header">` → `<header>`,
- instead of `<div class="article">` → `<article>`,
- instead of `<div class="nav">` → `<nav>`.

Bad:

```html
<div class="header">...</div>
<div class="nav">...</div>
```

Better:

```html
<header>...</header>
<nav>...</nav>
```

This makes the code **clearer** for search engines and assistive technologies.

---

### Summary:

| Characteristic | Description |
|---|---|
| Type | Block element |
| Purpose | Grouping and organizing content |
| Semantics | None |
| Main use | Layout markup, applying CSS and JS |
| Alternative | Semantic tags (`<header>`, `<main>`, `<section>`, `<footer>`) |

---

**In simple terms:**
`<div>` is a **universal box with no name**, into which you can put anything and give it appearance and meaning with CSS or JavaScript.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts367 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.