New Feature: Playlist Center! Pick a topic and let our playlists guide the way—like a learning mixtape.

Start learning with our library of video tutorials taught by experts. Get started

HTML5: Structure, Syntax, and Semantics
Illustration by Don Barnett

Defining HTML5 documents


From:

HTML5: Structure, Syntax, and Semantics

with James Williamson

Video: Defining HTML5 documents

Being somewhat apprehensive about learning an update as large as HTML5 is fairly natural. I remember putting off learning ActionScript 3.0 for about a month or two just because I didn't relish the thought of having to relearn everything from the ground up. Language updates tend to be more complicated, more verbose, and they require us to learn to do familiar things in new ways. Now that's why I want to start by going over some of the basics of HTML5 and showing you that in this case, sometimes less is more. HTML5 greatly simplifies many of the features found in HTML 4 and makes it easier to define the document structure.
Expand all | Collapse all
  1. 2m 20s
    1. Welcome
      48s
    2. Using the exercise files
      1m 32s
  2. 19m 7s
    1. A brief overview of HTML5
      3m 57s
    2. What's in the HTML5 specification?
      8m 17s
    3. Why do we need new structural elements?
      6m 53s
  3. 50m 33s
    1. Defining HTML5 documents
      5m 5s
    2. HTML5 syntax
      9m 14s
    3. The header element
      5m 22s
    4. The nav element
      4m 55s
    5. The section element
      4m 51s
    6. The article element
      4m 48s
    7. The aside element
      4m 13s
    8. The footer element
      4m 17s
    9. Content model overview
      7m 48s
  4. 35m 28s
    1. Understanding the outline algorithm
      3m 17s
    2. Creating document sections
      8m 25s
    3. Using headings properly
      9m 1s
    4. Using hgroup to override sectioning
      4m 17s
    5. Properly nesting structure
      7m 17s
    6. Sectioning roots
      3m 11s
  5. 58m 30s
    1. Organizing content
      4m 41s
    2. Planning document structure
      5m 47s
    3. Choosing the right structural element
      4m 43s
    4. Checking document outlines
      5m 27s
    5. Coding initial page structure
      5m 28s
    6. Using class and ID attributes
      5m 31s
    7. Structuring headers
      13m 13s
    8. Building navigation
      7m 1s
    9. Structuring footers
      6m 39s
  6. 1h 27m
    1. Working with figure and figcaption
      7m 12s
    2. Grouping content with asides
      3m 46s
    3. Using divs in HTML5
      5m 0s
    4. Working with lists in HTML5
      7m 10s
    5. The return of bold and italic
      5m 52s
    6. Citing works semantically
      6m 32s
    7. Using the address element
      5m 24s
    8. Using the small element
      4m 24s
    9. Using the mark element
      5m 16s
    10. Working with date and time
      11m 55s
    11. Creating block-level links
      8m 53s
    12. Understanding link relationships
      9m 28s
    13. Defining link relationships
      6m 23s
  7. 17m 22s
    1. Current browser support
      7m 38s
    2. Ensuring block-level display
      4m 3s
    3. Adding support for elements in older browsers
      5m 41s
  8. 3m 46s
    1. Additional Resources
      3m 46s

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
please wait ...
HTML5: Structure, Syntax, and Semantics
4h 34m Beginner May 31, 2011

Viewers: in countries Watching now:

Gain a deeper understanding of HTML5 and learn how to create richer, more meaningful web pages with structural tags and descriptive attributes. In this course, author James Williamson presents an overview of HTML5 and its development, defines the new tags and attributes, and discusses how browsers parse and display HTML5 content. The course also includes step-by-step instructions for constructing an HTML5 document with a header and footer, navigation, content groups, and formatting.

Topics include:
  • Defining basic elements
  • Exploring the content model
  • Creating document sections
  • Using hgroup to override sectioning
  • Using the proper nesting structure
  • Choosing the right structural element
  • Using class and ID attributes
  • Building navigation
  • Grouping content with asides
  • Using divs in HTML5
  • Creating block level links
  • Defining link relationships
  • Understanding current browser support
  • Adding support for elements in older browsers
Subjects:
Developer Web Web Design Web Foundations Programming Languages Web Development
Software:
HTML
Author:
James Williamson

Defining HTML5 documents

