Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:7Length:40 minutes
Semantic 1
  • Overview
  • Transcript

2.2 Better Outlining With Sections

In this lesson, you will explore the similarities and differences between sections and divs, learning when best to use each. You will also learn how using semantic sectioning elements affects the outline of your document.

2.2 Better Outlining With Sections

Hello and welcome back to our semantic HTML course on how to structure webpages. Now that you understand the ramifications of ignoring structure, let's take a look at the most basic of HTML5 semantic structural elements, the section element. And see what kind of effect it can have on our outline. Now there's a lot of confusion in regards to the section element. In that many developers, who don't know better, are using this element as a generic container element. Well, that's what divs are for. If you need to wrap an element around some content just for styling purposes, then use a div. The section element is supposed to be used in HTML5 to mark up a section of content that it would make sense to include in the document outline. And this will make more sense as we start to work through our file. So again, if we look at our divs file, let's take a look at one of the most glaring problems with our outline, and that's this main section right here. In our outline, it looks like these three products are supposed to be child elements of this news section, where it says New Locations Nationwide. Well as we can see here, these are not supposed to be children of this element up here. These are two distinct sections, but we've only marked them up with divs. And since divs have no semantic meaning whatsoever, our HTML outliner is simply looking at the levels of our heading tags. And since this Is an H2 and these are H3s, it's simply placing those H3s under the H2s. So let's see how we can fix that using sections. So I'm gonna start with the same file that we've been looking at, this divs.html file. And I'm gonna make another copy of it, so I'm gonna save this as sections.html. And we'll start with this and by the end of this lesson you should be able to see our end result in the sections.html file found in your project files folder. So I'm gonna change the title here to Sections, and that's a good start. So let's jump back to our browser. And I'm gonna make another copy of this tab, so we can right-click on the tab itself, click on Clone Tab, and it'll make another copy of it. And in this new copy, we'll just change divs to sections.html. So now we have two identical documents, and I wanna keep them both open so that we can go back to the first document and compare our old outline to our new one. So let's go back to sections.html, and then we'll jump over to whatever text editor you've chosen to use. So I'm gonna scroll down to our main section here. We have our main content section here which contains news and featured products. So we mentioned before that a div is used as a generic container element that you might want to group together just for styling purposes. Whereas a section element is used to mark up a specific section of content that it makes sense to include in your outline. So this container div up here at the top, that should stay a div. It's really just a container element. We even called it container, so we're going to leave that one alone. The main content section is kind of the same way. We're just using it to group together the main content. Not in order to include it in our outline but in order to group it together for styling purposes or so that we can target this particular item in CSS, or JavaScript or whatever. Inside the main content however, we have this div with a class of news. This news section does make sense to include in our document outline. So instead of using a div here I'm going to turn this into a section, and I'm going to highlight the word section there and copy it because we'll need it in a few places. First of all we'll need to change our closing div to a closing section element. So now our news section is contained in its own section element, and then we have our featured products below. Let's change this to a section element as well. This is another section of our page that it makes sense to include in our outline. So we're gonna change our div to section, and our closing div tag down here to a closing section tag. Also, we have Product 1, Product 2, Product 3, within that featured product section. And it makes sense to include these separately in the document outline as well. So we could change these divs to sections as well. So we'll change that in our closing div, and the same thing for our other two products. There we go. So it makes sense to include all of these section elements because these are items that you would want in your outline. So let's save our file, jump back into our browser and refresh, and you can see that not much changed. We have a little bit of a styling issue now. And in order to address that styling issue, I don't want to make changes to the existing divs.css file, so I'm going to save a new copy of it as well. And we'll save this new copy as sections.css. And then in our sections.html file, we'll change that reference to sections.css. And then we'll jump back to our CSS file, and I wanna look for our main items, or our product items here, which we can find right here. And we can see, again, if we jump back to our sections.html page, and again we can see that our third column is jumping down to the next line. So maybe if we just reduce the width or maybe the margin right here. Let's just set that to 1% for now. I don't want to spend a whole lot of time on the CSS, cuz that's not really what we're trying to accomplish here. So, I'm just going to spend just a little bit of time trying to get this how we want it. But then again it doesn't make a whole lot of difference for this particular lesson because we are really focusing on structure. But there we go, we've got our columns back how we want them. And, if we look at our HTML again, we can see that we now have clearly delineated sections instead of divs. So let's see if that has an effect on our outline. Let's jump back into our new sections.html page. Click over here on our HTML5 outliner and we can see right away that we have a difference. So we have the new locations nationwide, which is this section here. And then as a sister or sibling element of that new section, we have an Untitled Section that contains Products 1, 2, and 3. So we could go into our code again, and any time you see an Untitled Section in your HTML5 outliner outline here. You know that it's because you've created a section that does not have a heading tag immediately inside it. So if we were to put maybe another H2 here and give that H2 a name of let's say, Future Products and then save that. We can go back to our page and refresh it and then once we open up our document outline, we can see that that section has a title. Now you might not want that title to appear on the page, but it can be very helpful for things like screen readers, and web bots or search engine bots to understand the structure of your document. So, even if you don't want it on the page it can be very helpful to have it. So, if you don't want it, we can just jump back into our code and we can give this H2 for example. A class of hidden and then in our CSS, we can just create a new rule for the hidden class and give it a display of none. So you can save that refresher page and now that heading is gone but if we look at our outliner, we can see that it's still included in the outline of our document. But we can already see how using sections instead of divs can improve the outline or improve the way that machines can see or read the outline of our documents. Because now instead of having these three products as child elements of the News section, we now see that that Featured Products section is a sibling element of the News section. And the products are a child of the Featured Products section. Now that makes a lot more sense. So I want to encourage you to work through the rest of this document, and put section elements where it makes sense to use them. Thank you for watching, and I'll see you in the next lesson.

Back to the top