Generic containers like div and span are HTML tags without semantic meaning that we use exclusively to group other elements or portions of text.
Unlike a paragraph or a heading, which have a clear purpose and predefined formatting, these containers are like completely empty cardboard boxes.
We use them to logically organize our content before we start styling it with CSS or programming it with JavaScript.
In addition to looking at these tags, they will be very useful to explain a behavior of HTML. All HTML elements are divided into two large families: block elements and inline elements.
Block elements: <div>
A block element is one that by default takes up all the available width of the screen, from the left edge to the right edge, pushing everything else downwards like an insurmountable wall.
The div tag (short for division) is the king of generic block containers. It is your large cardboard box.
<div>
<h2>My special section</h2>
<p>This text is inside a container.</p>
</div>
When you put content inside a <div>, the browser creates a line break before and after the box (although we can modify things with CSS, as we’ll see in due time).
The tags we already know, such as headings (<h1>), paragraphs (<p>), or lists (<ul>), are all naturally block elements.
That’s why one paragraph never automatically sits to the right of another.
Inline elements: <span>
On the other hand, an inline element is much more polite. It only takes up the width strictly necessary to wrap its content, without forcing any line breaks or disturbing its neighbors.
The span tag is the quintessential generic inline container. It is exactly like taking a fluorescent marker and underlining a specific word within a continuous sentence.
<p>My favorite color is <span class="texto-rojo">passion red</span>, and I wouldn't change it for anything.</p>
If in the previous example we had used a <div> instead of a <span> to group the word “passion red”, the browser would have split the sentence into three different lines.
Links (<a>) and images (<img>) are the perfect example of inline elements.
You can put ten small images in a row in the HTML code, and the browser will draw them next to each other until space runs out.
When to use div and when to use span
Use <div> when you want to group complete blocks of content: a card, a visual section, a column, or a container that you will later layout with CSS.
<div class="tarjeta-producto">
<h2>Arduino UNO</h2>
<p>A great board to start with.</p>
</div>
Use <span> when you want to mark a small fragment within a line of text, usually to style it or select it with JavaScript.
<p>Order status: <span class="estado">Shipped</span></p>
