The <div> Element
As defined in the HTML Living Standard, the <div> element is a generic container for flow content. It has no intrinsic semantic meaning and does not represent anything on its own.
<div>. It is used here purely for styling and grouping.
<div class="container">
<p>Some content here.</p>
</div>
View HTML Living Standard: The div element
The "Last Resort" Rule
The specification explicitly states that the <div> element should be used only when no other element (such as <article>, <section>, <nav>, or <aside>) is appropriate.
- Non-Semantic:
<div>does not communicate anything about the nature of the content to the browser or assistive technology. - Styling & Scripting: Its primary purpose is to provide a hook for CSS (layout/styling) or JavaScript (interaction) when a semantic element doesn't fit the requirement.
WCAG Requirement: Info and Relationships
Success Criterion 1.3.1 (Level A): Information, structure, and relationships conveyed through presentation can be programmatically determined.
Overusing <div> creates a "flat" document structure. For a screen reader user, a page made entirely of divs is a monolithic block of text with no landmarks. This makes navigation significantly slower and more frustrating. Always check if a more specific element can satisfy the Info and Relationships requirement before reaching for a div.
Adding Semantics with ARIA
If you must use a <div> for a specific functional component (like a custom tab panel or a progress bar), you must add an ARIA role to give it meaning in the accessibility tree.
<!-- A div being used as a decorative banner -->
<div role="banner"> ... </div>
<!-- A div used for a generic region -->
<div role="region" aria-label="Quick Facts"> ... </div>
A11y Tip: Native over ARIA
The first rule of ARIA is: "If you can use a native HTML element or attribute with the semantics and behavior you require already built in, then do so."
Example: Use <header> instead of <div role="banner">.