Div & Span

Not everything on a page has a meaningful role like "navigation" or "footer." Sometimes you just need a plain box to group things, or a plain inline wrapper around a few words — that's what <div> and <span> are for.

<div> — a generic block

<div> carries no meaning at all. Its only job is to exist as a container, usually so CSS or JavaScript has something to target. It always starts on its own new line, pushing content after it down:

<span> — a generic inline wrapper

<span> does the same job as <div>, but inline — it doesn't force a line break, so you can wrap just a few words in the middle of a sentence to style or target them separately:

Reach for a semantic tag first

Because <div> and <span> fit anywhere, it's tempting to use them everywhere. The habit worth building is: check whether a more specific tag already fits — <nav>, <button>, <article>, <strong> — and only fall back to <div>/<span> when nothing else describes what the content actually is.