Brenton Strine

Brenton Strine

Heading and Sectioning

Slide Duration:

Table of Contents

Section 1: HTML
Your First Web Page

17m 1s

Intro
0:00
World Wide Web
0:23
Introduction to HTML
0:25
Looking at Source Code
0:53
HTML5
1:58
HTML5 Specification
1:59
Creating a Web Page
4:10
What You Will Need to Create a Web Page
4:11
Example: Basic Web Page
4:40
Example: Creating a Web Page
5:46
HTML Elements
6:33
Adding a Title
7:08
Main Body
7:48
First Level Heading
8:23
Adding an Image
8:42
Paragraph
9:09
Adding a List and URLs
11:13
Footer
14:09
CSS: Styling
16:02
Web Basics and Web History

32m 23s

Intro
0:00
The Web
0:56
Overview of the Web
0:58
The Web Page
2:39
Overview of the Web Page
2:40
Web Technologies
4:45
Overview of Web Technologies
4:46
The Web Today
9:22
The Web Today
9:23
What is HTML
11:22
HyperText Markup Language
11:23
The Creation of the Internet
12:40
History of the Internet
12:41
Developments in HTML
14:10
The Birth of HTML
14:11
Early Problems
15:35
Early Browsers
16:24
History of Early Browsers
16:25
NCSA Mosaic
17:55
NCSA Mosaic
17:56
The Browser Wars Begin
19:39
History of the Browser Wars
19:40
Casualties of War
22:27
Results of the Browser Wars
22:28
HTML 4 Stabilization
25:31
History and Overview of HTML4
25:32
Modern Browser Developments
27:27
Modern Browsers
27:29
HTML5
30:57
Overview of HTML5
30:58
Web Development Tools

26m 28s

Intro
0:00
Browsers
0:17
Introduction to Browsers
0:18
Example: Browsers
2:35
Firefox Add-ons
3:14
Firefox Browser
3:15
Example: Firebug Add-ons
3:54
Example: Web Developer Toolbar and ColorZilla
7:51
Domain Names and Hosting
10:23
Overview of Domain Names and Hosting
10:24
Your Own Domain
11:03
Installing a Local Web Server
12:42
Installing a Local Web Server
12:43
Apache Web
13:29
WYSIWYG Editors
15:56
Introduction to WYSIWYG Editors
15:57
Content Management System
18:31
How Content Management System Works
18:32
Example: WordPress
20:00
File Transfer Protocol
22:26
File Transfer Protocol
22:27
HTML Elements and Attributes

21m 50s

Intro
0:00
Proper use of Elements and Attributes
0:14
Elements and Attributes
0:16
Example
1:06
Normal HTML Elements
2:00
Start Tag, Content, and End Tag
2:02
Example: Warning!
2:34
Void HTML Elements
3:23
Self-Closing Tags
3:24
List of Void Elements
4:04
Example: Line Break
5:00
HTML Comments
6:13
Purpose of Comment Tags
6:14
Example: Comment Tags
6:50
Attributes
7:25
Properties of Attributes
7:27
Example: Attributes
7:39
Example: Whitespace
10:22
HTML Character Codes
12:05
Character References
12:07
Example: Registered Trademark Symbol
12:35
Example: Using Character References
13:23
Example: Start Tag and End Tag
15:57
Example: Self-Closing Tag
16:37
Example: Attributes
17:37
Example: Proper use of Elements and Attributes
19:02
Example: Comment
20:09
Example: Whitespace
20:46
Essential Tags Part 1

41m 42s

Intro
0:00
Document Structure Tags
1:13
Document Structure Tags and Example
1:14
Layout Tags
3:24
Layout Tags
3:26
Example: Layout Tags
7:48
Example: Layout Tags
11:28
Example: Layout Tags
13:17
Example: Layout Tags
14:22
Text Level Tags
17:22
Text Level Tags
17:23
Example: Text Level Tags
17:48
Grouping Content Tags
24:23
Grouping Content Tags
24:24
<p> Tag
24:45
<hr> Tag
25:31
<figure>, <figcaption>, and <blockquote> Tag
26:14
<div> Tag
26:58
Example: Grouping Content Tags
27:28
Embedded Content Tags
33:12
Embedded Content Tags
33:13
Example: Embedded Content Tags
35:39
Essential Tags Part 2

