Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Adding document structure

From: Up and Running with HTML

Video: Adding document structure

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.

Adding document structure

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.

Another reason to use an ID would be JavaScript can find elements that have IDs applied to them and do certain things with them. JavaScript can now identify classes too, so it's not as big a thing, but a lot of AJAX widgets and other widgets out there will use IDs to identify an element. They'll also use this fragment identifiers, which we'll see that a little bit later on when we create links. As a matter of fact, all these are unique for this particular page, so I'm going to go back up and I'm going to convert that div tag class to an ID as well. I'm going to go ahead and create IDs for the rest of these. So for just below the mainContent, I'm going to use the ID of sidebar. And finally, down at the bottom I'm also going to use an id of footer.

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.

The HTML5 tags are not widely supported in older browsers, especially the older versions of Internet Explorer, so you have to kind of use a little bit of JavaScript to add support for them. Most browsers really don't do anything differently with them. They represent them the same way that you would represent a div, and they give you the same type of styling. So really the only thing that changes there is how the outline of the document is created. So if you want to learn more about that, go out to HTML5 specification and learn about how those new structural elements are changing how documents are outlined. There's very valuable information, but it goes a little bit deeper into it than we are going to be going into this course. So there you go.

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.

Show transcript

This video is part of

Image for Up and Running with HTML
Up and Running with HTML

49 video lessons · 26894 viewers

James Williamson
Author

 
Expand all | Collapse all
  1. 2m 12s
    1. Welcome
      55s
    2. Using the exercise files
      1m 17s
  2. 29m 30s
    1. Learning HTML
      2m 47s
    2. Choosing a code editor
      5m 2s
    3. Exploring basic HTML syntax
      8m 18s
    4. Do I need to learn HTML5?
      5m 6s
    5. Exploring HTML references
      8m 17s
  3. 35m 40s
    1. Exploring an HTML document
      5m 19s
    2. Working with doctype declarations
      4m 3s
    3. Examining the document head
      8m 20s
    4. Looking at the document body
      3m 21s
    5. Adding document structure
      8m 52s
    6. Lab: Coding a basic page
      3m 9s
    7. Solution: Coding a basic page
      2m 36s
  4. 1h 23m
    1. How does HTML format text?
      5m 51s
    2. Adding headings
      7m 24s
    3. Formatting paragraphs
      4m 54s
    4. Controlling line breaks
      3m 50s
    5. Creating lists
      10m 37s
    6. Emphasizing text
      6m 42s
    7. Displaying special characters
      5m 8s
    8. Controlling whitespace
      4m 35s
    9. Inserting images
      9m 20s
    10. Lab: Controlling page content
      13m 57s
    11. Solution: Controlling page content
      10m 55s
  5. 31m 54s
    1. Linking to pages within your site
      6m 45s
    2. Linking to external pages
      3m 2s
    3. Linking to downloadable resources
      2m 25s
    4. Linking to page regions
      8m 0s
    5. Lab: Creating Links
      5m 57s
    6. Solution: Creating Links
      5m 45s
  6. 40m 27s
    1. Examining basic table structure
      5m 10s
    2. Adding content to tables
      6m 20s
    3. Setting table attributes
      7m 42s
    4. Adding table captions
      4m 3s
    5. Defining table headers
      2m 13s
    6. Making table data accessible
      5m 46s
    7. Lab: Building tables
      4m 13s
    8. Solution: Building tables
      5m 0s
  7. 43m 23s
    1. Understanding the relationship between HTML and CSS
      4m 58s
    2. Creating inline styles
      4m 53s
    3. Exploring the style element
      5m 13s
    4. Basic font styling
      9m 24s
    5. Changing color
      4m 55s
    6. Taking styles further
      5m 24s
    7. Lab: Controlling basic styles
      5m 10s
    8. Solution: Controlling basic styles
      3m 26s
  8. 5m 44s
    1. Next steps
      2m 56s
    2. Additional resources
      2m 48s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now "Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Up and Running with HTML.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

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.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.