Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Let's take a look at a few tools for testing the outline structure of a web page. We will use the Scissors page for these tests, as it has a known structure. So I have the Scissors page opened up here in my browser, and I've got it opened up from the Chapter 13 folder in the exercise files. And I have also loaded it up in my editor here. And coming back to the browser, I have also loaded this outliner page, and what this does is it will take any HTML source--either from a hard disk or from a URL, or you can paste it in here-- and it will give you an outline.
So, I am just going to paste it in here from my text editor. So I am going to select all and copy and select all and paste. I am going to click Outline this! and now we have the outline that we expect from this page. You notice at the top is Scissors, and if you go to our source here, you see right here in header, the first h1 it sees in this h group is Scissors. So, that's the top. It's got this untitled section, and that's our nav section here, which does not have a title. It has The Story of Scissors, and that's right here, in our first article, The Story of Scissors, and then it has About These Scissors.
And if we go down after this article, we see this aside, and it has a header, and it says About These Scissors. And then under that, inside of the aside, we have these three sections which have h groups with Blades, Handles, and Color. And you see those are indented under About These Scissors: Blades, Handles, and Color. So we've got an accurate outline from this tool. So that's one way you can do this. Another way you can do this is using the tools at Google code, and I've loaded that up actually in the Chrome browser, because one of these that I want to show you is this Chrome extension, which actually works pretty well.
So, we are going to load that up. So, this is at code.google.com/p/h5o, and that's letter o, for HTML5 outliner. I am going to click on Chrome Extension here, and it loads up this Chrome Extension page, and it gives me an opportunity. It describes it here, and it gives me an opportunity to add it to Chrome. So, I am going to go ahead and click Add to Chrome, and I am going to give it permission, and it says, Outliner has been added to Chrome. All right! So every time it sees a page now, it gives you this opportunity to outline it, if it can outline it.
So, for example, if I go to google.com--I am going to open this in a separate tab-- it has this little outliner thing, and there's not much there. It has an account option. So, that's not really a conforming page that's going to give us very much information. If I try to open the Scissors page from disk, well notice it opens it up, but it doesn't give us the opportunity to outline it. It doesn't seem to work on files from your hard disk. You have to actually open it from a web server. So I have gone ahead and I've loaded this up on a web server, at html5.bw.org/esst/chapter13. And here's our Scissors page from there, and you see it's got the little Outliner icon.
And if I click on this, I get an outline, and there's our outline exactly as we saw it before. Now, there are a couple of cool differences here. One is you will notice the Untitled section. It says it's a NAV, and that's kind of nice. And if I click on it, you see it highlights it and blinks it there on the page. If I click on Scissors at the top, it blinks the entire page. If I click on The Story of Scissors, see it clicks on that; it actually scroll to it and blinks it. If I click on About These Scissors, it scrolls and it blinks the entire sidebar there.
Of course it scrolls it under itself. And if I click on Blades--I wasn't doing all the scrolling before--and Handles and Color, you see it blinks those, and unfortunately, it scrolls them in a way that you can't see them. Of course, on most computers, you are going to have a lot more room than this, and you will be able to open it up wider so that you can see the parts that you are clicking on. So, that's pretty nice. That does a good job. And finally, if you come back here to this page, you will notice that there's also this Bookmarklet, and I am going to go ahead and I am going to load that up in Firefox.
In any event, the bookmarklet, if I click on this, I get this Download page, and if I click on that, you notice that it gives me an opportunity to save it. That's because it has it set as a text file, not as an HTML file in the Content type. And so I am just going to go ahead and I am going to save this, and I am going to Show in Finder, and there it is. Now, when I come back here to Firefox, I can open this up, I can go to my home, and I can go to my Downloads, and there it is, outliner.html. And it gives me an opportunity to drag this link to my Favorites bar, which I have closed here.
So I am going to, in my Bookmarks bar, I am going to go ahead, I am going to drag that there. And now, when I open up the Scissors page-- and this is from the file on my desktop-- I click on this and it gives me the outline. And again, it gives me the Untitled NAV, The Story of Scissors. This is actually from the same source code that the Google Chrome Extension is from. So it has the same type of an outline. Unfortunately, it doesn't do the nice little blinking thing. It does scroll to them though. So here, you have a number of different tools you can use for examining the outlines of your web pages.
These tools are a good starting point for experimenting with the outlines of your pages. Take the time to experiment. Try different structures. Understanding how HTML5 outlines work will go a long way toward creating well- structured HTML5 documents.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 101414 Viewers
61 Video lessons · 88175 Viewers
71 Video lessons · 72028 Viewers
56 Video lessons · 103820 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.
Your file was successfully uploaded.