24m 20s

Intro
0:00
Simple Tables
0:17
Simple Tables
0:19
Example: Simple Tables
2:31
Semantic Tables
5:11
Semantic Tables
5:14
Example: Semantic Tables
6:24
Simple Lists
8:14
Simple Lists
8:18
Unordered List
8:36
Ordered List
8:42
Example: Simple Lists
9:37
Definition Lists
14:08
Definition Lists
14:09
Example: Definition Lists
15:21
Forms
17:11
Forms
17:12
Example: Forms
17:52
Markup Language

29m 38s

Intro
0:00
HTML 1 Through 3.2
0:13
Period of Rapid Growth of HTML
0:14
Tag Soup
2:03
Definition of Tag Soup
2:04
Example: Tag Soup
3:00
Example: Tag Soup and Valid Doctype
4:45
HTML 4.01
5:26
Overview of HTML 4.01
5:27
Three Flavors of HTML 4.01: Strict, Transitional, and Frameset
6:05
XHTML 1
7:19
Overview of XHTML 1
7:20
Example: XHTML 1
9:20
XHTML1 Syntax
11:48
Lower Case Rule
11:49
Closed Elements Rule
12:25
Encased in Quotes Rule
14:18
Boolean Attributes May Not Be Minimized
14:35
Correct Nesting is Enforced
15:29
The Problem with XHTML
16:15
Problem with XHTML
16:16
XHTML 2
19:22
Overview of XHTML 2
19:23
HTML 5
20:43
Overview of HTML 5
20:44
Validating
22:44
Validators
22:45
Example: W3C Markup Validation Service
25:26
Page Structure and Meta-data Elements

32m 50s

Intro
0:00
The Doctype
0:12
Doctype
0:13
Example: Doctype
1:25
The Root Element
1:57
Root Element
1:58
Example: Root Element
2:45
The Head Element
3:38
Head Element and Body Element
3:39
Example: Head Element and Body Element
5:06
The Head Element
5:42
Head Element vs. Header Element
5:47
The Title Element
6:51
Title Element
6:52
Example: Title Element
7:54
The Base Element
9:00
Base Element
9:03
Example: Base Element
9:42
The Link Element
14:07
Link Element: rel, type, and href
14:08
Example: Link Element
15:13
The Meta Element
17:54
Meta Element: charset, name, and http-equiv
17:55
Example: Meta Element
21:00
The Style Element
23:35
Style Element
23:37
Example: Style Element
24:40
Text-Level Semantics

30m 13s

Intro
0:00
Text Level Semantics
0:06
Paragraph Level
0:07
The <a> Element
2:23
Definition of the <a> Element
2:25
The <em> Element
3:25
Definition of the <em> Element
3:26
The <strong> Element
6:50
The <strong> Element
6:51
The <small> Element
8:35
The <small> Element
8:36
Example of <small> Element
10:19
The <cite> Element
10:55
The <cite> Element
10:56
Example of <cite> Element
12:32
The <q> Element
12:45
The <q> Element
12:46
Example of <q> Element
13:34
The <abbr> Element
15:35
The <abbr> Element
15:36
Example of <abbr> Element
16:41
The <dfn> Element
17:03
The <dfn> Element
17:04
Example of <dfn> Element
18:01
The <time> Element
19:11
The <time> Element and Example
19:12
The <code> Element
21:18
The <code> Element
21:19
Example of <code> Element
23:00
The <sub> and <sup> Elements
23:31
The <sub> and <sup> Elements
23:32
Example of <sub> and <sup> Elements
23:50
The <i> Element
24:51
The <i> Element and Example
24:52
The <b> Element
27:16
The <b> Element
27:17
Example of <b> Element
29:07
Heading and Sectioning

23m 39s

