Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
In HTML5 First Look, author James Williamson introduces the newest HTML specification, providing a high-level overview of HTML5 in its current state, how it differs from HTML 4, the current level of support in various browsers and mobile devices, and how the specification might evolve in the future. Exercise files accompany the course.
The addition of so many semantic tags like the section, nav, article, and aside tags has inevitably lead to some discussion over the role of div tags in HTML5. Over the years, the div tag has evolved into becoming the default container tag for almost all sections of content. Paired with the class and id attribute div tags are used to structure and identify headers, footers, articles, sidebars, and navigation in most web sites. Now that we have elements designed to explicitly represent various content types, how does that change how the div tag is used, or could it signify that we shouldn't even use it at all? A quick look at the HTML5 specification tells us this about the div tag.
The div element has no special meaning at all. It represents its children. It can be used with the class, language, and title attributes to markup semantics common to group of consecutive elements. Even more telling is this note. Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable. Use of the div element instead of more appropriate elements leads to poor accessibility for readers and poor maintainability for authors.
Now, the first thing to remember is the specifications are used as guidelines. Just because the HTML5 specification downgrades the use of divs over more semantic tags, doesn't mean that authors are going to do that. Their code may not be as meaningful or well structured as others, but a page structured with divs would still render just fine. Instead of going out of your way to not use div tags, you should instead understand when it's appropriate to use the new elements and let that drive your decision.
Here are a few things to consider. Only use section tag and article tags when you want to create a new titled section in your document. If you skipped the movie on the outline algorithm, be sure to go back and watch it. Every time you use a section or article tag, you create a new titled element in your document outline. If the section of content you're creating doesn't warrant this level of specificity, consider using a div. Second, the aside tag is used for related content.
Many people point to the aside tag as a replacement for the sidebar div and in some ways it is. However, semantically the use of the aside tag implies a relation to the content it is contained within. There are several instances where you may need to group content unrelated to the current section. This could be for layout purposes or to ensure that the content is grouped away from the remainder of the section. In those cases, a div tag is more appropriate than an aside tag.
Next headers and footers should use the appropriate tags. If a section requires header or footer content, make sure that you use those tags instead of a div. The thing to remember here is that headers and footers cannot themselves contain headers and footers of their own. If you need to organize the content inside these regions, the div tag could be a good option. Also, don't use nav around every group of links. The nav element is sectioning content and as such also creates new elements in the document outline.
This may be desirable for your main navigation, but might not be what you need for links inside footers, blog rolls, or other sublinking groupings. Usually, you can identify the link group through the use of its parent list tag, but when you need more structure, the div tag is a good alternative choice. Finally, divs can still be used to group any related content. You want to wrap the entire page in a tag to control layout? You want to make sure several paragraphs are rendered as a column or that a series of images relate to each other? Then the div tag is still the best choice for adding structure in many of those cases.
So in reality, the div tag will likely remain a very important part of your page structure. Just make sure when planning your documents that other, more semantic tags aren't more appropriate before using the div tag to group content.
There are currently no FAQs about HTML5 First Look.
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.