2.1 Headings - Video Tutorials & Practice Problems
Video duration:
3m
Play a video:
Video transcript
<v Michael>The index page for our website</v> will end up having some information about "Learn Enough to be Dangerous." This is an example of the kind of content you might use. Of course, this information is about me and my company, but ultimately this is really about you, and whatever it is that you would want to put on the web. But since I don't know what you would want to put on the web, I'm gonna put some information about what I'm up to these days. Let's start by changing the page title. Actually, let's go here, this is the production version, here's the local version. And I'm gonna change the page title to read just learn enough to be dangerous. And now I'm gonna start blocking up the structure using some heading tags. So, the way to do this, is to start with the first level heading, or the top level heading, and what's called an h1. And I'm gonna call this the learn enough story. Take a look at what that does. You can see that the h1 tag is rendered in a large font size, with this bold formatting. And in order to tell the learn enough story, I'm going to talk about the background. That's gonna be subsidiary to this top level heading, so it's gonna be h2. Actually, let me see here, I'm gonna do h2 Tab. I don't remember offhand if it puts in new lines. I don't want new lines here, I like this way of looking at it. No, it doesn't, that's good. So that was h2 Tab. And now I'm gonna say background, and let's add another h2, with some information about the founders. Now you'll notice that I'm using indentation here to indicate the structure of the document, that's not necessary. So actually let's save this and take a look at it, and see there. But if de-dent this, even if I de-dented in this way that it actually lines up with the far left, this looks terrible, right, it's confusing. It should be indented to match the level that is one level in from the body, but it looks exactly the same. Remember, HTML doesn't care about white space. And under the founder's tag, I'm gonna put the names of the three founders. This is me, of course. And then we've got Lee Donahoe, who is the co-author on "Learn Enough HTML to Be Dangerous." He's the designer, among other things. And then Nick Merwin, who's our main developer. Of course I do development too, but it's actually mainly Nick and Lee who make the website, which is awesome. And we know we can take a look and refresh. So you can see here that the different h levels get smaller. This is h1 at the top. Then these are h2s. And then the h3s are the smallest of all. And this lets us essentially write an outline for our document using these h tags. Figuring out exactly how many h tags are supported by HTML is left as an exercise.