Intro
0:00
Heading Elements
0:06
Heading Tags
0:07
Heading Rules
1:13
Heading Rules and Example
1:35
Sectioning Roots
5:39
Sectioning Roots
5:41
Sectioning Contents
6:25
Sectioning Content Elements
6:27
Section Wrapping
7:40
Section Wrapping
7:41
Example: Section Wrapping
10:10
Real World Example 1
15:36
Forms

47m 51s

Intro
0:00
Form Terminology
0:23
Form
0:24
Control
0:43
Control Name and Control Label
1:09
Input Type and State
1:52
Form Controls
2:20
Button: Submit and Reset
2:32
Radio
3:37
Checkbox
4:00
Select Menu
4:05
Textarea
4:28
Various Input Types
4:38
Example: Basic Controls of Form Element
7:05
Example: Buttons
18:20
Example: Additional Controls
20:56
Example: Special Input Types
27:55
Example: Date and Time Control
33:40
Example: Create Your Own Control
37:32
Example: Placeholder Text
39:10
Example: Datalist
41:43
Example: Sizing and Input Containment
42:16
Example: Select Modification
42:51
Example: Required Attribute
44:41
Links

36m 41s

Intro
0:00
URIs and URLs
0:23
Definitions of URL and URI
0:36
Differences Between URL and URI
0:42
Example: URI and URL
1:14
Typical URI Construction
2:33
Domain and Subdomain
2:34
Protocol
4:18
IP Address
5:05
Typical URI Construction
5:32
Second Level Domain
5:33
Port
6:07
Foldernames
6:46
Typical URI Construction
8:06
Filename and File Extension
8:08
Typical URI Construction
10:38
Name/ Value Pairs
10:40
Internal Anchors
11:45
Typical URI Construction
12:30
Example: URI Construction
12:31
Relative and Absolute URIs
14:20
Relative and Absolute URIs
14:22
Example: Relative and Absolute URIs
18:32
Link States
24:15
Link States
24:16
Example: Link States
25:18
Block Level Links
27:02
Example: Block Level Links
27:03
Bookmark Links
29:18
Bookmark Links
29:20
Example: Bookmark Links
30:15
Attributes
32:06
href and target
32:20
rel, media, hreflang, and type
33:18
Embedded Content

46m 5s

Intro
0:00
Embedding Image
0:22
Embedding an Image
0:25
Image File Formats
3:38
Image Format: Jpg
3:42
Image Format: Png
4:13
Image Format: Gif
4:40
Compression
6:05
Image Format: Precise Lines and Fewer Colors
8:38
Animated Gif
10:49
Alpha Transparency Png
11:09
Embedding Audio
12:52
Old Way of Embedding Audio
13:00
New Way of Embedding Audio
14:54
Example: Adding Buttons
20:04
Message for Users
26:36
Audio Attributes
27:46
Control
28:29
Autoplay
28:44
Loop
29:36
Preload
30:40
Embedding Video
32:00
Embedding Video
32:11
Controls
34:22
Poster Attributes
36:01
Video Formats
37:36
Solving Formatting Problem
39:26
The Canvas Element

19m 25s

Intro
0:00
Creating the Element
0:38
What is the Canvas Element?
0:39
HTML and Canvas Element
1:48
Example: Canvas Element
3:23
Creating the Canvas in JavaScript
5:13
getContext() Method
5:17
Checking Browser Support with the getContext() Method
6:00
Example: Creating the Canvas in JavaScript
7:31
Drawing in the Canvas
10:13
Methods for Drawing in the Canvas
10:14
2d Context
10:58
Example: Creating Drawing in the Canvas
11:39
Example: Adding an Image and Texts
15:30
Example: Advance Canvas Element
17:31
Content Models

29m 8s

