Codectionary / Developer documentation / HTML

<div>

The <div> element is a generic container used to group and organize content on a web page. It has no semantic meaning on its own but is essential for layout and styling. Think of it as a box that can hold other HTML elements. Divs are block-level elements, meaning they start on a new line and take up the full width available.

Syntax

<div>
  <!-- Content goes here -->
</div>

Examples

Basic Container

Using a div as a simple container to group related content together.

<div>
  <h2>Section Title</h2>
  <p>This is some content inside a div container.</p>
  <p>Divs help organize your page structure.</p>
</div>

Styled Card Component

Creating a card layout using div with inline styles for visual presentation.

<div style="border: 1px solid #ddd; border-radius: 8px; padding: 20px; max-width: 400px;">
  <h3 style="margin-top: 0;">Product Card</h3>
  <p>This card demonstrates how divs can be styled to create visual components.</p>
  <button style="background: #007bff; color: white; border: none; padding: 10px 20px; border-radius: 4px; cursor: pointer;">Learn More</button>
</div>

Grid Layout

Using multiple divs to create a responsive grid layout for content organization.

<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;">
  <div style="background: #f0f0f0; padding: 20px; border-radius: 8px;">
    <h4>Column 1</h4>
    <p>Content here</p>
  </div>
  <div style="background: #e0e0e0; padding: 20px; border-radius: 8px;">
    <h4>Column 2</h4>
    <p>Content here</p>
  </div>
  <div style="background: #d0d0d0; padding: 20px; border-radius: 8px;">
    <h4>Column 3</h4>
    <p>Content here</p>
  </div>
</div>

Nested Structure

Demonstrating how divs can be nested to create complex layouts and hierarchical structure.

<div style="background: #f5f5f5; padding: 20px;">
  <div style="background: white; padding: 15px; margin-bottom: 10px; border-radius: 4px;">
    <h3>Parent Container</h3>
    <div style="background: #e8e8e8; padding: 10px; border-left: 3px solid #007bff;">
      <p>Nested child div with custom styling</p>
    </div>
  </div>
</div>

Attributes

  • id (string): Unique identifier for the div element
  • class (string): CSS class names for styling
  • style (string): Inline CSS styles
  • data-* (string): Custom data attributes for storing extra information

Best practices

  • Use semantic HTML5 elements (section, article, nav) instead of divs when appropriate
  • Add meaningful class or id names that describe the content, not the appearance
  • Avoid excessive div nesting (div soup) - keep your structure as flat as possible
  • Use divs for layout purposes and semantic elements for content structure
  • Consider using CSS Grid or Flexbox on divs for modern, responsive layouts
  • Don't use divs where a more specific element would be better (like <button> for buttons)

At a glance

Purpose
Structure and meaning for web content
File extension
.html · .htm
Runs in
Web browsers
Usually used with
CSS and JavaScript

Specifications & further reading

Related HTML documentation

HTML
HTML (HyperText Markup Language) is the standard markup language for creating web pages. It structures web content using elements and tags, defining everything from headings and paragraphs to images and links. HTML forms the backbone of every website, working alongside CSS for styling and JavaScript for interactivity.<body>
The <body> element contains all the visible content of an HTML document — text, images, links, forms, and everything a user actually sees and interacts with in the browser. There can only be one <body> per document, and it must come after the <head> element. Unlike <head>, which holds metadata, everything inside <body> is rendered on the page.<head>
The <head> element contains metadata about the document — information that is not displayed directly on the page but is used by browsers, search engines, and other tools. This includes the page <title>, character encoding, linked stylesheets, scripts, and social media preview data. It must come before <body> and contains no visible content itself.<hgroup>
The <hgroup> element groups a heading with one or more subheadings or taglines, treating them as a single unit in the document outline. It is commonly used to pair a main title with a subtitle, so the subtitle does not get counted as its own separate heading level by accessibility tools.