Start learning with our library of video tutorials taught by experts. Get started

HTML5 First Look
Watching:

Basic page structure


From:

HTML5 First Look

with James Williamson

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.
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

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
Please wait...
HTML5 First Look
4h 28m Beginner Aug 23, 2010

Viewers: in countries Watching now:

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.

Topics include:
  • Understanding the history of HTML5
  • Using new tags
  • Understanding HTML5 semantics
  • Coding ID and class attributes in HTML5
  • Structuring documents
  • Building forms
  • Exploring HTML5 native APIs
  • Encoding and adding HTML5 video
  • Exploring associated technologies such as CSS3
Subjects:
Developer Web Web Design Web Development
Software:
HTML
Author:
James Williamson

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.

There are currently no FAQs about HTML5 First Look.

Share a link to this course
Please wait... Please wait...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed HTML5 First Look.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Welcome to the redesigned course page.

We’ve moved some things around, and now you can



Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

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