Intro
0:00
The HTML 4.01 Content Model
0:16
Block Elements and Inline Elements
0:18
Example: Block Elements and Inline Elements
1:18
W3C Markup Validation Service
3:28
The HTML5 Content Model
6:21
Overview of HTML5 New Content Categories
6:22
Flow Content
8:02
Specification for Content Models
8:05
Flow Content
9:41
Example: Flow Content Elements
10:40
List of Flow Content
11:35
BlockQuote Element
11:50
Sectioning Content
13:19
Introduction to Sectioning Content
13:20
Heading Content
14:06
Heading Content and hgroup Element
14:07
Phrasing Content
16:56
Attributes of Phrasing Content
16:57
Anchor Element in Phrasing Content
17:28
Embedded Content
19:33
Attributes of Embedded Content
19:34
No Content
19:53
Transparent Content
20:38
Source Elements and Param Elements
21:15
Interactive Content
24:16
Interactive Content Elements
24:17
Button Element
25:57
The DOM

13m 10s

Intro
0:00
The DOM
0:26
Document Object Model
0:27
The DOM Tree
0:55
DOM Trees
0:56
Example: DOM Tree
1:31
Vocabulary: Tree, Node,Branch, Parent, Child
2:15
Exploring the DOM
3:13
Example: Built-in Browser Inspection and Firebug
3:15
Example: Manually Exploring the DOM
6:01
JavaScript
7:28
DOM Navigation Techniques
7:55
DOM Navigation Techniques
7:56
Favicons

13m 14s

Intro
0:00
Favorite Icons
0:08
Function of Favorite Icons
0:09
Bowser Support
1:10
Browser Support
1:13
Location in Browsers
1:46
Implementation Methods
2:04
Implementation Methods for Favorite Icons
2:05
Favicon and Apple Mobile Devices
4:51
Creating the Icon
6:13
How to Create the Icon
6:14
Favicon Resources
9:10
Websites for Icon Creation and Conversion
9:11
Programs for Icon Creation and Conversion
11:50
Embedding Flash and Other Objects

15m 7s

Intro
0:00
Flash and other Plug-ins
0:41
Main Problems with Flash
0:44
Benefits of Flash
2:02
Embedding Flash: the Old Way
2:57
The Old Way to Embed Flash
2:58
Embedding Flash: the Satay Method
6:42
Satay Method
6:43
Embedding Flash: HTML5
9:28
How to Embed Flash in HTML5
9:29
Embedding Flash Directly in <video>
11:39
Embedding Flash Directly in Video Element
11:40
Review of Embedding
13:24
Image Elements
13:39
Video, Audio, and Canvas Elements
13:44
Embed Elements
13:53
Object Elements
14:04
Offline Cache

19m 53s

Intro
0:00
Purpose
0:47
Purpose of Offline Cache
0:48
The Appache
2:06
Attributes of Appcache
2:07
The Manifest File
3:22
Manifest File
3:23
Example of Manifest
3:32
Section Headers: Cache, Fallback, and Network
4:21
Server-Side Considerations
5:17
text/cache-manifest MIME-type
5:18
Other Server-Side Considerations
5:41
ExpiresActive On and ExpiresDefault 'access'
6:07
Example: Offline Cache 1
7:44
Example: Overwriting Files
11:09
Example: Wild Cards for Network
14:58
Example: Offline Cache 2
16:06
Web Development Principles

26m 47s

Intro
0:00
Interoperability
0:36
Interoperability of Web Development
0:37
Interoperable Websites Should Work
3:05
Qualities of Interoperable Websites
3:06
Backward Compatibility
5:52
Compatibility With Older Technology
5:53
Example: Meta Tag
9:07
Forward Compatibility
9:33
Advancement in Technology
9:34
Accessibility
10:11
Accessibility of Content
10:12
Semantic Code
11:43
Example: Where Will This Link Take You?
13:56
Graceful Degradation
14:59
Graceful Degradation or Fault Tolerance
15:00
Types of Degradation
16:35
Progressive Enhancement
18:36
Progressive Enhancement
18:37
Future Detection and Browser Sniffing
21:05
Future Detection Versus Browser Sniffing
21:06
Example: Email Input Type
23:39
Tim Berners-Lee's Quote
26:20
Loading...
This is a quick preview of the lesson. For full access, please Log In or Sign up.
For more information, please see full course syllabus of HTML
Bookmark & Share Embed

Share this knowledge with your friends!

