Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Deciding which structural element to use for content seems to be one of the biggest questions surrounding HTML5. One of the reasons that this process is so confusing is that often which element you'll use to describe content is really a judgment call. The elements do have clearly defined roles, but often those roles overlap, and cases could be made for using more than one element. In this movie, I want to take a look at the decision-making process for choosing the right structural semantic element for your page content. I'm going to take you through the process that I use for deciding which element to use.
Just keep in mind that these are my own rules for selecting elements. The more you use these elements, the more clearly defined your own selection process will be. So, the first thing I do is I ask myself a question: should the element start a new section? Now if that answer is no, the next question I ask is, is it introductory content? Now, if it is, I'm going to go ahead and use a header element. If the answer is no, the next question I ask myself is, does the content contain information about the author, related links, or some type of legal information? If that's the case, then I'll be using a footer element.
Now, keep in mind, footer elements don't have to be at the bottom of the page, and they don't have to contain just the content that you've listed here. Most of the time, kind of understand what the footer of a section is, but it's worth stating those questions aloud to yourself so that you're being consistent with it. Now if the answer to this question is no, then the next question I ask myself is, is the content being grouped together simply for stylistic reasons or to extend its meaning further through an ID or class attribute? And if the answer to that is yes, then I'm going to use a div tag.
If I'm just grouping it together, for example, for programmatically making a tab out of it with jQuery, or if I just need a certain section to have a background color but semantically it doesn't need to be grouped together for any one particular reason, then a div tag works really, really well for that. Now, if the answer to this question is also no, then I'm saying okay, this is not sectioning content. I need to find the appropriate grouping content element. So obviously, I was wrong about it being sectioning content in the first place, and it's time to use something else, for example, a blockquote tag or something of that nature.
Now let's go back to our original question: what if the answer of should it start a new section is yes? Okay, so the first thing that I ask myself is, is it a section of major navigation? If it is, then obviously I'm going to use the nav element. Now remember, the nav element isn't used for every single grouping of links on my page, only for major navigation or navigation that I want to make sure is exposed to assistive technologies. Now, if the answer to this question is no, I have to pose another question to myself, and that is, is the content self-contained, and could it survive independently of the document? If the answer to that is yes, then I'm going to be using an article element.
Now, keep in mind the important part of this to me is the self-contained and independent nature of it, meaning can I syndicate this? Not necessarily am I going to syndicate it? But could I syndicate it, could it stand on its own, could it be republished? And if the answer to that is yes, probably I'm going to be using an article element for that. Now, if the answer to that is no, then I'm going to ask myself is the content only tangentially related to the content around it? So is it not germane to all the content surrounding it, but just sort of related to it? Now, if the answer to that is yes, I'll be using an aside element.
If the answer to that is no, then I'll ask myself one last question which is, is the content a thematic grouping, possibly containing content that could be arranged in a footer and a header? Now, I don't actually ask myself something in those terms, but I am asking myself, okay, does it belong together? Is this something that really needs to be organized in a sectioning element? Pay attention to that part, organized; does it need to be grouped within its own sectioning element so that it has its own hierarchy? If that's the case, then I'm going to be using a sectioning element for that. Now, if it's not the case, if it doesn't need to be grouped together, if the answer for that is no, then all I really need to do is use a heading to go ahead and create that implicit section if it doesn't need that internal structure.
So, there you have it! That is my element-selection process in a nutshell. Now of course, sometimes it's really obvious as to which element you're going to use, but in other cases, the content could be a little bit more ambiguous. In those instances, it's really good to have a selection process of your own like this one, which is going to lead you to using these semantic tags consistently. Your process may differ from mine. I know several web designers that I have an amazing amount of respect for that use the article element far more frequently than I do. So, the barrier for using that is lower for those guys. In the end, what matters is that your content is described in the most accurate semantic terms.
And, and this is probably more importantly, that you're using the elements consistently across your site or across your application.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 105484 Viewers
56 Video lessons · 117150 Viewers
71 Video lessons · 86382 Viewers
131 Video lessons · 41287 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.