Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Structuring content within the body is probably the most difficult part of authoring HTML. In fact, you can give the same markup to five different designers and get back five different document structures. That's because in many cases the structure that you use is entirely up to you. So let's take a look at adding some basic structure to our content and as we do that, we're going to discuss a few of the best practices for determining document structure. So I have the structure.htm file opened from the 02_05 directory.
It's really just picking up where we left off. You'll notice that we have, inside the body, a couple of lines of text that really are placeholders for more robust content. When you look at a mockup of a page or the contents of a page that are given to you as an author and you need to create them, one of the things that you need to think about is structuring the document, and how to do that. And there's really a lot that goes into it. You know, one of the first things that you need to think about is how is this going to be maintainable? What are the logical groupings of the content? You know, is this stuff all grouped together. If it does, is it a page header, is it a sidebar, you know, is it something else? And you don't necessarily have to use those conventions, but those conventions have been around for very, very long time.
And they're well used within HTML authoring, and there are a lot of user agents out there that can do specific things based upon how you've organized your content. So using sort of a structure that people have used before isn't necessarily a bad thing. And so typically, pages will have a header that goes at the top. They'll have a footer that goes in the bottom. We will have content in the middle of that, and that content could be split up into several columns. These columns could have names like content, or main content, sidebar, aside. It really just depends on kind of how you want to organize it. Once you determine sort of that basic structure, you really also need to think about what's going on in the rest of your site.
One page might be structured one way, and then when you get to another page, the content of that page might not necessarily fit into the same structure you've given the last page. And you want your structure to be flexible so that you really don't have to have a unique structure for each page in your site. So you also want to look at the overall site as a whole and really look for some common structural elements that you can repeat across the entire site, just to make life a little bit easier for you when you're authoring pages and then editing them a little bit later on. For what we've got--we have a header, we have a main content, a related content, and then we have a page footer-- the most common element in HTML for structuring pages, in terms of sectioning pages into different sections of content, is the div tag, and that's the one we're going to be using here.
Directly after the body tag, right here for the page header, I'm going to wrap this in a div tag. So the first thing I'm going to do is create a new line. I'm just going to type in an opening div tag. And then I'm going to go to the end of that content and then I'm going to close the div tag. And I'm going to do that for each one of these lines of content, that sort of represent a larger section of content. Now, if I was authoring this page from scratch, I wouldn't put the content on the page first. I'd put these divs on the page first. And again, it goes back to making sure that you're building the most simple structure first and then following that simple structure with more complex structures.
It's going to help you author the page faster and it's going to help you be more precise with your code. Right now it's a little underwhelming. Yes, now we've sectioned all of these different areas off. We have the page header in its own div tag and so forth and so on. You'll notice again we have an opening and we have a closing div tag. You also may be wondering, do they have to be on their own line? No, they don't. This would be just fine if I were to put the opening and closing div tag and the line on the same line. The only reason I'm doing this really is for readability's sake.
It's a little bit easier for everybody to read when they see this is onscreen. So now, what has this actually done for us? Well, if I save this page and I preview this in one of our browsers, you can see that it doesn't really do much. So the div tag is a tag that really doesn't have any default rendering. It has no default formatting within a browser at all. The only thing it really serves to do is section content. Later on with styles with CSS, you can make div tags do certain things. You can place them in certain areas. You can give them backgrounds, borders.
You can give them specific formatting that only applies to that particular div tag and its content. So they're very helpful from a styling standpoint, but really what we're using them for in HTML-- and there's a very important distinction here-- is in dividing the content up into sections. So that's very important. Now one thing that we would like to do is to go ahead and be able to identify these in some way. Give them some means of identifying one div as being different from another or having some type of semantic value. One of the easiest and best ways to do that with the div tag is to use one of two attributes.
We have two attributes that we can use here to do this. We could use either an ID or a class. So I'm going to go up to the very first div tag and I'm going to create a little bit of space after the div characters. And let's start out with using a class attribute. So I'm just going to use a class. Inside the value of that class I'm going to type in "header." I'm going to go down to the next div tag, and this time use an ID and the ID that I'm going to use here is going to be mainContent, all one word. And I'm going to use CamelCase naming, which is lowercase first word, uppercase second word.
What's the difference between a class and an ID? An ID is a unique identifier for that page, meaning I can only use the ID mainContent once on the page. So they're unique. They are for very unique areas of content, areas of content that you won't be repeating throughout the page. You may have multiple headers for example on a page. You might have a header inside of a different section and then the main header for the page, that sort of thing. Here's the rule of thumb: if you're going to use an attribute more than once on the page, use a class. If you're only going to use it once, if it's unique on the page, then use an ID.
So now, not only do we have distinct sections of content on the page that we could then start adding more robust content into, those sections are now identified in terms of what they are. Notice that we've used words that represent the meaning: this is the header; this is the mainContent; this is a sidebar; this is footer. Now HTML5 actually introduced a few new elements that we could use in these cases. For example, there actually is a header element. So instead of using div id = header, I could replace this with a header element.
Now I'd have to replace the closing tag as well, but I just kind of want to show you what these elements look like. I'm going to undo that. So we have different type of semantic elements in HTML5. We have header; we have aside, which we'd using here in case of the sidebar; we have article or section, which we would probably use from mainContent, one of those two; and we also have footer as well. So those elements were brought into sort of replace doing this. However, this is still the most common way-- using div tags and then combining them with IDs and classes--is still the most common way of structuring into your content on the page and sectioning that content off.
We've now created our basic HTML document. Now, there's not much to it right now, but focus on this fact. This is all you really need in terms of creating a valid HTML file. A lot of people like to make things more complicated than they need to be. This is all we really need: an opening and a closing HTML tag, a head of the document, and a body of the document, and we need the content inside of those sections formatted in a proper way. Now later on, we're going to move on to learning more about formatting and structuring your document's content, but before we do that, I encourage you guys to go ahead and take a look at the optional lab at the end of this chapter that follows this movie, and that will help you reinforce the things that you've learned so far.
Get unlimited access to all courses for just $25/month.Become a member
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.