Div vs. Span: A Quick Guide

A quick write up since I see so many people who don't know the difference. Now that AI is writing a lot more code, I wanted to share something useful for humans.

In HTML, div and span are fundamental elements but differ in their roles due to display behavior and use cases. A div is a block-level container (display: block) that takes up the full width of its parent and starts on a new line, making it ideal for structuring layouts or grouping multiple elements, like sections or cards. A span is an inline container (display: inline) that flows within text without breaking the line, perfect for styling small pieces of content, like a word or phrase, or targeting text for JavaScript.

Use div for layout and grouping, such as a container for a card component. Use span for inline tweaks, like highlighting text. Prefer semantic elements (e.g., section or strong) when possible for better accessibility. Both are non-semantic and can be styled with CSS or scripted, but their default behavior guides their use: div for structure, span for inline finesse.

Example: A div might wrap a title and paragraph for a card component, while a span could highlight a single word in a sentence.