HTML <div> Element: Generic Block Container

The HTML <div> element is a generic block container. It is useful for grouping content for CSS layout or JavaScript when no more meaningful semantic element describes the group.

<div class="notice">
  <p>Shipping closes at 5 PM.</p>
</div>

class and id Top ↑

Use class for reusable styling/hooks and id for a unique element identifier when needed. Avoid using IDs only because older examples did so.

Prefer semantic elements when they fit Top ↑

If the region is navigation, main content, an article, aside, header or footer, the corresponding semantic element usually communicates more meaning than a generic <div>.

Do not use the old align attribute Top ↑

The historical align attribute on <div> is obsolete. Use CSS such as text-align, flexbox or grid.

<div class="centered">Centered text</div>

.centered { text-align: center; }

Positioning and interaction Top ↑

Position a div with CSS · Show supporting content from an interaction · Toggle a div on click

DIV alignment demo Show/hide with JavaScript Message layer

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: