Let's compare <div> and <span> by looking at what kind of content they group.
- <div> is a generic block container. Use it when you need a container but no more meaningful HTML element fits. - <span> is a generic inline container. It is useful for a small piece of text or inline content. - Put several related blocks inside a <div> when a generic wrapper is actually needed. - Put a word or short phrase inside <span> when you need to target that small piece. - A <div> normally starts on its own line in the browser's default rendering. - A <span> normally stays in the current line. - These default visual differences are not the main purpose of the elements; their main job is grouping. - Before using <div>, check whether a semantic element such as <section>, <article>, <nav>, or <main> better describes the content. - Before using <span>, check whether an existing semantic element already describes the text.
Think of <div> as a generic block box and <span> as a generic inline wrapper.