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

Structuring interior content

From: HTML5 First Look

Video: Structuring interior content

Now that our page's basic structure is in place, we need to turn our attention to adding HTML5 structure to the interior of the page as well. In this movie, we're going to focus on when it's appropriate to use article tags and continue to refine the outline of our document. So I have the trails.htm file open from the 04_03 folder, and we're just picking up right where we left off. So our top-level elements have already been converted over to HTML5 tags.

Structuring interior content

Now that our page's basic structure is in place, we need to turn our attention to adding HTML5 structure to the interior of the page as well. In this movie, we're going to focus on when it's appropriate to use article tags and continue to refine the outline of our document. So I have the trails.htm file open from the 04_03 folder, and we're just picking up right where we left off. So our top-level elements have already been converted over to HTML5 tags.

You can see here we have header tag, a little bit further down you can see the section tag, below that we have an aside tag, and finally we have a footer tag down at the bottom of the page. So now we need to concentrate on the contents of those top-level regions. For example, inside of our header here we have a div tag that's wrapping the main navigation for the page. So it has an ID of mainNav and it contains all of our site navigation. So in this case it's appropriate to go ahead and use a nav tag here. So what I'm going to do is replace the div tag here with a nav tag, both the opening and the closing div tags.

Let's talk about why it's appropriate to use a nav tag here. Well, nav tags are designed to wrap navigation. So that's the first thing. That's the first reason we're using it here, but the second reason is that it is sectional content. So adding a nav tag to the page adds a brand-new section to our outline. So essentially, we're saying just below the top of the page, here's our main page navigation. We could use that for accessibility purposes, we could tell user agents to make sure they introspect the main page navigation, or we could tell to skip it.

So that's a really good way to identify the navigation and to add it as a section in our page. Now I'm going to scroll down a little bit further to find our trailInfo section. So inside the trailInfo section is all of our trail information on the Northridge Loop trail, which is the trail that we're currently looking at. You can see for example that we have a little small navigation inside of that that's basically saying All Trails and then the Ojai Trails. We have a header that's identifying the fact that we're looking into the Ojai Trails region and then we have the Northridge Loop itself.

So we have a table, some quick facts about it, and then after that we have some text that's basically just giving us a review of that trail. So, for the most part this is content that again can be republished on its own. However, the top two items in this section, the sub-navigation for the trails and the heading identifying that we're looking at the Ojai Trails region, doesn't really fit into something that we would republish. So for the moment, we're going to leave that content alone. However, the content below it, the heading right here starting with Northridge Loop and then going all the way down to just inside the section tag, so still that image tag that has our canvas_mockup in it, all of this content can be republished and can stand on its own.

So this is something that we might want to syndicate a little bit later on or we may need to pull this content out. So a nice way of identifying that and creating a new section within our document outline is to use an article tag. So that's what we're going to go ahead and do here. So I'm going to go ahead and wrap that content with an article tag. So you just want to add an opening article tag in front of it and make sure a closing article tag is added to the end of it. In this case we don't need any type of a class or an ID to identify this. It's just an article of content and it's not always appropriate to use a class or an ID unless you're wanting to identify it further, and in this case we don't really need to.

Next, I'm going to turn my attention to the aside region. So I'm going to scroll down a little bit, and for me, it's on line 59 right now. But here is our aside. It has an ID of trailNews and inside of that we have a headline that's essentially identifying the section as well as Trail News. Now directly inside of that, we have a div tag that has a class of news. Inside that, we have our promotional video and some corresponding text. So this is a discrete element inside of our Trail News and probably needs to be identified as such. Now again, we could use an article tag, but the question comes, is this content that we're going to republish, is it something that can stand on its own? In this case, the answer to that would be no.

So instead of using an article tag here, we're just going to use a section tag. Again, it's going to go ahead and create a new section in our document outline. It stands for a discrete region of content, but it isn't necessarily standalone content. So again, I'm going to change the opening and closing div tags here to a section tag. All right, cool! Now, going down a little bit further on, and by the way, I left the class of news on that. Obviously, that class is doing something for us in regards to styling or identifying that section, so I'm going to leave that alone.

Just below that we have another div tag with a class of news. If we look a little closer at this, this is a section identifying Rider Reviews. So individual riders can publish their own reviews to the site and this is one of those. Now, this is content that I could see being reused somewhere else and as you can tell, that's always a judgment call. You may have a desire to republish content that other people wouldn't republish, or you may have a certain requirement that says hey, this content must be republished. But in this case, it's just content that I think probably can be republished or can be used somewhere else or can stand on its own.

So again, instead of a div tag, we're going to change that div tag to an article tag and we'll leave the class alone, so it will still be identifying that as news content. So it will say article. And again, I'm going to scroll down, find the closing div tag, and make sure that is a closing article tag. So our aside has two sections inside of it. The first one will be the promotional video, the second one will be the Rider Reviews. So two sections of equal importance, but one is using a section tag, another is using an article tag based upon its standalone nature.

Now, there is one more thing that I want to do here in terms of structuring this interior content. You'll notice inside of our Rider Review article, we have a paragraph that has a class of publishing date and it's submitted on February 23rd, 2010. So this is when this particular review was published. Well, one of the really nice things about HTML5 is it allows us to identify content, not so much for human readability, but for machine readability. Maybe if I am syndicating this, I'd want to identify to any user agent when this content was published.

Normally you would send that along through some type of metadata or some other means, but by using the time tag, we can go ahead and use the date/time attribute to pass along a specific machine-readable value. So what I'm going to do is I am just going to highlight the actual dates itself. So we're on line 70, and I am highlighting not the text submitted on, just the actual date. 02/23/10. I'm going to go ahead and wrap that, and I'm going to wrap that in a time tag. So we want to go ahead and use a time tag there, and inside the time tag I'm going to use an attribute called datetime.

Now, datetime allows me to go ahead and specify in Gregorian formatting the date that this is published. So you can pass along month, date, year. You can pass along actual time itself. In this case, we don't have the time of day that it was published, but we do have the date. So I'm going to go ahead and hit Return. So I want datetime= and inside that, I'm going to go ahead and type in 2010-02-10. So again, this is Gregorian format, and it's something that if you're interested in doing this yourself, you'll have to learn how to format that.

But most of the time, it will be your blog or some type of other publishing system that is adding the date for you. Then directly after that, I'm going to use an attribute called pubdate. Now, a pubdate is a Boolean value, so it either has true or false. You can explicitly write that or you can do what I'm going to do here, which is basically put the attribute in there. The attribute appearing without any type of an assigned value will assume a true date. So by using the attribute pubdate, I'm letting any type of system that might be repurposing this content know that this is the date that the article was published.

So I'm going to go ahead and hit Return, and there is my time tag with my datetime and the pubdate attribute wrapping that. Perfect! So I'm going to go ahead and save the file and now we're almost finished restructuring our page with our HTML structural markup. We've still got one more extremely important part of our restructuring to go. Right now, other than the top section of the page, we haven't explicitly defined any headers. We're going to cover that and why it is so important to do so in our next movie.

Show transcript

This video is part of

Image for HTML5 First Look
HTML5 First Look

50 video lessons · 75159 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
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

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.


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.

Join now Already a member? Log in

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 preferences from the dropdown menu.

Continue to classic layout Stay on new layout
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
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.