HTML Div and Span Elements

Understand how to use `<div>` and `<span>` elements for block-level and inline grouping in HTML.

Div and Span

<div> and <span> are generic container elements used to group and style other elements.

`<div>` Element

Type: Block-level element.
Usage: Groups larger sections of content.
Common Use Cases: Layout structures, sections, wrappers.

Example:

1<div class="card">
2  <h2>Card Title</h2>
3  <p>This is some information inside a card.</p>
4</div>

`<span>` Element

Type: Inline element.
Usage: Styles or groups inline elements within text.
Common Use Cases: Highlighting text, applying styles to parts of a sentence.

Example:

1<p>The temperature is <span class="temp">24°C</span> today.</p>

`<div>` vs `<span>`

| Feature | <div> | <span> | | ---------------- | ----------------------------------------- | ------------------------------------------- | | Display Type | Block-level | Inline | | Usage | Grouping larger sections | Styling parts of text | | Default Behavior | Starts on a new line | Does not start on a new line | | Example Use Case | Creating a container for a navigation bar | Highlighting a specific word in a paragraph |