Divs & Spans
HTML is all about marking up and giving meaning to content. The majority of HTML tags are meaningful. An <img> is an image, <footer> represents a footer section of the page, and <header> signifies a header section, for example. When we see these elements in our code, we have a pretty good idea of their intended purpose.
<span> and <div> elements are used quite extensively in conjunction with CSS but hold no presentational value by themselves. They also apply no meaning at all to their content. So why do we use them and when is the right time?
Well, we use divs and spans to divide or contain related sections of HTML where a more semantic element like header or footer is not relevant or suitable.
The difference between <span> and <div> is that a span element is used inline, whereas a div element creates a division. It is a block-level element that groups a distinct, related section of code separate from the rest of the page.
LOOKING AT DIVS
We have used the <div> tag a little in previous sections, but we have yet to go into detail about what the <div> element is. We have not discussed why we need it and why it is essential when structuring our web pages.
If you inspect any web page, you will often find them littered with div tags.
The overuse of nested divs throughout a page is a well-known problem in web development known as Div Soup.
Below is an illustration of the source code for Medium.com. Medium is an online publishing platform developed by Twitter co-founder Evan Williams. We see divs nested almost 20 deep in some places!
Div Soup refers to the excessive use of div elements where other semantic HTML elements could provide more meaningful code.
Nesting divs inside of divs, inside of more divs, makes websites less accessible due to the meaning or purpose of the content being harder to interpret by browsers and screen readers used by the visually impaired. Also, this practice makes our lives as developers harder as code is more difficult to read and maintain.
But divs do have a purpose, and that is what we will learn about in this section. In a later section, we will learn about semantic HTML that provides alternative elements we can use to give grouped or related sections of code more meaning than standard divs would.
LOOKING AT SPANS
In the form below, we used spans inside the <fieldset> legend so we could isolate some inline text and style it differently to other text within the same <legend>.
You can see that the <span> is just wrapping the numbers. The span is not doing anything in itself, but it allows us to isolate the numbers so that we can style them differently from the rest of the text. The span, in this case, acts as a separator or a divider. Much in the same way as a <div> would.
THE ROLE OF DIVS & SPANS
So, divs and spans do not do anything on their own except separate content, and you usually will not see any tangible changes on a page when you use either of them.
If you switch to the CSS panel in the CodePen above and delete all of the CSS, you will see that the span makes no tangible change to the now unstyled text.
The span is still in place, but now we do not see any difference in the content wrapped inside. If you return to the HTML panel and delete the span, and you can see again that the span by itself was making no difference to the content by itself.
The same would be true if we wrapped some content in a div. No change would be apparent on the page. With the CSS added back in, we would see that despite the fact the HTML has changed, in that we have name and email inputs, plus their respective labels inside a div, everything remains the same visually.
So far, all of the elements we have seen, h1-h6 headings, p elements, tables, links, images, lists, forms, and its nested elements, all do something to the content nested in them in some way, in that they inform the browser how the content should display. Divs and spans tell the browser nothing about how their content should display.
WHY USE DIVS & SPANS?
If the above is true, then why do we use divs and spans?
This MDN page open on the div tag, tells us that a <div> or division is a generic container for content and does not represent anything by itself. You can use it to group elements for purposes such as styling using the class or id attributes.
So let’s remember those two points:
- for grouping elements.
- for styling
These tags are used primarily as targets for your CSS. You use them to divide or label your HTML (when another semantic element will not work) and use CSS selectors to target them. So divs are going to be incredibly handy for us when we are working with CSS, and we are now beginning to set up and prepare ourselves to use it.
So let's take note that a div is a division or container that you would use to group certain elements, and we can make use of the div to target those grouped elements with CSS.
The MDN page on the span element tells us that <span> is an inline container, which does not inherently represent anything. We can use it to group elements, like we saw with the <div>, but <div> is a block-level element, whereas a <span> is an inline element.
HOW TO USE DIVS AND SPANS
That is interesting. We have a clear difference between how spans and divs behave.
- A div is a block-level element
- A span is an inline element.
As an example, we could use a div to hold a section of text:
<div class="main-text"><h3>This is a subheading</h3><p>This is a paragraph. Below is another paragraph with some placeholder text.</p><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam expedita, sit eius praesentium necessitatibus ullam quisquam nostrum fuga minima dolorum unde quaerat quod alias aspernatur?</p></div>This is a subheading
This is a paragraph. Below is another paragraph with some placeholder text.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam expedita, sit eius praesentium necessitatibus ullam quisquam nostrum fuga minima dolorum unde quaerat quod alias aspernatur?
The <div> groups the whole section and contains it as a distinct and divided up section of the page. We could now use CSS to style that div and its contents uniquely.
The <span>, however, will not group whole blocks or sections of content. Instead, the span will be inline and will isolate portions of content within an element that we want to style differently.
Using the same code as above, I will use a span to isolate where it says "placeholder text" and use CSS to underline that isolated text.
<div class="main-text"><h3>This is a subheading</h3><p>This is a paragraph. Below is another paragraph with some<span style="text-decoration: underline;">underlined text</span>.</p><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam expedita, sit eius praesentium necessitatibus ullam quisquam nostrum fuga minima dolorum unde quaerat quod alias aspernatur?</p></div>This is a subheading
This is a paragraph. Below is another paragraph with some underlined text.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam expedita, sit eius praesentium necessitatibus ullam quisquam nostrum fuga minima dolorum unde quaerat quod alias aspernatur?
So we see the span has isolated a small portion of the text within the paragraph and allowed us to do something different with it.
In this case we've applied some simple inline CSS styles, which we'll learn about in the next section. This is not the best application of CSS, but serves our purposes here, as inline styles follow the familiar pattern we know of an attribute that has a key/value pair.
DIVS & SPANS EXERCISE OUTLINE
Below is a simple CodePen project that includes various HTML elements we already know.
The HTML panel contains some comments that show that we have a series of very distinct sections here on our page that we can divide up into groups of related content.
I want you to divide these sections using divs. Wherever you see content that you think should be grouped, wrap it in a div.
A div is written with an opening tag and a closing tag, and any content we want to group goes between these tags.
<div> </div>So in the CodePen above, add the divs as shown in the image below. We will take a distinct section of our page nest it inside a div to separate it from other content.
As we discussed earlier, the div will not do anything by itself. But here, when you do add a div, you will see a style change reflected on the page. I have added this with CSS for the purposes of this lesson, so that you have a visual indication that content has been placed in a div. The content will have a red border with red text on a pinkish background.
For this demonstration, I am not using IDs or classes as that will be the next topic we cover. I just wanted to explain divs and spans in this video. So I am applying styles directly to the div and the span element with CSS element selectors. If you do not know what this means, we will explain it in the CSS section.
DIVS & SPANS EXERCISE WALKTHROUGH
So we have the follwoing sections:
- Navigation
- A header
- An about section
- A product section
- A contact form
- A footer
Navigation
The best place to start is with the navigation section, which is a clear and distinct part of our page. We can group this or put it into a div to separate it from other content. It contains a series of links that will eventually navigate to unique parts of our web page.
We could group this section with the more semantic <nav> element here, but for now, our goal is to get used to working with divs.
HTML5 gave us lots of new elements that work just like divs but have a more meaningful purpose.
We have a full section on semantic HTML elements, and we will look at <nav> then.
So we will add a <div> element, remembering the opening and closing tags, and create some space between them.
Next, we will move our navigation markup and content inside. When you save, there is ordinarily absolutely no change on the page. But we have included some styles, which indicate that we have wrapped the content in a div.
We now have this red box, and the content is separate from the rest of the page.
Header section
The header section is the next distinct part of the web page and the second contender for being grouped within a <div>.
Again, there are more descriptive and semantic elements we could use, but once again, we will practice using the div. We can highlight all of the header content and cut it, create our div element, create space inside, and finally, paste our cut content inside the two div tags. Just as we saw with the nav element, our content is in a red box when we save, separate from all the rest of the webpage.
Complete the rest of the sections in the same way
So this is the process that we will follow for the rest of the distinct sections of the page. We take the existing content and place it within the opening and closing tags of a div element. I will refrain from walking you through this, so your challenge is to group the about and product sections, the contact form, and the footer within divs.
When you have finished adding divs, your CodePen should look something like this:
Not the prettiest web page in the world, but that's not the point. If yours looks like this, then you have correctly identified each section and successfully applied divs where they need to go.
Adding Spans
Once all of our content divided up and grouped into divs, we will have a look at spans.
What if there was one small bit of content, say a small part of a sentence of text, that we wanted to separate and style differently to the rest of the sentence.
This is where we would use a <span>. If you remember the last vferw sections on forms, we had a <legend>that contained a number and some text.
We styled the number differently from the rest of the label text by wrapping it in a span.
We can do this to any of the content on our page. So I will choose the first sentence in our about us section and wrap it in some <span> tags.
In the CSS, you will see that I have some styles which will turn anything wrapped by a span blue. This indicates which content is inside a span, making it stand out to us among the divs on the page.
So if we also wrap the third link in the navigation section in a span, we can see quite clearly where the spans are.
Content wrapped by the span is not starting on a new line or pushing any following content below. .
With the spans and divs added, the page should look something like this:
SUMMARY
So, there are many differences between divs and spans. The most notable difference between the two is how elements are displayed. A div is a block-level element, whereas a span is an inline element.
As the div is a block-level element, it visually isolates a section of the page. The span element displays its content in line with the surrounding content. Also, the span may only contain other inline-level components. So if we tried to nest a div inside a span, it would not work.
We can override these default behaviors with CSS, although the permitted contents of each element may not be changed. For example, regardless of CSS, a span element may not contain block-level children.
Ok, so I hope you now know how we use divs and spans and can explain the differences between the two.
Going forward, you will use both divs and spans liberally, and you will get quite used to grouping content in them.