Copy & Paste this embed code into your website’s HTML

Please ensure that your website editor is in text mode when you paste the code.
(In Wordpress, the mode button is on the top right corner.)
  ×
  • - Allow users to view the embedded video in full-size.
Since this lesson is not free, only the preview will appear on your website.
  • Discussion

  • Download Lecture Slides

  • Table of Contents

  • Transcription

  • Related Services

Lecture Comments (9)

1 answer

Last reply by: Professor Strine
Fri Aug 30, 2013 5:08 PM

Post by Roman Kolesnitsky on August 30, 2013

Hello, Brenton

@ 12:40 you add <section> tags like so:

<body>
 <h1>Apples</h1>
 <section>
 <p>Apples are fruit.>
 ...
 </section>
</body>

Isn't <h1> element supposed to be part of <section> like so:

<body>
 <section>
 <h1>Apples</h1>
 <p>Apples are fruit.>
 ...

What am I missing?

1 answer

Last reply by: Professor Strine
Sun Aug 25, 2013 10:20 PM

Post by zenil patel on August 25, 2013

can you give an example for this

0 answers

Post by Elwin sylvester on September 16, 2012

What I do like about your lessons is that you pay a lot of attention to weaker (blind) people. You mentioned the Bible a couple of times and it's in the Bible that the strong should look after the weaker. Nice to see that you put into practice what you belief.

1 answer

Last reply by: Professor Strine
Sun Aug 25, 2013 10:17 PM

Post by Jorge Guerrero on March 17, 2012

In the W3C web page, you see [H1] and no closing argument and no <> signs for the tags.

Is W3C using a different code?

1 answer

Last reply by: hannah rafiq
Mon Oct 22, 2012 12:20 PM

Post by isaac N harper jr on March 5, 2012

Thanks for the examples when explaining tags they really help me get a deeper meaning than just hearing the definitions read with examples of how the code is rendered. Btw, I ran the validator on educator.com and there are 124 errors in 1,039 lines of code that's a 11.9% error rate!

Heading and Sectioning

Lecture Slides are screen-captured images of important points in the lecture. Students can download and print out these lecture slide images to do practice problems as well as take notes while watching the lecture.

  • Intro 0:00
  • Heading Elements 0:06
    • Heading Tags
  • Heading Rules 1:13
    • Heading Rules and Example
  • Sectioning Roots 5:39
    • Sectioning Roots
  • Sectioning Contents 6:25
    • Sectioning Content Elements
  • Section Wrapping 7:40
    • Section Wrapping
    • Example: Section Wrapping
  • Real World Example 1 15:36

Transcription: Heading and Sectioning

Welcome back to Educator.com.0000

This lesson is going to be on HTML headings and sectioning.0002

Heading tags are tags that semantically outline and structure your web page.0008

There are six of them that give six different levels, and then the hgroup element, which you use to group elements that are the same heading together.0014

Usually, you have an h1, which is the most important heading.0027

And then, going down from that, they decrease in importance.0032

The title of your webpage is usually going to be the h1, and then, if you have something tiered underneath that, it will be h2 and h3 and h4 and so on.0038

You use hgroup in an instance where, for example, you have a heading level 1, and then you have something like a subtitle.0047

It is not a heading level 1; it is a separate heading.0054

But it is still part of that first heading, so you don't want it to create a lower-level section yet.0058

You can group that inside of an hgroup element, and it will keep them together and keep the page structure intact.0064

The basic rules for headings are outlined in the HTML5 specification.0075

And I have basically just copied them verbatim, because I think they are important; and they are complicated,0081

but the wording is very precise and accurate, and it is worth looking at in detail.0089

The first element of a heading content in an element of section content represents the heading of that section.0096

First of all, heading content would be the h1 through h6 elements.0106

And section content is the sectioning content, like the aside, the nav...we will look at that in a minute.0114

But in this example, it is nav; it is going to help you section different parts of the web page off.0125

Usually, the section content will be at the top level.0131

So, what this rule here is saying is that the first element of heading content0135

