2.1 Divs, Headings and the Document Outline
Before end users ever lay their eyes on your website, your code will (probably) be crawled by search engines. If you don’t know how to properly structure your HTML, you could be severely damaging your site’s SEO and accessibility efforts. In this lesson we’ll take a look at why.
1.Introduction1 lesson, 00:55
2.Semantic Markup5 lessons, 36:35
3.Conclusion1 lesson, 02:46
2.1 Divs, Headings and the Document Outline
Hello and welcome back to our semantic HTML course, on how to structure web pages. When you're creating the layout of your site in HTML. One of the first things you need to ask yourself, is who are you structuring this website for? Are you structuring it for yourself, for your boss? Are you structuring it for the end-user? Well, if your answer falls into any of those categories, then it's entirely possible that your structure will still be inadequate. What you need to realize is the even though your website is ultimately intended for consumption by the end user. Your website still needs to be structured with the understanding, that if the structure itself is not clear and legible to a machine. Such as a screen reader or a search bot, then your content may never find it's way to the end user's browser. So in this lesson, I want to show you the ramifications of ignoring structure. Of ignoring semantic mark up, when it comes to laying out the structure of your document. And I'm gonna be working with a very simple, minimally styled html file called divs.html. Which you can find in your project files folder. And I'm gonna be testing this in the Opera browser. And the reason I'm doing that is because Opera has a really nice extension you can download Called HTML5 Outliner. And this Outliner extension allows you to see how a machine would look at the structure of you document, according to the HTML5 Outlining algorithm. So, once you have Opera installed you can go to the Tools menu, go to Extensions and Get Extensions. And then simply do a search for html 5 Outliner. And you should be able to find and install this extension. And you can see the icon for that extension embeds itself up here next to the search field. And we can click on that to see the outline of our document, which we'll take a closer look at in just a moment. So, on our Web page here on divs.html, we have a simple header, a nav bar below that. And then in our Main Content section, we have this left column. Which has a couple sections in and of itself. It has a News section at the top, and then a few featured products below that. And then we have a side bar over here to the right, with some ancillary content. And then at the very bottom we have our footer. So let's jump into our text editor of choice. I'm using Brackets here. And let's take a look at divs.html. And you'll notice that it's linking to divs.css for styles. And in the html itself, we're completely ignoring semantic markup altogether. I'm using divs to section off, and layout all of my content. So that I can target those divs in my css. So again in this lesson, I want to talk about the ramifications of doing things this way. And one thing I wanna point out, that we're gonna learn very quickly. Is that divs themselves have no semantic meaning whatsoever. So divs don't do anything to help out the structure of your site. As we're about to see. So we have this div with a class of header. In it we have an h1 and h2 tag representing the title and, kind of, subtitle or tagline of our site. Below that we have our navigation. Which is in another div, which contains an unordered list. And then outside the header we have a div with a class of container. Inside that we have our main content div. And inside that div there's another div with a class of news. So this has our news story in it. Below that, we have another div with a class of featured products. Inside that, we have three separate divs, each with a class of product. Then outside the main content div, we have another div with a class of sidebar. Which has a couple of sections in it, which are put inside div tags as well. And then after all that closes off we have a div with a class of footer. So that's how we get where we are, when we see our page here. So let's take a look at what our outline looks like. So I'm going to click on this HTML5 outliner icon again, to pop up that outline. And it's a very nice, succinct outline. It's very easy to read. And I want to open that up side by side with Brackets here. So that we can kind of compare what we've got, with what we're seeing in the outline. So first of all we see. As the number one item in our outline, Products, Inc., and as you can see that is the text inside our H1 here. And one thing you'll notice as you look closely at the outline, and compare it to our page. Is that all of these entries in the outline are signified by H1 through H6 tags. And it's these heading tags that help things like screen readers, and search bots to understand the structure of your document. And if you don't know what you are doing, the chances are the outline is not going to look like what you hoped It would look like. So again as we can see the number one item in our outline over here on the right is Products Inc. Then as a child of that item we have Making Products for People Who Buy Stuff, which is the h2 tag right underneath it. And it kind of makes sense that that would be a child of Products Inc, because it's kind of the tag line for the title. So far so good. However, if we go further we can see the next item is new locations nationwide. Which is down here in the Main Content Section in an h2. And, so it's treating this h2 like it's a sister or a sibling of this h2 up here, Making Products for People Who Buy Stuff. And I don't know that that's necessarily what we're going for. Because right here we have all of this grouped into a header. And the h1 is in that header, which is the number 1 item here on our outline. And the h2 is in our header, which is the first item that's indented. And then the third item in our outline, this New Locations Nationwide, is in a completely separate div. So it seems like that should be a sibling element of our top level element here. But as we can see over here on the right in our outline, that's not the case. Another point of confusion will come when we go down into this section. You'll see again we have this h2 with New Locations Nationwide. And over here on the right you can see that this item looks like it has three child items, product one, two and three. Well those items are not supposed to be children of New Locations Nationwide. This New Locations Nationwide is a news item. And it's even contained in a div with a class of news. And then these three products are inside a completely separate div. And they are highlighted with h3 tags, and each one of these has another div around it. So we have another couple layers of divs here, separating this content out. However in our outline, we can still see that it's treating those three products like they are a child of New Locations Nationwide. If anything, if we go back to our page, these three products would be the child of the section that contains those three products. Not a child of the section that comes before it. So there's another example of how the structure of our document doesn't line up with what we expected. So then we have our recent blog entries which kind of indents back out, and acts like a sibling of New Locations Nationwide, and a sibling of Making Products for People Who Buy Stuff up here. So basically this outline is saying that, this subtitle here, this title here, and Recent Blog Entries, are all siblings. And if you look at the document visually without looking at the outline, that's not really what we're going for. Also, since we're using different levels of headings here and here. It looks like the about us has been placed as a child element of the Recent Blog Entries. And that's not what we're going for either. And then for contact information, down here at the bottom, again is being treated as a sibling of these other h2 tags in our document. So, one of the most important things that we can learn from this, is that if we only use divs to section out our different elements. Then those divs are providing nothing in the way of document structure. The only thing these divs allow us to do, is it allows us to use CSS to style these different sections. But as far as a screen reader is concerned, If it sees all of these divs it's just going to ignore them. And the only thing that screen reader, or search bot, or whatever. Whatever machine is crawling through your website. The only thing those items, or those machines are going to see as far as the structure of your documents goes, are gonna be your h tags. So, all that we see over here, on the right. This outlined that we see, is 100% created base on h1 through h6 tags. No matter how we group things together in divs. All of those divs are being ignored. Well, as we move forward, I want to show you how we can use semantic elements to change the way our structure is perceived. But for now, again, I just want you to understand the ramifications of ignoring structure. And assuming that your structure is okay as is. And as I mentioned before, if a screen reader or a search bot doesn't correctly understand your structure. Then you might have trouble getting good search results in Google, or in other search engines. You might have difficulty getting screen readers to read your content appropriately. For people who might be visually impaired. If you completely ignore semantic elements, if you completely ignore the structure of your document. Then your website is not going to be very accessible. And one thing that we've over the last few years, is that if your website isn't designed with accessibility in mind, then you're also not gonna get very good search engine optimization results. So even though this may seem like a minor topic, it can have significant impacts on who ends up viewing your your website. So I can't stress enough how important this topic is. And how important it is that you learn how to structure your documents appropriately. So thank you for watching, and I'll see you in the next lesson.