Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Earlier we discussed the new structural elements in HTML, the new content models, and the outline algorithm. Once you have a solid understanding of how these pieces fit together, structuring your page correctly becomes a lot easier. In this movie, we're going to review the finished HTML5 page that we will be building in this chapter, look at the underlying structure of the page and discuss the factors driving the decisions behind choosing which elements to use. We will be building the Explore California Trail Guide page. The page allows visitors to check out trail reviews and information, find out the latest news regarding cycle California tours, and lets riders read and publish their own trail reviews.
The first thing that I do when starting a new page is to break down the page's information and rank it in terms of importance and overall site goals. With HTML5 one of the most efficient ways to do that would be to create a sample outline of the pages information with the main points used as sections. Here, you can see the outline I created to represent the pages information. I've included the site's main navigation, the current region, the trail review, current trail news, and the latest promotional video and rider reviews.
Nesting the elements allows me to identify sections of content and determine the overall page structure. Now, from this list, we can map out the basic structure of the page. Now, the main navigation we will set apart from the rest of the content and be encountered by the user first. After that, the page is going to have a section that focuses on a trail guide from a specific region. This is going to be followed by the latest trail news. Now, not listed in the outline, but still part of the page are copyright information and links to our disclaimer and privacy policies.
Since we don't need those items represented in their own section, we're going to use a non-section content tag like the footer tag to contain those elements. The navigation, trail guide, and trail news sections will need sectioning content elements in order to be properly represented. The nav element makes the most sense for the navigation, but some thought needs to be put into which tags to use for the trail guide and trail news sections. Since the main focus of the page is on the trail guide itself, we will use a section element for it.
The trail news region, however, needs to be contained in an aside element. This has the added benefit of identifying the trail news content as being related to the trail guide information while not enjoying the same amount of importance. Finally, we need to look at how we're going to structure the contents of each section. The trail sub-navigation and headline will be located in a header element to represent the section's heading content. The trail guide itself could be republished later on its own or syndicated in another site.
So it makes sense to use an article tag for that. Inside the trail news area the promotional video is unlikely to be repurposed outside the page. So we will go ahead and use another section tag here. The rider review, however, is content that can stand on its own and we're very likely to reuse it on another page or even another site. For this reason, we will go ahead and use another article tag here. The remainder of the structure will be formed by using headers inside the sections as appropriate, and by using heading contents such as h1 through h6 tags to indicate any interior sections inside of our articles.
So that's a brief look at our page and the code structure that we will use to build it. Keep in mind that in HTML5, the importance of content and its relationship with other page regions is a very important factor in deciding which elements to use in structuring pages.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 96026 Viewers
56 Video lessons · 109854 Viewers
71 Video lessons · 78671 Viewers
82 Video lessons · 104993 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.