Just a few years ago, you would have covered divs and spans much earlier in any course on HTML and CSS. Why? They are the most general, vanilla way to group content together — and used to be the only way to do so.
The difference between divs and spans is simple: one is block-level, and the other is inline. Remember that from last chapter?
Divs
Divs are a block-level element used to group content together, not dissimilar to <header>, <nav>, <section>, <article>, <footer>, <figure>, and <aside> which you've already seen in this course. There's one key difference, though.
Most of the time, when you want to group content together, you'll be able to do it using an HTML5 semantic element like header, nav, section, article, footer, figure, or aside. However, sometimes your content doesn't really fit any of these categories! In that case, you're encouraged to use divs to create block-level content groups.
Take the following web page screenshot:
The dark green disclaimer block isn't really a full section, nor is it an article, footer, nav, etc. Nonetheless, its two paragraphs need to be grouped together so the block's appearance can be changed to have a dark green background and be visually different using CSS (you'll see this later in the course).
This is a legitimate reason to use a div to group the two paragraphs together.
Here's the code:
<article>
<h1>Are self-driving cars worth the risk?</h1>
<div>
<p>Note: this is an editorial piece and does not reflect the official opinion of the Sun Journal.</p>
<p>For more information about our editorial team, click <a href="#">here</a>.</p>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Id cursus metus aliquam eleifend mi in nulla. Lorem mollis aliquam ut porttitor leo a. Nisl vel pretium lectus quam id leo in vitae. Bibendum neque egestas congue quisque egestas diam.</p>
<p>Diam in arcu cursus euismod quis. Aliquet lectus proin nibh nisl. Blandit massa enim nec dui nunc mattis enim ut tellus. Integer enim neque volutpat ac tincidunt vitae. Amet porttitor eget dolor morbi non arcu risus. Orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt tortor.</p>
</article>Do you see where we isolated the section we wanted using a <div>?
Spans
Spans are similar to divs, except they are inline elements. You might use them to group words together, since words appear inline and not each on their own line.
Imagine the newspaper above always prints its name in bolded light green. You need to grab those two words — "Sun Journal" — to be able to apply CSS to them. Why not wrap them in a <span>?
<p>Note: this is an editorial piece and does not reflect the official opinion of the <span>Sun Journal.</span></p>
Now, this will come in handy when we start getting into CSS in part 4!
Practice!
In the next chapter, you'll see how to add custom names to elements so they're easier to tell apart. For now, why not do a brief exercise involving divs and spans?
Head to this CodePen exercise. You'll add div and span tags to the pre-written HTML. You will not notice any visual changes, but you should practice anyway!
Surround all the HTML code with a set of
<div>opening and closing tags.Indent the
<h2>and<p>elements so they are one tab further in than the<div>tags, like this:<div> <h2>...</h2> <p>...</p> </div>Surround the words "Lorem ipsum" in
<span>tags.
