← Back to HTML Course | Chapter 3: Page Structure | Lesson 11 of 12

HTML Div

Imagine building a large display shelf for your shop. If you just stack items loose on the shelf, they will roll around and look cluttered. To organize them, you use lightweight plastic bins to group related items together, like placing all your blue marker pens in one bin and red pens in another. The HTML div element is that organizational plastic bin. It is a completely generic, non-semantic block container that does not carry any meaning by itself. Its job is to group related elements together so you can apply styles, borders, margins, or script controls to all of them as a single, neat package.

In this page:

  1. The Generic div Container
  2. Styling Divisions with CSS
  3. Flexible Column Grids with Flexbox
  4. Consistent Indentation and Nesting
  5. Div Accessibility and ARIA
Syntax
markup 
<div class="classname">
  Content
</div>

The Generic div Container

The div tag defines a generic block-level division or container. It does not carry any semantic meaning, but it is highly useful for grouping elements, separating sections, and applying CSS layout rules.

Note: Use semantic layout tags (like header or section) for main page columns, and save div elements for visual styling and spacing.
Warning: Overusing plain div tags instead of semantic containers can negatively impact your site's SEO ranking.

Example: The Generic div Container

markup 
<div>Grouped content with no semantic meaning</div>

Styling Divisions with CSS

Because div is a generic block container, it is the perfect element for applying CSS classes to create custom visual cards, boxes, borders, and margins on your page.

Note: Use a descriptive class name on your div tags to keep your stylesheet rules organized.
Warning: Avoid applying inline styles to every single div; use classes in an external stylesheet instead to keep your code clean.

Example: Styling Divisions with CSS

markup 
<div class="card">Styled card content</div>

Flexible Column Grids with Flexbox

You can use div tags to build modern, flexible column grids. By setting a parent div's display property to flex, you can arrange its child divs side-by-side cleanly and control their alignment.

Note: Use Flexbox to build fluid, responsive layouts that adjust automatically to different screen sizes.
Warning: Make sure you do not set fixed pixel widths on your columns, as they will overflow on mobile screens.

Example: Flexible Column Grids with Flexbox

markup 
<div style="display: flex;">
  <div>Column 1</div>
  <div>Column 2</div>
</div>

Consistent Indentation and Nesting

Nesting multiple divs inside each other is the key to building complex web pages. To keep your code clean, always use clear indentation to show which divs are nested inside others.

Note: Add brief comment markers (like /nested-box) next to your closing div tags to make reading long layouts easier.
Warning: Forgetting to write a closing div tag can cause subsequent elements to merge incorrectly and break your page layout.

Example: Consistent Indentation and Nesting

markup 
<div class="outer">
  <div class="inner">
    Nested content
  </div>
</div>

Div Accessibility and ARIA

Because div is a completely generic, non-semantic element, assistive devices like screen readers will ignore it entirely.

If you use a div to build an interactive component (like a custom button or modal), you must add standard ARIA roles to keep it accessible.

Note: Prefer native, semantic elements (like button) over styled divs for interactive components to inherit built-in focus and keyboard support.
Warning: Never use styled divs as a replacement for standard buttons and links without adding necessary ARIA roles.

Example: Div Accessibility and ARIA

markup 
<div role="button" tabindex="0" aria-label="Close dialog">X</div>
Live Example
Related Topics

HTML Computercode · HTML Buttons · HTML Responsive · HTML Layout

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
Common Mistakes
  1. Using plain, generic div elements for everything instead of semantic layout tags.
  2. Forgetting to write a closing div tag, which causes subsequent elements to merge and breaks layouts.
  3. Using styled div containers as interactive buttons without adding necessary ARIA roles or keyboard focus support.
Chapter Summary
  • The div tag defines a generic block-level container that carries zero semantic meaning.
  • Use divs to group elements, separate sections, and apply CSS styling or Flexbox layouts cleanly.
  • Always write clear indentation and closing tags to keep your layouts organized and easy to maintain.
Browser Support

Standard div elements and block-level styling rules are supported natively by all web browsers.

🔒

Chapter Quiz — Complete all 12 topics to unlock

0/12 topics done

Complete these topics first:

← Previous Lesson HTML Computercode Next Lesson → HTML Buttons

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.