that shows up inside of something like a nav, for example, represents the heading for that section.0142

So, this h1 here--if, say, you had a title in here--would represent the heading for this nav that it is contained in.0149

It goes backwards; and then, of course, this entire nav has the heading that is specified right here in this h1.0156

If this had been an h2 or any other heading content, it would have appointed the heading for this sectioning content.0164

OK, the second rule: Subsequent headings of equal or higher rank start new implied sections.0176

These are subsequent headings--h2 and h3--but they are not of equal or higher rank.0182

This is a subsequent heading that is of equal rank to this h1; so, this one starts a new implied section.0189

You have, underneath this sectioning content, two sections--this second one starts a new section.0200

The subsections are defined here: headings of a lower rank imply subsections that are part of the previous one.0211

So, these headings are of lower rank than the heading that is above it, and they start subsections,0219

which is why I have indented them--because they are underneath.0224

So, you notice: the indentation that I am using here is not what you might expect,0228

because I said "nesting" by accident, because normally when you nest, that is when you indent; and you only indent when you are nesting.0234

But to illustrate the point here of these, I am indenting these to show the sectioning structure.0243

This h2 is actually, in terms of the way that the nesting is run, a sibling of this h1.0251

But because of the heading rules, it is more like a child, instead of a sibling.0259

And so, I have indented it, because according to this rule right here, it is a subsection; and then, h3 is a subsection of this h2--0265

although, really, all of these would be (in terms of just nesting on its own) just siblings (and children of this nav).0274

The last point here: in both cases, the element represents the heading of the implied section ("both cases" being these two points).0283

So, when there are subsequent headings, either of a higher level or of a lower level,0292

in all of those, the element represents the heading of the implied section.0299

The implied section that this h2 creates--the heading is defined here for everything that is underneath it.0304

The heading of the section that this h3 is in is defined by this h2, etc., etc.0312

And you can have a lot of other elements in here.0318

This is just the outline of the headings only.0320

There can be paragraphs and a lot of other things underneath here.0322

And they will all fit into the structure, based on where they fall in relation to all these.0325

So, anything after this, but before this, will be inside this h3 element and will have the heading that is defined by this h3 element.0331

Sectioning roots are a little exception: sectioning roots can have their own outlines,0341

but the sections and headings inside these elements do not contribute to the outlines of their ancestors.0348

So, these are the sectioning root elements; and so, take for example a table data.0353

It has its own outline, but it doesn't actually fit into the normal flow of the way that normal headings go.0361

So, say you have a heading, and it has a table inside of it.0367

The content in the table data fits into the table's heading, but not necessarily into what goes above it.0371

And it doesn't contribute to the outline that its ancestor has.0380

OK, sectioning content is...well, these are the sectioning content tags.0387

This is the exhaustive list; and they are kind of the top-level things that you would be using to group parts of your page together.0394

And all the other headings will usually be underneath this.0402

But you can also have these underneath headings.0404

Now, sectioning content is always a subsection of the nearest ancestor root section or content section.0407

This little example here--remember, sectioning content are these tags here; and sectioning root elements are what I just talked about in the last slide.0417

This is a sectioning root element: it is the ancestor of this h1 and these articles.0428

This article here is a sectioning content, and the blockquote is the nearest ancestor.0438

So, this article is a subsection of the blockquote, and not of this h1 element, which is above that,0446

or of this h1 element, which is below the blockquote, even.0454

Section wrapping is defined by the section tag, and you can use it to help indicate the structure of your document0462

in a way that improves readability to the computers that are trying to understand the outline.0473

You don't technically need them, but it can organize things better.0480

And it is generally a good idea to use them, if only for your own sake,0484

because then you don't have to learn all of the sectioning and heading rules as closely,0489

because a lot of it depends on kind of complicated structural rules, based on when heading tags end and begin,0495

and what the type of element that is being used is.0503

It is better to just set it all apart with a section tag.0506

The HTML specification encourages you to explicitly wrap sections and elements of sectioning content, instead of just relying on these rules.0512

In this case here, we have some made-up headings, and the h1 is followed by a lot of other headings.0521