Being somewhat apprehensive about learning an update as large as HTML5 is fairly natural. I remember putting off learning ActionScript 3.0 for about a month or two just because I didn't relish the thought of having to relearn everything from the ground up. Language updates tend to be more complicated, more verbose, and they require us to learn to do familiar things in new ways. Now that's why I want to start by going over some of the basics of HTML5 and showing you that in this case, sometimes less is more. HTML5 greatly simplifies many of the features found in HTML 4 and makes it easier to define the document structure.

Now, the first thing I want you to do is take a look at the sample HTML page I have open here now. You can find this in the 02_01 folder. So this is an XHTML1.0 transitional document. Nothing really complex here. It's just your everyday normal HTML file. And what I want to do is take a look at how we could create the same document using HTML5. So the first thing I am going to focus on is the document type declaration, very first line of code here. This is this a really long, sort of arcane string of text that essentially tells browser agents which set a parsing rules to use based on the document type.

So, I am going to switch over to a brand- new file, and whatever authoring program you're using, just go ahead and create a new file. And if creating a new file puts some beginning content in there--many programs do-- just go ahead and delete all that so we can just start from scratch and create everything by hand. Okay. So again, in HTML5, the document type declaration is a lot simpler. So I'm just going to go ahead and open up a new doctype declaration, and to do that, I do that by opening a tag !doctype. After that, I just have to tell it that it's an html document. That's it.

I'll go ahead and close that, and I am finished with my document type declaration. Now right away we can see a huge difference here. HTML5, remember, it's considered a living standard, so we don't need a version number. We also don't need a document type declaration URL. All we really need to do is to declare the document as an HTML file. Now truthfully, we don't even really need the doctype. But for backwards compatibility, it helps keep older browsers from triggering what we call quirks mode. So since we need it, we are going to go ahead and use the most minimal doctype possible.

Now, the thing I really love about this is that you can remember it. No more cutting and pasting or relying on authoring programs to do it for you. You can just type it in in a couple of seconds. Now, let's take a look at what else we need. The next thing I am going to do is go down to the next line and open up an HTML tag. Here I'm going to use one attribute. I am going to use the language attribute, and since I am authoring this in English, I am just going to pass along English. It's always a good idea. It's optional to pass a language attribute, but it's a good idea, so that any user agent will know what is the native language that you are authoring this in.

Now, the next thing I want to concentrate on is the character encoding for our page. Now typically, when an HTTP header is sent, the character encoding is sent along with it. But sometimes it's not the case, so it's always very helpful to do that in the head of your HTML file. Now, let's take a look at how this is done in XHTML first. So I am going to switch over to my XHTML 1.0 transitional document, and I can see right here is the meta tag that handles the character encoding. Now there's a lot going on here. This is a content type meta tag. It's telling what the content of the document is.

It's telling what character encoding to use. And there is a little bit of irony here that really shouldn't be missed by anybody. Notice that the content type being served is text/html. Well, that means that even though we have a document type declaration of XHTML, the content is being served as HTML, which means it's not really being served as XHTML; it's being served as badly formed HTML. So, a lot of irony there. All right, so let's take a look at how much easier this is to do in HTML5.

The next thing I am going to do is go down to the next line, open up a head tag, and then inside of that, I am going to go ahead and open up a meta tag--and the meta tag we are going to use this time is much simpler. I am just going to simply pass along a new character set attribute and inside that, I can pass along the utf-8 value and I am finished. No need to self-close it. I just go ahead and type in the meta tag and set the character encoding with the character set attributes--really, really simple. All right, so I am going to go and finish out the barebones of the document by adding a title and inside the title, I am going to type in "Welcome to Explore California." And after that, I'll go ahead and close the head of the file.

I am going to open up a body tag, close the body tag, and then finally, close the HTML file. I am going to go ahead and save that. I am going to save it in the Chapter_02>02_01 folder, and I'm just going to save this as html5.htm. Cool! So that's it for the basic structure of an HTML5 document. That is really all that's required to create one. That's quite simple, really, isn't it? That certainly is less ambiguous than the whole XHTML/HTML back and forth, and I would like to point out, it's simple enough to memorize.

There are currently no FAQs about HTML5: Structure, Syntax, and Semantics.

 
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.
Upgrade now


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 Upgrade now

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 HTML5: Structure, Syntax, and Semantics.

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

Notes cannot be added for locked videos.

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.