How to create div in html

HtmlHow-ToBeginner · 3 min read

How to Create a Div in HTML: Simple Guide for Beginners

To create a div in HTML, use the <div></div> tags. This element acts as a container to group other HTML elements or content on a webpage.

📐

Syntax

The <div> tag is an HTML container element. It starts with <div> and ends with </div>. You can add attributes like class or id to identify or style it.

<div>: Opens the container.
</div>: Closes the container.
Attributes: Optional, like class or id for styling or scripting.

html

<div></div>

Output

An empty container with no visible content on the page.

💻

Example

This example shows a div containing text and styled with a background color and padding. It groups the content visually on the page.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Div Example</title>
  <style>
    .box {
      background-color: #cce5ff;
      padding: 1rem;
      border: 1px solid #004085;
      max-width: 300px;
      font-family: Arial, sans-serif;
    }
  </style>
</head>
<body>
  <div class="box">
    This is a div container with some text inside.
  </div>
</body>
</html>

Output

A light blue box with a border containing the text: "This is a div container with some text inside."

⚠️

Common Pitfalls

Common mistakes when creating div elements include:

Forgetting to close the <div> tag, which breaks the page layout.
Using too many nested div tags without purpose, making code hard to read.
Not adding classes or IDs when needed, which makes styling or scripting difficult.

html

<!-- Wrong: Missing closing div -->
<div>
  <p>Content without closing div</p>
</div>

<!-- Right: Properly closed div -->
<div>
  <p>Content with closing div</p>
</div>

Output

The wrong example breaks layout; the right example shows correct grouping.

📊

Quick Reference

Element	Description	Example
	Container element to group content	Content
class	Assigns a class for styling	...
id	Assigns a unique identifier	...
Nested div	Div inside another div	Nested

✅

Key Takeaways

Use

tags to create containers that group HTML content.

Always close your

tags to avoid layout issues.

Add class or id attributes to style or target divs with CSS or JavaScript.

Avoid unnecessary nested divs to keep your code clean and readable.