But they are all actually underneath it, except for this paragraph, which is not in this section.0530

So, if we didn't have this section element right here, it would not be clear to you that this last paragraph here,0537

with the content of Grunt, is actually directly underneath the h1.0545

The way that this would get parsed would be: this h1 is the first level, and it has this Grunt paragraph directly underneath it.0550

So, this is actually a first-level paragraph.0560

Even though it follows all of these other ones, it is not a child or a part of any of these subsections.0564

And then, this section tag makes it explicit that all of this section is underneath the h1.0570

And then, you have h2, h3, h2, h3; this would be a section here, and this would be a section.0579

And note that this paragraph here would actually be, again, underneath this h2.0591

So, if you wanted to put a section around this part, you could, as well.0598

Let's take a look at how this actually would play out, really quickly.0611

Here is the code for what we were just looking at.0615

And this is how it shows up in the browser.0625

You are going to end up using styling to make sure that it looks a little bit better than this,0628

because this is using the complicated rules, and it may be a little bit confusing.0633

But you should be able to see that this is the largest text; it is the level 1 heading corresponding to this heading here.0638

And then, this section (if I highlight it) is all of this.0646

So, this Grunt text right here is part of this section, part of this level heading.0654

Now, the next two elements, Bar and...I don't even know how to pronounce this made-up word, Quux...0664

are both the second-largest text, which makes sense; they are level 2 headings, and they are both inside this section.0670

And h3, Thud, is the next largest...oh, and Bla--they are both children of this.0680

Baz, here, would be a part of this section.0691

All right, let us look at some further examples now.0717

Say this is a basic outline for a document that you have.0723

It is about apples, so all the rest of this page is about apples.0730

And everything following this h1 is going to be underneath that heading.0733

The first thing here is "Apples are fruit."0739

It is clearly the first paragraph underneath this heading.0742

And then, you have two subsections for the heading: Taste and Color.0745

And Taste has a further subsection of Sweet.0751

Let's look at it really quickly: it just looks like this.0758

Now, if we were going to improve this heading a little bit, we could add some sectioning content tags to clarify what, exactly, is the section of what.0762

This is all one section; and we can add a further section underneath the Taste, all the way down to above the Color section.0789

Now, this is clearly its own section.0810

Furthermore, we could add a section here, just for this.0814

If you remember the rules that we had, this section gets the heading of the element above it.0829

So, the heading for this section is this right here (Sweet); the heading for this section is Taste.0836

And then, lastly, we will add a section here: the heading for this section is Color.0844

And let's fix the indentation; so now, it should be clear what exactly is happening.0856

Now, if we tab over to the browser again and refresh, nothing actually changes,0892

because all of what we just did here was already defined according to the rules.0898

But we just made it clearer; and now, when we are adding code in later, if we are going to put paragraphs in,0904

we are not going to get confused and maybe put something in a place that we don't realize is going to be headed by the wrong thing.0909

Right now, if we put something here after this paragraph, we can specify if we want it to be a child of this,0920

by putting it in this section; or, by putting it inside this section, a child of Taste.0928

The last thing we are going to do today is look at a couple of real-world examples of websites that are using headings,0937

and then use the w3c validator to look at the headed outlines that it generates.0945

And this is going to give us a clue about how, for example, screen readers are going to go through the web page,0953

because it will take the outline of the headings, and it will read those first, if the user specifies it to.0962

And then, they can tell what part of the page they want to be read through.0971

This is A List Apart; and so, take a look at it, and you should be able to see that there are a few headings.0975

There are headings for the individual articles.0986

There is the main heading; let's put it into the validator and check Show Outline here.0990

And then, when we check it, we can shortcut down to the document outline.0999

There is actually not a first-level heading specified in Text.1005

In this page, the image is actually the first-level header.1010

But then, h3 here--this section here--would correspond to this entire section.1016

