Using the <div> Element

The <div> is a generic HTML element that acts as a block-level container. It helps structure content, create layouts, and group elements.

What Is a <div>?

The <div> element carries no semantic meaning by itself but is often used to group one or more elements, like text blocks or images. It's especially useful when applying CSS styles or JavaScript functionality.

<div>
  <h2>Welcome</h2>
  <p>This is a short paragraph.</p>
</div>

Creating Web Layouts

Many modern websites are composed entirely of <div> elements. A common example is using separate <div> containers for the header, main content, and footer.

<div class="header">Header content</div>
<div class="main">Main content</div>
<div class="footer">Footer content</div>

Using class and id

<div> elements often include class or id attributes, which are essential for applying CSS or JavaScript. The class can be reused, while the id must be unique on the page.

<div id="sidebar">Sidebar</div>
<div class="card">Card content</div>

Styling a div

<div> elements are frequently styled with CSS. This can be done via an external CSS file, inline styles, or by applying a class. For example, you can give it a light blue background and padding.

<div style="background-color: lightblue; padding: 10px;">
  Styled box
</div>

Nested <div> Elements

Nesting <div> elements inside one another allows for complex layouts. This is especially useful in grid systems or multi-level content structures.

<div class="container">
  <div class="row">
    <div class="column">Column 1</div>
    <div class="column">Column 2</div>
  </div>
</div>

Avoid Overuse

Beginners often overuse <div> elements. Try to avoid creating 'div div div' structures. Aim for clean and readable code.

When to Use Semantic Elements Instead

While <div> is very useful, it's not always the best choice. For example, use <article>, <nav>, or <footer> when marking up articles, navigation menus, or footers, respectively.