Lesson 16: HTML Div & Span

Grouping Elements with Div and Span

The <div> element is a generic block container, while <span> is a generic inline container. Neither carries semantic meaning on its own.

<div class="card"><span>Highlighted</span></div>

Why&How to use:

Use <div> to group sections for CSS layout styling and <span> to target specific words or character groups within a block.

			
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Div and Span</title>
</head>
<body>
    <div style="border: 1px solid black; padding: 10px;">
        <h2>Container Title</h2>
        <p>This text has a <span style="color: red;">red inline word</span> inside a div container.</p>
    </div>
</body>
</html>

		