Formatting content with HTML

So far we've covered a little bit of the background of HTML. And the basic elements that are required for every HTML document. In this chapter, we're going to begin exploring some of the individual elements that are used to format content. And remember HTML is a markup language. And that means that it uses tags to identify content on the page. Well once you're comfortable with the syntax behind how formatting content works. Then it really just becomes a matter of learning which tags are available to you, and the options that you have when you're using them.

So before we get started too deep in the chapter of going into the individual elements themselves. I just want to show a quick example of how HTML tags are used to format content. And this is sort of going to reinforce a little bit about what we learned earlier in terms of HTML syntax. So I have the format.htm file open up here from the 03_01 directory. I've repositioned my windows so that brackets is on the left hand side. The Chrome browser's on the right hand side. I've live preview turned on so I can switch back and forth between them. Tell you what. Let me take Chrome, and let me increase the size of the text.

Now, in brackets, right now, if I look at the HTML file within the body tag. I just have a single line of text that says, What am I? And right now currently it is nothing. There's no tag wrapped around it whatsoever. So this is what we call formated text. Now most browsers are user agents are going to display that. Using whatever there default formatting is. And typically that's going to end up looking like a paragraph. But don't be fooled for other user agents. There going to look at this text and not understand what it is. It's not going to have any identification.

There's no way for it to understand what this content is or what it's supposed to do. So to format it, all we need to do is wrap it in whatever tag we want to use to identify it. Now, in the past, we've done things like paragraph, we've even done a heading or two. I want to show you an element that we haven't used yet. And that would be the pre tag. That stands for preformatted. So remember, when we're using a tag, we do the left angle bracket. And then the character or characters that describe the element. And then the right angle bracket. And also remember that most tags are going to require a closing element as well.

You'll notice that as soon as I did that an saved the file. If I look over there in the browser, it's changed the rendering of the text. It now renders in a mono spaced font. What am I? So what does preformatted text do for us? Well, preformatted text basically tells the browser that I want this text to display. However you see it within these tags. And that means that it respects things like white space. If I added a bunch of space, it would add it, line breaks. So it allows me to do things like displaying code snippets. And that's what it's typically used for, or poems, things where the formatting is a specific way.

Most browsers default to using a monospace font because pre-format is used so often with code examples. Now, it doesn't have to be preformatted text, obviously. We could change it to something else, such as an h4. So if I change both the opening and the closing tags to h4, now you'll see that it changes and it sort of appears big and bold. Now, there's a little bit of a misconception about what the browser's doing, versus what's going on within the code. You can see that this is a heading four. If I change it to a heading one, you're going to see it gets a lot bigger.

If I go down to a heading six, which is the lowest tier of heading, it gets a lot smaller. And in old days of HTML before css became really popular. It was pretty common for a designer to choose the heading they want based upon the size of the text they were looking for. They wanted it really big they used the heading one if they wanted it really small the would use the heading six. That is absolutely the most incorrect way to use headings possible. Later on in this chapter we'll talk about the strategy behind using headings. But don't be confused by the way a browser renders something and what the tag actually means.

Using cascading style sheets, and we'll talk about using them a little bit later on in the course. I can make an h1 look any way that I want, I can make an h6 look anyway that I want. So what you're seeing over here when you see this rendering. Is you're seeing the browsers default rendering for that element. But it doesn't have to look this way. One last little thing here, let's change this from an h6 so we can tell what's going on inside it. To just your basic paragraph. Okay now, we talked a little bit earlier about HTML syntax and nesting one element inside of another one.

To do that, we simply take content inside of one tag. Which, in this case, is the paragraph tag. And wrap an element or elements of that in another tag. Let's say we want to emphasize the word am. Maybe I wanted to italicize it, for example. Well, to do that. I could use the i tag. And remember, you have to have both the opening and the closing i tag. As soon as I do that, it italicizes it. And now I could do things like bolding it, so you change this to a b tag. Now it's going to change and be bolded. By the way, that blue line, don't let that distract you.

That's just part of the live preview. Whatever I click on, it's sort of highlights that for me. I've used italic and bold. Now, both of those are presentational tags. And earlier, in HTML 4, they were stripped out because CSS was used. Basically it was a strategy to remove all the presentational markup from HTML, and let CSS handle that. That's a really good idea, but there are a lot of instances and cases. Where default presentation is necessary. So they were reintroduced to HTML5.

But there was a movement away from presentational tags to logical tags. And you can do, sort of the similar thing with logical tags. I'm going to replace b with em. Em stands for emphasis. And you can see it italicizes it. That's the default rendering within the browser. And, to a person who's looking at your page visually. They wouldn't know the difference between an emphasis tag and an italicized tag. Looks exactly the same. However, to machines such as screen readers, there is a difference. A screen reader would actually change it's vocal inflection because this tag is now emphasized.

What am I? Where as if if was just italic, it would ignore it, because that's presentational. And it would just read it on a flag monotone, what am I? So a lot of times you do on it emphasis something, instead of just changing it presentational. And addition to emphasis it would have strong and strong is strongly emphasized. Which, in the browser, is usually rendered as bold. So, they're a lot of tags out there that seem to do the same thing visually. But, behind the scenes, there's actually a logical reason for using them or not using them.

This means, of course, that you're going to have to dive a little bit deeper into the elements themselves. And figure out when it's appropriate to use them and when it's not. So, from a syntax standpoint, it seems pretty simple. All that you need to do in HTML to properly format your content is wrap it in the appropriate tag. However, you are going to need to spend some time learning about the individual elements available to you in html. And when they're appropriate. So for the remainder of this chapter, we're going to focus on the most important and commonly used formatting tags. And dive a little deeper into them.