Join James Williamson for an in-depth discussion in this video Structuring HTML5 documents, part of HTML5: Structure, Syntax, and Semantics.
- In this chapter, we're gonna discuss the proper way to structure HTML5 documents. Understanding how to properly structure your documents is crucial to ensuring that your pages are interpreted and presented correctly to the user. Over the course of this chapter, we'll begin building the page that you see here. This is a fictitious biking trail blog. It's gonna help us illustrate our course's concepts. While the information here is fake the the structure and semantics of it are very real. Over the course of this chapter, we're gonna focus on establishing the page's structure and then we'll focus on text-level semantics later in the course.
The best way to describe the structure of HTML5 documents is to picture them as series of sections and subsections. These sections can in turn be visualized as a document outline. Much like a table of contents, if you will. This outline is incredibly important to making sure that your content is read and displayed correctly. So, consider the following document. You could quickly scan all of this and determine that it's about trees but what's not really obvious here is how the information relates to each other or it's relative importance.
If we give the document an outline you can see how much easier the information is to scan and process. HTML works the same way. A solid document structure not only makes your content easier to read it also makes it easier for search engines, screen readers, and other user agents to navigate and find relevant information. Sections in HTML are generated primarily through the use of headings. Okay, take our outline here. By using headings, we can more or less accurately describe this structure that we want.
In HTML each heading creates an implicit section. Subsections are created when the heading of a lower rank is used. So, in this example, we have one top level heading, represented here by this h1. And then we have nested subsections, represented by levels h2 through h4. Since so much of your structure depends on headings it's critically important that you have a strategy for using headings that creates the desired page structure.
Now, using headings to create sections is how we've been doing it since HTML4. It works but it's always felt a little inadequate to most authors. Headings help define outlines but they don't group content. Now, prior to HTML5, authors would group content with DIV tags and then use class or ID attributes to give these sections more semantic meaning like you see here. Thankfully, HTML5 has introduced new sectioning elements that help authors add definition to documents.
Now, these sectioning elements are part of a group of new elements designed to make HTML more semantic. They are the article, aside, nav, and section elements. Each time they're used a new section should be created in the document. It addition to these sectioning elements, there are also a group of semantic grouping elements that are designed to group content together in meaningful ways. These are the footer, the header, and main elements. We'll be using each of these elements a little bit later on but for now, let's go back to our outline and see how they can help us.
First, let's replace the two main article DIVs with actual article elements. It's a lot more semantic and you can see you can still use the class or ID attributes to add further meaning if you need it. Then we'll enhance their structure with a section element to group each of the articles content sections. Next, let's replace the resources DIV with an aside. Semantically, this tells user agents that the content is related to the main content but isn't necessarily a part of it.
Turning our attention to our top level content we can finally tackle page navigation by using the new nav sectioning element. We'll finish the structure off by adding a header element to identify the pages header and replacing our last DIV with a footer element to identify the page's footer content. So, what do all these changes do to our document outline? Well, for the most part, absolutely nothing. You see, HTML5 introduced a new outlining algorithm that was supposed to make it easier for others to create complex document outlines.
For various reasons, it hasn't been implemented yet in any user agent. So, for now, we're kind of reliant on the old method of using headings to convey sections and subsections. What adding the new HTML5 elements does for us is to enhance the semantics of our content especially when we're grouping it together and it makes our pages a bit forward looking for when a user agents might actually start implementing parts of the new algorithm. Okay, I know that was a rather lengthy intro into sectioning in HTML but this is a critical concept for authors to understand.
Later on, I'll give you a couple of additional resources to check out that cover creating sections and document outlines in a little bit more detail.
- What are web semantics?
- Understanding HTML5 content models
- Supporting older browsers
- Structuring and defining HTML5 documents
- Using headings
- Building navigation
- Nesting and grouping content
- Working with HTML5 lists
- Defining link relationships
- Writing comments
- Working with meta tags
- Using microdata