Understanding headings and paragraphs

- [Instructor] Headings and paragraphs are exactly what you think they are, headings and paragraphs. Use them in a similar way to your work in Microsoft Word or in other Word processing programs. Let's take a look at my sample document and see how these are structured. Remember to go to your Exercise files. Take a look at the text file inside of it called exercise-file.text. And we are looking at the headings and paragraphs demo. You can open this up inside of your web browser and fork it to your account. And remember that you can always grab the edges of the window here to make this big enough so that you can see what's going on. So what you see here in the HTML window, you don't need the CSS or the JavaScript windows, is very simply a bunch of text. And it looks like it's pretty readable here in the HTML window. Over here on the right side, though, this is the rendering of that HTML as you would see it in a web browser. And it looks like one great, big, huge, long line. That's because there is no markup in our HTML. And so even though we can put in our own returns, and our own spaces, and so forth, the web browser doesn't honor any of that. It only honors HTML elements, and tags, and such. So what I want to walk through with you here is how we would go about assigning headings and paragraphs to this particular chunk of text. So here at My Fine Website, this would start with an H1. And heading one is what that stands for. And as you can see here, I just put in the opening H1 tag. And immediately, the whole page renders in that giant H1 size. And that's because I never closed it. So we need to be sure to close it here, /H1. Anytime you have a slash in front of it, that means that you have closed that tag. So the H1 spans those three words, My Fine Website. And then the rest of it will continue to be one sort of paragraph-looking thing underneath of that. To make a paragraph tag, which is probably what this next thing is, we're just going to put in an angle bracket, a P, and another angle bracket. So P for paragraph. And then we can end that paragraph right here at the end of the paragraph. And then that will give us a little bit of space before our next chunk of information. So one of the things you should be aware of is that those sizes that you see here, the fonts and so forth, those are specified by your web browser by default. And actually, it's normally Times font, but that's so unbearably ugly I changed it to Ariel for you. Your developers are going to have some kind of style sheet in place that'll make this look pretty. So when you put in the right markup, it'll take on the styling of your email newsletter, or of your website, or whatever it is that you are coding for. So let's continue on down the page here. This looks like a heading, H2. So H2 often starts a new section. Generally speaking, there's only one H1 per page. H2 may be the title of your article inside of that page. H1 is often responsible for the site identity. And then maybe we have a paragraph after that. H2 might be used to start a new article on a web page just like that. And then of course, you may have headings inside of your article. So we're continuing on down here. H3 would be the next subheading. So there's H3. And then we have a paragraph of information here about H3s. And generally speaking, when working on the web, for most content that I have marked up over the years, H1, H2, and H3 are usually all the levels of headings that you need, but there are three others in case you need them. And so let's just put those in now so you can see how they look and how they function. So this would be an example of an H4, an H5, and an H6. Almost never is the H6 used. So that is a real quick demo of how headings and paragraphs look here on the page. Now that you have a sense of what these tags are, how you would go about marking up a little bit of text like this, I want to give you the opportunity to do that here on your own. So there's a second link here for this particular video. This one is the headings and paragraph exercise, not just the demo. So what I would encourage you to do right now is to pause the video and take a look at what we have here. We have H+ Sport. That's probably the name of the website. We have some sort of introductory text. Then we have a section here about the company history. Then we have a section about the guarantee and the ideals. And then guarantee, philanthropy comes after that. So using those heading tags that I just showed you and using that paragraph, see if you can drop those elements here into place. And then I will walk through the answer with you. So just pause the video here for a moment and give that a try. So hopefully you gave that a shot. Here's the way that I mark this up. As I hinted before, H1 for H+ Sport. That's the name of the website. And so it typically gets the H1 element. Then we have sort of introductory to paragraph here talking about what H+ Sport is. And then since this is still on the same page, we wouldn't go with another H1. We would go with an H2. So this is a subhead on the page. So here is our company history. And then that has a couple of paragraphs associated with it. And then comes the part maybe a little bit trickier. We have our guarantee and ideals. That would clearly be a second section, but it has two subsections. Guarantee and philanthropy would get the H3 element. And then there's paragraphs inside of that. Just a couple of other quick things to note. Some of you may be concerned with what are called widows and orphans. It's the number of, for example, this last line of the paragraph here, we now have one word, fibers. Or the last line of this paragraph, we have one word, asked. I encourage you to remember that this is the web. We never know how big or small our window is going to be for displaying this information. So it is possible using CSS to make this absolutely perfect at this exact screen dimension. And that we would never see another widow or orphan at this one screen dimension. But to do that across all screen dimensions, as people look on their phones, their tablets, their small desktops, their large desktops, that is somewhat of an impossible task. So just bear in mind that you're not going to have complete control over the formatting of this text, particularly not with HTML on its own. So just let that go and trust that your developers are going to make this look great for you.