New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Basic page structure

From: HTML5 First Look

Video: Basic page structure

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.

Basic page structure

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.

Show transcript

This video is part of

Image for HTML5 First Look
HTML5 First Look

50 video lessons · 73207 viewers

James Williamson
Author

 
Expand all | Collapse all
  1. 3m 56s
    1. Welcome
      1m 1s
    2. Using the exercise files
      1m 50s
    3. Who is this course for?
      1m 5s
  2. 21m 12s
    1. Exploring prior standards
      4m 26s
    2. Why do we need HTML5?
      3m 32s
    3. HTML5 timeline
      4m 24s
    4. Current HTML5 support
      4m 25s
    5. What HTML5 is (and what it isn't)
      4m 25s
  3. 27m 49s
    1. HTML5 vs. HTML4
      3m 25s
    2. New structural tags
      6m 1s
    3. New content tags
      4m 7s
    4. New application-focused tags
      5m 32s
    5. Deprecated elements
      4m 28s
    6. API overview
      4m 16s
  4. 22m 29s
    1. Content models
      5m 33s
    2. Understanding the outline algorithm
      3m 21s
    3. The role of ‹div› tags
      4m 20s
    4. Using ID and class attributes
      2m 6s
    5. DOCTYPE declarations
      4m 16s
    6. Character encoding
      2m 53s
  5. 41m 27s
    1. Basic page structure
      3m 40s
    2. Structuring top-level elements
      7m 30s
    3. Structuring interior content
      8m 42s
    4. Building headers
      9m 11s
    5. Checking document outlines
      5m 46s
    6. Ensuring cross-browser structure
      6m 38s
  6. 27m 53s
    1. New input types
      5m 57s
    2. Setting form autofocus
      2m 53s
    3. Using placeholder data
      4m 4s
    4. Marking required fields
      3m 24s
    5. Working with number inputs
      5m 49s
    6. Using date pickers
      5m 46s
  7. 1h 1m
    1. Canvas overview
      6m 21s
    2. Adding canvas content
      8m 58s
    3. Drawing in the canvas environment
      12m 9s
    4. Drag-and-drop API overview
      6m 18s
    5. Offline applications overview
      7m 11s
    6. Video overview
      5m 45s
    7. Encoding video
      8m 23s
    8. Adding video
      5m 58s
  8. 57m 33s
    1. Geolocation API overview
      5m 50s
    2. Web storage API overview
      5m 40s
    3. WebSockets overview
      4m 16s
    4. CSS3 overview
      6m 38s
    5. Enhancing typography with CSS3
      7m 42s
    6. Using @font-face
      7m 11s
    7. Styling HTML5 with CSS3
      10m 23s
    8. Using CSS3 transitions
      9m 53s
  9. 5m 6s
    1. Final thoughts
      3m 49s
    2. Goodbye
      1m 17s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold

Are you sure you want to delete this note?

No

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.