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

2.3 Articles and Asides

In this lesson, you will make a few more changes to your HTML5 document as you add an <article> element and an <aside> element to the page.

2.3 Articles and Asides

Hello, and welcome back to our Symantec HTML5 course on structuring a web page. In our last lesson we looked at sections and how sections can improve the way a screen reader or search bot perceives the outline of your document, and at the end of that lesson I encouraged you to go through and add some sections of your own. So I've done that myself. I've created a new file called Sections2.html. And there's really only one more minor difference in the way the outline looks between these two. If we look at our outline here, we can see that About Us is a child of Recent Blog Entries. Well that's not what we want, those are two distinct sections in the sidebar. About Us is not supposed to be a child. But the reason it's placed as a child is because we only use divs here, which again are non-semantic. And Recent Blog Entries is an h2, About Us is an h3. So naturally it's going to assume that About Us is a child of Recent Blog Entries. However, in this second document, which you can find in your project files folder, sections2.html I didn't change the level of headings we use. We're still using an h2 and an h3 the only difference is, this part is wrapped in a section and this part down here is wrapped in a section, and since we used sections instead of divs. Our outline now lists those two items as siblings instead of having the About Us as a child of Recent Blog Entries. And if you want to see that, we can just jump over to our code very quickly and sections2.html, and sure enough we can see that the recent blog entries is now using a section element. And the About Us section is now using a section element. And again, I think I've sort of pointed this out before, but I don't know if I've made it clear. But the title of each of these sections is denoted by the first h tag that's just inside that opening section tag. So when a screen reader or search bot looks through the structure of your document, it sees this section. And then it takes a lot just inside that section, and if there's an h tag there, it assigns the content of that h tag as the title of that particular section. And we talked before about how if you don't want that title there, you can hide it, but it can be very helpful to have it there anyways. So now I wanna take a look at a couple more semantic elements in HTML5. I want to take a look at the article element and the aside element. The article element is used to mark up a section of content that can be pulled out and kind of treated as its own section, or its own bit of content. Something that can be published separately, such as a blog post or a news article or something like that. So as you can imagine, instead of using a section for this first portion up here, or this first block of content, we can actually set this up as an article, instead of a section. Well, let's see if that has an effect on the outline. So, I'm gonna give this a more generic file name here. I'm gonna change the name here to index01.html. So that file will be saved in our Project Files folder. So in this particular file, I'm gonna change this from a section element to an article element and we also need to change the closing tag here. And then we'll save our document. Again we're using index01 now. So let's jump back into our browser. I'm going to clone this tab, and in our new tab, I'm gonna open up index01.html. Again, our two documents are identical, the only difference is now this section is marked up with an article instead of a section. And if we take a look at our outline, you can see that the outline hasn't changed at all. Using an article has the same semantic effect on the outline as using a section element. Well let's take a look at the aside element. The aside element is meant to mark up a block of content that is somewhat related to the main content of the page but if that piece of content were taken away the page would still make sense as a whole. And this is often used for something like a sidebar. Such as we have over here on the right. So, I'm gonna jump back into our document, our index01.html document, excuse me. And if we scroll down here, we have our sidebar. So we have a div with a class of sidebar. I'm gonna change that from a div into an aside. So we'll change the opening div tag to an opening aside tag and then our closing div tag down here to a closing aside tag. So let's save that and jump back into our document and refresh it. Then we'll open up our outliner again. And we can see that the aside element now has an untitled aspect to it. Now for our purposes here, I don't really see a point in assigning a title to the aside element. I mean it's really just a couple of extra sections here that's not directly related to the main content, but it is somewhat related. But the two items inside the sidebar aren't really perfectly related to each other, so it doesn't really make sense to have a title for this. So it's okay to leave it untitled in this case. But as you notice, sometimes when you switch from a div to a section or article or a side or something like that, sometimes it does mess with your styling a little bit and you have to jump back into your CSS and redo your styles to get everything back where it needs to be. Now I'm not gonna walk through that again in this course because this is not a course on styling. This is not a course on CSS but keep in mind that does happen sometimes, so you might have to jump back into your CSS and restyle some things in order to get it back to what it looked like before. Now one thing I want to point out here is that this HTML5 outliner is not necessary a perfect representation of the HTML5 outline algorithm. According to the specification for the HTML5 outline algorithm, and aside is not really included in the main outline of your document. It has an outline of its own inside the aside element. But the contents of the aside aren't really listed in the main outline. But keep in mind that this HTML 5 outline algorithm is not yet fully pervasive. There isn't a whole lot of software out there that is actually using the HTML 5 outline algorithm as it is delineated in the specification. And we'll talk a little bit more later about what ramifications that can have but for now let's go ahead and move on to the next lesson. Thank you for watching.

Back to the top