Prev Next

HTML Div

The <div> element is a generic container used to group other elements and apply styles or layout structures. As a block-level element, it doesn’t convey semantic meaning by itself, but it provides a way to section your page into logical parts.

Key Topics

Basic Div Usage

Example: Using a <div> to group content.

<div>
    <p>Paragraph inside a div.</p>
    <ul>
        <li>List item inside the same div</li>
    </ul>
</div>

Styling Divs

Example: Applying CSS to a div to create sections or layouts.

<style>
.container {
    background:#f0f0f0;
    padding:20px;
    margin-bottom:10px;
}
</style>
<div class="container">Content here</div>

Div Example

This example shows a styled div acting as a section container. A full code sample is provided below.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" >
    <meta name="viewport" content="width=device-width, initial-scale=1.0" >
    <title>Div Container</title>
    <style>
        .section {
            background:#e9e9e9;
            padding:15px;
            margin:10px 0;
        }
    </style>
</head>
<body>
    <div class="section">
        <h2>Section Title</h2>
        <p>This is a paragraph within a styled div section.</p>
    </div>
    <div class="section">
        <p>Another section with its own content.</p>
    </div>
</body>
</html>

Explanation: By wrapping content in <div> elements and applying classes, you can structure and style your page effectively without adding semantic meaning. For semantics, consider HTML5 semantic elements like <header>, <footer>, or <section>.

Key Takeaways

  • <div> is a generic container for grouping elements.
  • It helps structure the layout and apply targeted styles.
  • Use classes or IDs on divs for easy CSS styling or JavaScript targeting.
  • <div> lacks semantic meaning; use semantic tags for content meaning.
  • Divs are still very useful for layout and organizing page sections.
Prev Next