div: The Content Division element

The <div> HTML element is a generic container for flow content. It has no semantic meaning and should only be used when no other semantic element is appropriate. By default, it has no effect on the content or layout until styled using CSS.

When to Use div

Use <div> only when you need a generic container for styling or scripting purposes and no semantic element fits. Consider these semantic alternatives first:

• <article> - for standalone, distributable content
• <section> - for thematic groupings of content
• <nav> - for navigation links
• <aside> - for tangentially related content
• <header> - for introductory content
• <footer> - for closing content
• <main> - for the primary content of the page
• <figure> - for self-contained content like images
• <blockquote> - for quoted content
• <address> - for contact information

Attributes

Global attributes

accesskey Specifies a keyboard shortcut to activate or focus an element.

aria-* Defines accessibility properties and states for assistive technologies.

class Specifies one or more CSS class names for styling the element.

data-* Stores custom data private to the page or application.

dir Sets the text direction (left-to-right, right-to-left, or auto).

hidden Hides the element from display and assistive technologies.

id Defines a unique identifier for the element within the document.

inputmode Hints which virtual keyboard type to display on mobile devices.

itemid Provides a global identifier for microdata items.

itemprop Defines a property name-value pair for microdata.

itemref Associates properties with an item via element IDs for microdata.

itemscope Creates a new microdata item container.

itemtype Specifies the vocabulary URL for microdata items (like Schema.org).

lang Specifies the primary language of the element’s content.

nonce Provides a cryptographic nonce for Content Security Policy.

role Defines the element’s semantic role for accessibility.

tabindex Controls keyboard navigation order and focusability.

title Provides advisory information displayed as a tooltip.

Example

<!-- Better: Use semantic elements when possible -->
<article>
  <header>
    <h1>Building Your Personal Website</h1>
  </header>
  <section>
    <h2>Why Own Your Content?</h2>
    <p>Content ownership gives you control over your online presence...</p>
  </section>
  <aside>
    <h3>Related Resources</h3>
    <ul>
      <li>IndieWeb principles</li>
      <li>Static site generators</li>
    </ul>
  </aside>
</article>

<!-- Acceptable: div for pure styling/layout when no semantic meaning exists -->
<div class="layout-grid">
  <div class="card-container">
    <h3>Website Tools</h3>
    <p>Essential tools for independent web creators.</p>
  </div>
  <div class="card-container">
    <h3>Community Events</h3>
    <p>Connect with other IndieWeb enthusiasts.</p>
  </div>
</div>