Very basic explanation of <div> / <span> elements
Jemima M
Posted on March 27, 2023
In this short blog I want to introduce you to the <div> and <span> elements, so let us get started....
<span>
The <span> tag is an inline container for inline elements and content. It is used to group a set of inline elements. You use <span> to hook a text or a group of tags that you want to style differently. For example:
<h1>Hello World <span class="main-title">this is the second part of the title</span></h1>
Yes you could use <strong> or <em> but the <span> element is definitely more versatile, you can style more with it.
In this example I used a "class" attribute. This basically names the element so that when using CSS or JavaScript, you can select and access specific elements.
<div>
The <div> tag is a HTML container. Its purpose is to let you group together other document elements to which you can style in CSS.
Here is an example of the <div> tag:
<!DOCTYPE>
<html>
<body>
<p>First paragraph</p>
<div style=”color:purple”>
<h3>This heading is set to purple in the div element.</h3>
<p>This text is also set to purple.</p>
</div>
<p>This text is not inside the div element so it will not be included.</p>
</body>
</html>
So a <div> is used to group various tags of HTML so that sections can be created and styles can be applied to them.
The difference between them
The <span> element is mainly used for styling inline content such as changing the colour, font or background of part of a text using CSS, whereas the <div> element is most often used to group elements together and apply CSS styles to many elements at once. It is also used to divide page content into blocks.
Remember that you always have to close these tags!
I hope that this short explanation has helped, thank you for reading.....and remember to...
KEEP CODING! 👩🏼💻
Posted on March 27, 2023
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
