<div>

The HTML <div> (division) element is a generic container used to group content together. It is used for styling and layout purposes, and does not affect the layout unless styled using CSS.

It is a non-semantic element, it does not represent a particular type of content, it's purpose is to group content for CSS styling.

💡 Tip: Use <div> when the content doesn't have a specific semantic meaning, but you need a generic container for CSS styling or layout.

Syntax

<div>
  <p>Any HTML content can be placed inside a div wrapper</p>
</div>

When to use <div>

• To define page layout and structure web documents.
• For grouping content together for styling.
• When you need a container/wrapper but no semantic element is suitable.

📝 Note: Certain HTML elements are considered semantic because they more accurately describe the contents inside of them. E.g. the <footer> element describes the contents as a footer section.

Basic usage

Here is a simple example of using a <div> element:

<div class="container">
  <div class="courses">
    <h3>Our Courses</h3>
    <ul>
        <li>JavaScript</li>
        <li>Markdown</li>
        <li>Command Line</li>
        <li>Image Performance</li>
    </ul>
  </div>
  <div class="about">
    <h3>Learn more about us</h3>
    <p>Learn web development was founded to provide free educational content, focusing on web development and coding languages.</p>
  </div>
</div>

<div> vs semantic elements

The <div> element is non-semantic , meaning it does not describe the content it contains. Semantic elements like <main>, <section>, <header>, <footer> should be used when they are relevant to the content.

Here is an example of HTML using <div> sections:

<div class="header">
    <h1>Learn Web Development</h1>
</div>
<div class="container">
    <p>Free tutorials and courses to help you learn web development.</p>
</div>
<div class="footer">
    <p>&copy; Learn-WebDevelopment.com</p>
</div>

This is valid HTML, but we can be more descriptive with the contents by using semantic elements where possible:

<header>
    <h1>Learn Web Development</h1>
</header>
<main>
    <p>Free tutorials and courses to help you learn web development.</p>
</main>
<footer>
    <p>&copy; Learn-WebDevelopment.com</p>
</footer>

Common use cases

• Grouping related content for styling.
• Creating page layout sections.
• Containers for CSS Grid or Flexbox layouts.
• Wrapping content for specific styling/CSS purposes.

Accessibility and best practices

• Add descriptive/clear class names to help with styling and maintenance.
• Use semantic elements if available to better describe the content.

Styling

The <div> element is commonly styled with CSS for styling and layout purposes:

.container {
  max-width: 100%;
  margin: 0 auto;
}

.header {
  background: blue;
  color: white;
  padding: 1rem 0;
}

.wrapper {
  display: flex;
}

Conclusion

The <div> element is a essential element for grouping HTML content for styling. While it has no semantic/descriptive meaning, it is ideal for wrapping content together for styling and layout purposes.