And if you look at it (I'll zoom in, so you can see a little better), the first heading that we come across is a date, actually.1024

And the reason that it is a date is because (and you can see the date showing up right here) this little section changes according to the date.1034

It is a little newsletter, and it comes out in sections; and that is all right.1043

And then, the subheadings are the names of the articles.1057

Now, the next level heading that is parallel with this is Editor's Choice, which is right here.1062

And the next one you should expect: Search ALA and Topics are also next to it.1069

Search ALA, Topics, and then A Book Apart down here are all next to each other.1083

If we were going to click on one of these and go into it, and put it into the validator, you will see a slightly different outline.1093

This time, we have, again: the first first-level heading is empty on this outline, because it is an image.1112

But we have an h1 that actually shows up as second-level.1117

That is because the first level applies to the entire page; the second h1 applies to the actual document that is this article here.1121

And then, these second-level headings are all the article headings within the article that help break it up a little bit.1134

Let's look at the World Wide Web Consortium; it has some interesting things in it.1148

This one actually validated, which you expect from the World Wide Web Consortium!1166

We have the first-level heading, which is W3C, corresponding to the title of the entire site.1176

And then, h2 is Site Navigation; now, you can see that there is actually not a second-level heading visible on the page that says Site Navigation.1185

That is fine; it is actually good practice of semantics, because visually, it is clear that this is site navigation, just by the way that it is laid up and laid out.1197

But to a screen reader, it is not clear what is the navigation and what is the content, right away,1208

if there are not these headings that you can use to tell the screen reader which parts are what.1215

That is really good practice there.1224

And then, we have the News section, which I assume is this, and then the other second-level headings, following all the way down.1226

Now, if we were to take this and click on, say, Semantic Web (now we are on a subpage of the website),1236

and run this through the validator, you will see: it changes a little bit.1248

Now, what we have is a first-level heading, like we had before, and the Site Navigation.1261

But then, we have another first-level heading, Semantic Web.1267

And that first-level heading relates to this area here, and it is the first-level heading for this area.1271

And then, you have second-level headings, and so on, all the way down.1279

Think about this in terms of screen reading, and it is probably going to help you create your headings in a way that makes sense.1288

If you are blind, and you are using a screen reader, you are not going to see this layout.1295

What you are going to have is a screen reader that is going to go through in order.1301

And it may (if you don't have a very advanced one) just start at the top and start reading as the page goes.1304

So, it would say "W3c Views Desktop Mobile Print Standards Participate Membership..."1312

And that is not very useful, because it is going to take you through all this heading stuff, and all this, before you even get into the content.1318

And if you want to indicate something at the very bottom of the page, and click on that link--1325

say, a feedback link--you are going to have to listen through the entire website to get there.1330

And that is not helpful at all.1335

What good screen readers will do is actually give the user an option to navigate through it, based on the headings.1337

They will first listen to the first-level headings (W3C and then Semantic Web); and there are no other first-level headings.1346

And then, the user will choose: do they want the W3C section or the Semantic Web section?1353

W3C applies to the entire website; so they should know that there is navigation underneath there.1359

Semantic Web is the section that they hopefully just clicked on, and then they can select that and then listen to the h2 headings.1363

If they want to get into this article right here, if you don't use good headings,1373

they are going to have to listen through the entire site until they get down to it, down around here.1380

But if you use good headings, they will have to listen to this and this, and they will select this;1385

and then, they will listen through these headings and select News1390

(hey won't have to listen to these headings, because they can click it as soon as they get to it)1394

and then listen to these headings, skipping all the content in each of these headings, until they get to the one that they want.1398

That is the end of the headings section lesson.1413

Thank you for watching Educator.com.1417

Educator®

Please sign in to participate in this lecture discussion.

Resetting Your Password?
OR

Start Learning Now

Our free lessons will get you started (Adobe Flash® required).
Get immediate access to our entire library.

Membership Overview

  • Available 24/7. Unlimited Access to Our Entire Library.
  • Search and jump to exactly what you want to learn.
  • *Ask questions and get answers from the community and our teachers!
  • Practice questions with step-by-step solutions.
  • Download lecture slides for taking notes.
  • Track your course viewing progress.
  • Accessible anytime, anywhere with our Android and iOS apps.