The Difference Between Span and Div
What's up, coders!!
Let's be honest: do you TRULY know the difference between the HTML tags <span> and <div>?? 🤔
Most people just use tons of <div>'s and call it a day -- BUT, the almighty <span> tag is just as useful! Let's take a look ⬇️
Table of Contents
Summary 😎
BOTH <div> and <span> group together related parts of a webpage, but they both serve different functions 👀
They're mainly used to group together chunks of HTML, and hook information onto that chunk of HTML! Most commonly,<span> and <div> are used with the CSS attributes class and id to associate the element with a certain CSS class or id selector. 🥰
🌟 Note that <span\> and <div> are not Semantic! Get a review on your Semantic HTML tags here! 🥳
Here's an example of <div> and <span> being used together ⬇️
<div id="cat">
<p>I love my cat <span class="meow">SO MUCH</span></p>
</div>
Within the <div>, the <span class="meow"> gives the words 'SO MUCH' whatever style you create in the CSS file with the .meow selector!
Let's break down <div> and <span> individually ⬇️
What is <span> ?? 🤯
The <span> element is an inline element, typically used to apply styling to a portion of inline content!
What's an inline element?
An inline element does not start a new line and only takes up as much space on the page as its content.
<span> tags are used on small portions of text, links, images, and other HTML elements that appear in line with the content around it.
Summary: <span> is usually used to apply styling to a portion of inline content!!
Check out an example ⬇️
<span id="span-0"> This text is inside a span element. </span>
<span id="span-1"> This text is inside another span element. </span>
What is <div> ?? 🥸
The <div> element is a generic block-line element, most often used to divide page content into blocks!
What's a block-line element?
A block-line element starts a new line before and after the content encased in the tag and has a width equal to the entire page or the parent container 😎
You’ll often see divs used to group related paragraphs, images, headings, and links together!! (But, <div> should NOT be abused too much! Don't forget your Semantic HTML! Click here for a reminder) 👀
A basic example of <div>'s look like this ⬇️
<div id="div-0">
<h2>This is a heading inside a div element</h2>
<p>This a paragraph inside a div element.<p>
</div>
<div id="div-1">
<h2>This is a heading inside a div element</h2>
<p>This a paragraph inside a div element.<p>
</div>
Examples 🤯
Let's look at the above blocks of code in Codepen to solidify your understanding ⬇️
And here's the second example ⬇️
and that's all, folks! 🥳🥳
Thank you for reading this far!! I hope this helped clear up any confusion you had about <span> and <div> 🧡 feel free to drop me any questions or shoot me a DM on Twitter if you're still confused!
Give me a follow here on Hasnode or Twitter if you enjoyed this post 🥰🥰