Lesson1: HTML5 and Semantics

What are web semantics?

- Throughout this course, you're going to hear me frequent use of the term semantics. It is, after all, part of the course's
name. However, it may be a term that you're not all that familiar with. Especially in the terms of how it's used in the
context of the web. So I'm going to start by taking some time to discuss it. Semantics refers to adding meaning through
language and on the web, that translates to using specific languages and syntaxes to add meaning to content.It's an
incredibly important part of the modern web and can have a huge impact on the effectiveness of your sites.

If we start with the very basics, web semantics allow us to control the organization and display of our content. Although
each site is unique, certain conventions have evolved over time in the commonly recognized page elements. Most pages,
for example, contain some form of navigation, search capability, branding region, footer and main content. By using
consistent semantic markup to identify these common elements, we make it easy for user agents to identify and
properly present those elements to viewers.

This may seem trivial, but in some cases, such as with assistive technology, identifying content semantically is critical to
ensuring functionality and providing easy access to page content. Semantics can help in other ways as well. A huge part
in the success of the web has been the rise in the way content is accessed and shared. Automated services like search
engines make it easy for users to find and access content. If that content is markedup semantically, it's much easier for it
to be indexed and found.

Put simply, it makes your content more relevant. Writing proper markups should be the goal of every web designer. It's
important to realize however, that there are tangible benefits to markingup your content semantically. Throughout this
course, we're going to focus on the proper semantic uses of HTML5 elements as well as exploring some of the
syntaxes that can help extend the semantic value of your markup and help you create more meaningful content.

Semantic HTML5

- HTML is the backbone of the Web. It's the common language that forms the structure of every single Web page. As
such, semantics is at the heart of what HTML actually does. As a markup language, Its tags are used to identify types of
content on the page. A paragraph tag, for example, identifies the content as belonging to a paragraph, the most basic
element for grouping content available. However, if that content needs to be identified in a more specific way, let's say
like here we have a quoted source, then it's better to use a tag that moreaccurately reflects the content.

Well, in this case, a blockquote. You can even further refine the quote by providing a cite reference for attribution. This
type of markup creates more meaningful content and it's one ofthe biggest responsibility of Web authors. That means,
of course, that as an author, it's critically important that you understand the meaning behind the elements that you
use and when they're appropriate. In many cases, this is pretty simple. HTML by design features a limited number of
elements. Just over 100, if you feel like counting.

And if you've been writing HTML for any amount of time, you're probably already familiar with the bulk of them. Some,
like headings and paragraphs, you'll use almost every time you create a new HTML document. Others, like the samp
element, which identifies content generated by a computer, are so specialized that you may never need to use
them. The trick, of course, is to understand a tag's meaning and the intent behind using it, rather than focusing on its
default formatting. Many authors do just that as they learn HTML.

Using the italic or end tag, for example, when they wish to italicize text without actually knowing there are
specific meanings behind each of those tags. In other instances, determining whichtag to use is often a judgment call. As
I mentioned before, HTML by design has a limited set of tags. That means that you'll often find yourself marking up
content that has no clear tag set designed to represent it. Take a chat log between two people, for example. Here we
have a conversation between Beth and Sam.

Beth has got the job and Sam is really stoked about that. So how would we mark this up in HTML? Well, if you do a quick
Google search, you'll probably find numerous approaches and opinions on properly marking it up. Since there's no
specific tag set designed to represent it, authors are left to decide for themselves which elements best semantically
define the content in question. Now, over time, certain standards often evolve, but in many cases it's a pure judgment
call on the part of the author in terms of how to represent the content.

Now, this should illustrate how important it is for you as an author to understand the semantic meaning behind the tags
that you use. If you don't have a solid understanding of their semantics, your content is never going to be as meaningful
as it should be. That's especially true for HTML5. Improved semantics was one of its main focuses with the addition of
new semantic elements, new rules for creating document outlines, and new content models that give a more specific
context for when and how elements are used.

We're gonna explore each of these additions in more detail a little later on in the course.Nothing beats going to the
actual source, however. And I can't stress enough how important it is for new authors to read through the HTML5
specification and keep it bookmarked as a handy reference when deciding how to structure and mark up content. I
especially like the index at the end of the spec that lists every single HTML element. This allows you to quickly skim
through them, read through their properties, and explore the element in more detail by jumping to its definition within
the spec.

I highly recommend bookmarking this and then using it as a way of becoming more familiarwith the semantics behind
the elements that you use.

HTML5 content models

- Before we move on to structuring HTML documents, I wanna take some time to explore HTML's content
models. Although this is a bit of an over-simplification, prior to HTML5, elements in HTML were considered to be either
block-level or in-line level. Block-level elements, like this heading and paragraph that you see here, occupy their own
space within normal document flow and can be used to group content inside their respective blocks. So if I were to
preview this in a browser, for example notice that the heading and paragraph are occupying their own blocks of content
within the page.

In-line level elements are generally found inside block-level elements. And those are considered to be text-level and that
means they appear in the normal flow of the text, such as this empasized text and the link that you're seeing here. These
distinctions didn't accurately cover all of the different content types that authors were likely to encounter. And for that
reason, HTML5 expanded the content model definitions, in order to give authors a better idea of how content types
should behave. These content models help user-agents know what kind of content to expect within an element and
control certain aspects of syntax, such as which elements can nest within other elements.

Learning these content types can give you a better understanding of HTML syntax and how these elements relate to
each other. At the moment, you're looking at the W3C HTML5specifications section on content models. They've got this
great interactive graphic here that can help us understand the content models and how they work together. What we're
seeing here are the main content models and those would be Flow, Metadata, Embeded, Interactive, Heading, Phrasing,
and Sectioning. Form elements are contained in their own content model and there are certain specialized elements
that kind of belong to their own content model, but for the bulk of the elements that you're gonna use these are the
content models that you're going to be dealing with.

Now, I wanna start with Flow content because flow content contains the majority of all the elements in HTML5. Think of
these elements as elements that would be included in the normal flow of the document. It's important to note here that
being identified as "flow" content has no bearing on how the content is displayed within the user-agent. Sample
elements include the anchor tag, article, aside, blockquote, canvas, details, div, em, form, heading, tags, maps,
sections, span, strong, table. I think you get the idea.

As you can see, if they can fit within the body tag, that's probably gonna be considered part of flow content. This also
means that elements can belong to multiple content models. It's helpful to think of flow content as being kind of a
parent content model, that contains more specialized content. Now speaking of that, metadata content is defined as
being content that sets up the presentation or behavior of the rest of the page's content. You'll primarily find these
elements in the head of the document and sample elements here would include the link, meta, noscript, script, and title
elements.

Now, note the overlap here in the graphic. That indicates that certain metadata content, like noscript, can be found in
the flow of the document. Phrasing content is the text of the document, as well as elements that are used to markup the
text within paragraph-level structures. In many ways, phrasing content is the same as in-line level elements from the
HTML4 specification. Sample elements include the anchor tag, the em, image, label, mark, span, and strong tags. Note
that all embedded content is considered to be part of phrasing content, while some interactive and metadata content is
as well.

Now, speaking of Embedded content. That's any content that imports other resources into the document. Sample
elements there include the object, video, canvas, and embed elements.Interactive content is any content
specifically intended for user interaction. Sample elements here would include the anchor tag, because people can click
on that, details, object, and the video element if controls are enabled. Note that some interactive content is
considered to be embedded content as well. Now you may have noticed that two sections kinda stand on their own over
here.

That would be the Heading and Sectioning content. Now Heading content defines the header of a section which can
either be explicitly marked up with sectioning elements or implied by the heading content itself. Heading content
elements contain the heading tags, H1-H6.Sectioning content is content that defines the scope of headings and
footers. Using these elements will create a new section within a document. Section elements include the article,
aside, nav, and section tags.

We're gonna talk a lot more about these elements in more detail in the next chaper. So, how in the world do you keep
track of who's who? Well, one of the things that you can do is you can come to the specification. Click on the Content
Model section. And then, for example, I could click on Flow content to see a list of all the different flow content
elements. Or you could find the specific elements themselves within the specification. For example, if I click on the
noscript tag here to jump to the noscript element within the spec, I can see that it belongs to both the metadata, flow,
and phrasing content as well.

Now don't worry too much about memorizing all of these content models or the elements that belong to them. Just
make sure you understand how elements are categorized in HTML and that you have a basic idea of what these
categories are. By understanding those content models, you can take advantage of HTML5's improved semantics and
create more meaningful documents.

Lesson2: HTML5 Document Structure

Structuring HTML5 documents

- In this chapter, we're gonna discuss the proper way to structure HTML5 documents.Understanding how to properly
structure your documents is crucial to ensuring that your pages are interpreted and presented correctly to the
user. Over the course of this chapter,we'll begin building the page that you see here. This is a fictitious biking trail
blog. It's gonna help us illustrate our course's concepts. While the information here is fake the the structure and
semantics of it are very real. Over the course of this chapter, we're gonna focus on establishing the page's structure and
then we'll focus on text-level semantics later in the course.

The best way to describe the structure of HTML5 documents is to picture them as series of sections and
subsections. These sections can in turn be visualized as a document outline.Much like a table of contents, if you will. This
outline is incredibly important to making sure that your content is read and displayed correctly. So, consider the
following document. You could quickly scan all of this and determine that it's about trees but what's not really obvious
here is how the information relates to each other or it's relative importance.

If we give the document an outline you can see how much easier the information is to scan and process. HTML works
the same way. A solid document structure not only makes your content easier to read it also makes it easier for search
engines, screen readers, and other user agents to navigate and find relevant information. Sections in HTML are
generated primarily through the use of headings. Okay, take our outline here. By using headings, we can more or
less accurately describe this structure that we want.

In HTML each heading creates an implicit section. Subsections are created when the headingof a lower rank is used. So,
in this example, we have one top level heading, represented here by this h1. And then we have nested
subsections, represented by levels h2 through h4. Since so much of your structure depends on headings it's critically
important that you have a strategy for using headings that creates the desired page structure.

Now, using headings to create sections is how we've been doing it since HTML4. It works but it's always felt a little
inadequate to most authors. Headings help define outlines but they don't group content. Now, prior to HTML5, authors
would group content with DIV tags and then use class or ID attributes to give these sections more semantic meaning like
you see here.Thankfully, HTML5 has introduced new sectioning elements that help authors add definition to documents.

Now, these sectioning elements are part of a group of new elements designed to make HTML more semantic. They are
the article, aside, nav, and section elements. Each time they're used a new section should be created in the document. It
addition to these sectioning elements,there are also a group of semantic grouping elements that are designed to group
contenttogether in meaningful ways. These are the footer, the header, and main elements. We'll be using each of these
elements a little bit later on but for now, let's go back to our outline and see how they can help us.

First, let's replace the two main article DIVs with actual article elements. It's a lot more semantic and you can see you
can still use the class or ID attributes to add further meaning if you need it. Then we'll enhance their structure with a
section element to group each of the articles content sections. Next, let's replace the resources DIV with an
aside. Semantically, this tells user agents that the content is related to the main content but isn't necessarily a part of it.

Turning our attention to our top level content we can finally tackle page navigation by using the new nav sectioning
element. We'll finish the structure off by adding a header element to identify the pages header and replacing our last
DIV with a footer element to identify the page's footer content. So, what do all these changes do to our document
outline? Well, for the most part, absolutely nothing. You see, HTML5 introduced a new outlining algorithm that was
supposed to make it easier for others to create complex document outlines.

For various reasons, it hasn't been implemented yet in any user agent. So, for now, we're kind of reliant on the old
method of using headings to convey sections and subsections. What adding the new HTML5 elements does for us is to
enhance the semantics of our contentespecially when we're grouping it together and it makes our pages a bit forward
looking for when a user agents might actually start implementing parts of the new algorithm. Okay, I know that was a
rather lengthy intro into sectioning in HTML but this is a critical concept for authors to understand.

Later on, I'll give you a couple of additional resources to check out that cover creating sectionsand document outlines in
a little bit more detail.
Defining HTML5 documents

- In the past, properly defining HTML documents has meant a dizzying array of doctype declarations and convoluted
meta tags. You had to keep track of which flavor of HTML or XHTML you were using, and even declare how the page
should be served. Thankfully, HTML5 simplifies this with one easy-to-remember doctype declaration, and a lot of
reduced overhead of declarations. I wanna start our Trails project by properly defining a bare-bones HTML file.

To do that I've opened up the Trails.htm file from the 02_02 folder. You might open this up and be like, "Wow,
something's wrong with this file." It's totally empty. We're gonna start an HTML document from scratch. The first thing
that you need in any HTML document is a doctype declaration. This is incredibly easy to do in HTML5. I'm just gonna do
"<!doctype".After that type in a space, and all we have to do is declare that this is indeed an HTML document.

Close your angle bracket and that's it. Since HTML5 is considered a living standard, we don't need a version number like
we did in previous versions. We also don't need a document type declaration URL, which is great, because I don't have
to remember all that. All you've gotta do is declare the document as an HTML file and that's it. If you wanna be truthful,
if you wanna really go into it, you don't even really need a doctype declaration, but for backwards compatability it helps
keeps older browsers from triggering what we call "quirks mode" so it's a good idea to have one in every HTML file you
create.

The next thing I need to do to have an HTML document, I need an html tag. I'm gonna create one of those. And inside
my opening html tag I'm going to declare the language that I'm using.In this case all we have to do is do the language
attribute and since I'm authoring in English,I'm going to type in "en" for English. This is an optional attribute but it's a
really good idea so that any user agent is gonna know what the native language is that you're authoring the document
in.

It's always a good idea to include this. After the html tag I'm gonna add a head to my document. You need one of those
in every HTML document. And then past the head I'm going to add a body. Once again this is really simple HTML
structure. If you've been authoring HTML documents for any amount of time, you already know this structure. However,
in the head of the document, I'm gonna go up and declare my character encoding. This used to be really convoluted.

It was very difficult to remember it so most people would copy and paste the meta tag that controls it. Now it's super
simple. After the head of the document open up a new meta tag and I'm gonna set the charset attribute to utf-8. After
that all I have to do is close the right angle bracket. I don't have to self-close it, that's XHTML syntax and we don't need
to do that anymore so that's fine. Typically when an HTTP header is sent the character coding is sent along with it but
that is not always the case.

What we've just done here, it's really important to do that in the head of your HTML file. I also recommend doing it
directly after the head so that the character set encoding is done prior to loading any other content. That's it. That is the
basic structure of an HTML file document. You can get a lot more complex if you want to, but this should be the
foundation of every HTML file you create.

Supporting legacy browsers

- When HTML5 was first released, one of the biggest barriers to its adoption was the lack of support for new elements in
Internet Explorer prior to version 9. All those browsers are becoming a little bit less of a concern for us. It's really helpful
to know how to add support for those legacy browsers. I have the trails file open, from the 02_03 directory. Now, we're
gonna do this within the head of the document. What I'm gonna do is, just below our new page title,which was added ...

While you were away, I added that for you ... I'm gonna go ahead and add a script tag here.Now, I'm gonna use the
magic of copying and pasting so I don't have to type all this out,because, frankly, I bet watching me typing is
boring. What we have is an opening script tag. Its source is pointing to the hosted, what's known as the HTML5 Shim, or
Shiv code, depending upon who you talk to. It's hosted by Google Code. Now, what this is, it's a very, very small,short
snipped of JavaScript.

It simply tells Internet Explorer to go ahead and create these elements. It doesn't actually place them on a page
anywhere, but by having Internet Explorer create those elements, it goes, "Oh, okay. "Well, I think that these
things "should have a right to exist. "So if I find them on a page, "I'll render them just fine." It sort of controls all of
this. It's a really, really short snipped of JavaScript code. You could go check it out for youself. If you don't feel like having
Google host it for you and being distributed through their CDN, then you can just go ahead and copy and paste the
JavaScript code within your own script tags and host it yourself.

I mean, that would be fine. All right. Now, that being said, this script tag is really only necessaryif the browser that's
opening this file is Internet Explorer less than IE9. Since we know that JavaScript, when it's loading, blocks the loading of
the other elements, it doesn't really make a whole lot of sense to make every single browser or user agent have to deal
with this scriptthat, frankly, is only necessary for those limited versions of IE. What we're gonna do is, we're going to
encase this in a conditional comment that only affects Internet Explorer.
I tell you what. You guys at Microsoft get a lot of flack. But I wanna thank the engineer that was foresighted enough to
do the conditional comments in Internet Explorer, because they are a gem. Okay. Right in front of the script tag, and I
mean right in front of it, I'm gonna go ahead and do a comment. I'm just gonna do an HTML comment, which is the <
and then !--. Now, after this, I'm gonna do [if and then a space, lt, less than, another space, IE 9.

Then we're gonna to do a ] and then a >. That's gonna close that out. This is a conditional comment. Basically, it's letting
the browser know that, "Hey, if you're less than Internet Explorer 9, "I need you to run this." Every other browser in the
world is gonna see this as an HTML comment and is gonna properly ignore it. Now, we need to make sure that the rest
of our page still gets rendered, so after the closing script tag, we need to close the conditional comment.To do that, I'm
gonna do another < ![ then I'm gonna type in end if ]-->.

What that does is, the rest of your user agents are just gonna see this and this. They're gonna view it as an HTML
comment and they'll just ignore it. Internet Explorer, on the other hand, is gonna see these and it's gonna say, "Oh,
okay. "If my version number is less than Internet Explorer 9, "I need to go ahead and run this code." That's all we really
need to do to enable support for earlier versions of IE. The conditional comment here saves us from worrying about
unnecessarily blocking loading for other user agents, so that's good. I recommend saving this as a code snippet and then
reusing it, or simply adding it to your default HTML5 document build.

Organizing content

- I've been extremely pleased with the recent emphasis on content strategy in the field of web design. You know for
many years, designers, and I'm one of them, we kind of ignored content.We chose to focus on visual design and user
experience, with content as merely that thingthat you replaced your placeholder blocks with. Now that approach
ignored the fundamental role that content plays in determining document structure. Without properly organizing the
content on a page, you really won't be able to structure it in a meaningful way.

So what I wanna do is get an overview of the content that's gonna be on our Trail Review page, and then organize it so
that it can help us plan our document structure. So if you were wondering what the heck is this list that we're looking
at, this is the list of the page contentthat's gonna be on our Trails page. So when you're creating a new page or a
site, one of the things that I would recommend doing, is just kinda doing this. This is a really basic, really general content
census. Meaning I'm saying to myself, "Okay, on this trail review page "what is the content that's gonna be on here?" I
didn't write it down in any order whatsoever, I just started thinking off the top of my head, "What am I gonna put on this
page?" Obviously I'm gonna have Navigation, I'm gonna do Branding for the company, there's gonna be an ad, I'll have
Copyright Disclaimers and Contact Info for people, and then I'm gonna have Trail Reviews, specifically there's gonna be
one called the Northridge Loop Review, that's not really a blog posting but it's kind of a blog posting, because I'm gonna
let people comment on it.

There's a little sidebar that's gonna have Ojai Trail facts, meaning that it's secondary content.And then we'll also use this
page to display Rider generated Reviews. That means submissions from other people. We'll have two of those, the Los
Roblos Trail, and the Copper Canyon Loop. So once I do this sort of information dump, you know like let's just put
everything on the page, let's not worry about its structure or organization, I then have to go through and think about
this content. And I like to break it down, and this is of course, just my process, I like to break it down into two types of
content.

Primary, and secondary. To just kinda see where everything fits. Again, it's just a general organization of the
content. And this requires me, of course, to put a little bit more thought into the structure of the content. So for the
primary content, I would consider that to be obviously page navigation is pretty primary, the company branding, they're
gonna care about that. And then of course the main focus of this page is the trail review for the Northridge Loop. So that
all sort of fits into that primary content. All the other stuff on the page, Ad Content, Copyright Disclaimer, Contact
Info, Ojai Trail Facts, all those Rider Reviews, those are secondary.

And this really helps me sort of laser focus in on what the main content of the page is, and that's gonna help me
structure it. Because now I can start to think about a hierarchy. I can start to think about creating a document
outline with this information, that accurately reflects its importance. And that lets me create what I call the initial
document outline. Now you might refine this throughout the process, the final page structure might be a little different
than this, and that's fine. But what this is is it's basically you saying, "Out of all the content that I've got on the
page, "what's the best structure for it "in order to accurately relate " the importance of the content." So very first thing,
Branding.

Company info. Then Navigation, and then that trail review that's sort of the main content of the page. Northridge Loop
Review and then the Comments. After that, I start sort of ranking the importance of the other content. Rider Reviews,
you know people are gonna wanna read those, so those come next, Ad Content, we can't forget the people that make us
money, and then finally at the very bottom our Copyright Disclaimer and Contact Info, I mean that's sort of secondary
stuff anyway. Now the purpose of the document outline that you see here, is not really just sit and list every single piece
of content that's gonna be on my page.
Rather it allows me to start thinking about the semantic structural elements that I'm gonna use on the page, And then
what type of outline that's gonna generate. So I'm really only interested at this point, in sort of the big ticket items on
the page. Using a process like this makes creating wireframes and thumbnail sketches and designs a lot easier. At least it
does for me, because I begin to really explore the relationship between page content. I can also use this to start
identifying which structural and semantic elements I might use for the various sections of the page.

And that's something that we're gonna tackle next.

Creating document sections

- Once I know what type of document outline I'm trying to generate, it's a lot easier to begin planning the initial
document structure. I found that, by starting with the major sections of content and creating those sections first empty
of any actual content, that usually I'm a lot more successful at keeping my content organized correctly. I wanna build the
initial structureof our trails page by focusing on the main sections of content. As we build it, we're gonna focus on those
new semantic elements in HTML5 and how they're gonna help define the relationship of our content to each other.

I've opened up the trails.htm in the 02_05 folder. As you can see, this document looks a little different than the last time
we saw it. I've got some HTML comments in there that let us knowwhat these main sections of content are, and which
order they're gonna go in. So branding and navigation are gonna be first. Then we're gonna have our main review, with
comments.Below that, we're gonna have our rider reviews and the Ojai Trail facts. Ad below that, and then the
disclaimer and contact info. Just like we had in our document outline.

I wanna start off by talking about the branding and navigation, which are gonna be at the very top of the page. There's a
lot of different semantic elements that we could use for this. But really, header is probably the one that works the
best. Headers contain introductory content. If they're at the very top of the page, they're the introductory content for
the entire page. That sounds perfect for branding and navigation. What I'm gonna do is, highlight that comment and
then I'm gonna surround that with a header element. Now, this is not a brackets course.

But for some of you using brackets, you're probably going, "Wait just a minute. "How did he do that?" Well, I added an
extension to brackets called "surround" that adds a hotkey that allows you to surround highlighted text with whatever
element you choose. It's a great little extensionand I highly recommend going out and getting it if you are a brackets
user. Okay. We've got our header. That is where all of our main branding and page navigation are gonna go inside of
that. Now let's talk about what we wanna do for our main review.

Now, the thing that we have to remember here is that both the main review and the comments go together. They need
to be grouped together as a single entity. I'm gonna highlight both of these comments. To do that, I can choose from any
number of semantic elements. But really, the two that make the most sense in terms of HTML5 are article and
section. These are elements that people get confused about in terms of when they're appropriate to use. Well, in a lot of
cases, they're judgement calls.

Now, I'm gonna use an article here. What I'm gonna do, again, is, I'm gonna surround this in an article. Then, as soon as
I've done that, I wanna discuss why. Articles, essentially, are stand-alone content. The best description I've heard of it
is, like an article of clothing, okay? If it can stand on its own, meaning, the content can be removed from the page and it
is still understandable, it still represents itself, it could be syndicated, you could include it in an RSS feed, for
example, and it would make sense for folks.

Since this is a trail review, and it's gonna have comments and all that stuff, it does meet the criteria for an article. Now, a
section element groups themantic content together. You'll note that sections really don't say anything about content
being able to stand on its own. That's not what they do. Sections are there to group themed content, meaning, you're
grouping a section of content and all that content relates to each other or goes with each other. Well, to me, that's
perfect for a section of comments. The individual comments themselves might warrant an article tag, but as a themantic
grouping, they warrant a section element.

What I'm gonna do is, I'm gonna highlight that comment that says, "comments go here," and I'm gonna surround that in
a section element. Now, if you don't feel like you properly understand the difference between sections and
articles, don't sweat it. We're gonna be talking about those two really throughout the entire title, because that's a big
distinction. The other thing I wanna point out is that really is a judgement call most of the time. There are times when
you can say, "Definitely don't use an article," or, "Definitely don't use a section." But they're rare.

Most of the times, you could make an argument versus one or the other. So I wanna be very, very clear about really
having rules for yourself about when you're gonna use them. Here's the way I do it. You may be different than me, but
this is the way I do it. If the content can stand on its own, if it is something that I would send to an RSS feed for
somebody to read without having any of the rest of the page there, then I use an article tag. If, on the other hand, that
it's a section within an article, or a themantic grouping, meaning all those elements belong together,but they need to
be within their own section in the document outline, that's when I use a section element.

The biggest thing here is that it doesn't really matter how you define when you're gonna useone versus the other, as
long as they're semantically correct. It's just that you need to be consistent. If you use article a certain way, be
consistent with how you use it. If you use section a certain way, be consistent with how you use it, as well. Now, let's go
down a little bit.Rider reviews and Ojai facts. Here, we're gonna have two rider reviews and an Ojai facts article.Those
are gonna be three separate pieces of content that I want to group together themantically.

So which tag should we use? If you guessed section, you're exactly right. You're beginning to pick up on this. All right. I'm
gonna highlight that and I'm gonna surround that with a section tag, as well. There we go. Now, let's talk about our ad
content. The ad content, you could make an argument for putting it in an article. It certainly could probably stand
alone, but it doesn't rise to that level of importance. And I really doubt that you would want to syndicate the ad or
anything like that.

So, you know, you could make the argument that it fits in an article. But there's another semantic element that it makes
more sense to be in. That would be the aside. What I'm gonna do is, I'm gonna place this in an aside element. Let's talk
about why this is the better choice.An aside element basically says that this content relates to its siblings, meaning, the
content on the same level, but that it's not really part of them. It's just related to them in some way or another. The fact
that this is an ad and it doesn't really fit into the category of being a rider review or a comment or belonging to that
content really at all.

It's just saying that, hey, this is related to the page content. It's an ad for the company or an ad on the page. But it's not
really part of that content. That is what an aside does really, really well.So I'm gonna use an aside there instead of an
article. Now, finally, we have the disclaimer and contact info. It's going here, down towards the bottom of the
page. Contact info, copyright or legal data, all that fits perfectly within one particular type of semantic element. That
would be the footer. So what I'm gonna do is, I'm gonna wrap all of that in a footer element.

We are gonna take a little bit more time as the coursed goes on to examine these semantic elements in more detail and
talk about when they're appropriate to use. So this is not the only time we're gonna have this discussion. Okay. We have
a nice, semantic, basic page structure to work with. There still is a little bit more that we can do to enhance our basic
page structure.So we're gonna keep doing that in our next exercise, as we define the page's main content.

Identifying the main content

- HTML5 continues to evolve in small and, sometimes, not so small ways. One of the biggest recent additions was the
inclusion of the Main element. This element identifies the main section of content on the page and it fills one of
the largest gaps that we've had in page semantics. So, to continue working on our Trails file, I've opened up Trails.htm
from the 02_06 directory. It's pretty much the same as we left it. It's just formatted in a little prettier fashion I would
guess.

If you think about it, the main content on the page is pretty easy to identify given the documentoutline that we were
looking at earlier and kind of the way we've been talking about this. The Trails page is going to primarily give a
trail review, in this case the North Ridge review. So that would be the main content. What I'm going to do is highlight the
article that we created earlier that's going to hold our review, and I'm going to wrap this in a Main tag. M A I N.

There we go, and then we kind of format this a little nicer. There we go, and then I'm going to save the file now. Some of
you may be wondering, wait a minute, why didn't you just change the Article element to a Main element? Well that's
not really how it works. We certainly could have, however, this article has semantic value, meaning it is saying, hey this
is stand alone content that represents an article, like an article of clothing. Main on the other hand is a semantic
element that says this, what is inside me, is the main content on the page.

This is extremely useful for assistive devices. A string reader, for example, could say hey, I want to jump right down to
the main content in the page and start reading. That's something that this element is going to allow them to do. So by
identifying the Main content, we have significantly enhanced the semantics of our page structure. We've also helped our
page be a little bit more future-friendly because, as devices begin to take advantage of, and implement functionality
based around this new Main element, we've already got it in place.

Using headings properly

- Without a doubt, the single most important aspect of creating a solid document outlineinvolves having a clear
strategy for using headings. Although the new HTML5 semantic and sectioning elements help us add clarity to our
documents, headings do the actual heavy liftingof conveying document structure to search engines and other
devices. So we need to refine our document structure by adding some meaningful headings and then discuss the
principlesbehind having a solid heading strategy.

To do that, I'm gonna work on the trails file from the 02_07, and just like normal, we've got a little bit of content that's
been added to this. Everything that you're seeing as I scroll through the page will eventually be a heading. These are all
of our page's headings. One of the things that you need to remember about using headings in HTML is that each time
you use a heading, a new implicit section is created. While HTML5 says, "Hey, create a new section"every time you use
'article,'" nobody actually implemented the HTML5 outlining algorithm yet.
So while this tag is nice and semantic, and it does a nice job of grouping content for us, it doesn't actually create a new
section. To do that, we're gonna need our headings. All right.The first thing we're gonna do is, go to the very top of the
page. Our first heading is gonna be Cycle Tracks, which is the name of the website that we're gonna be working on. That,
of course, is going to be the page's main header. As the main header, I'm gonna wrap that in an h1 element. Now, since
the advent of HTML5, there's been a lot of debate about the use of h1.

Prior, in HTML4 and XHTML and all that, authors were told, "Hey, you really only should have"one h1 on a page." Search
engine optimization gurus said this, as well. It became kind of dogma for a lot of authors. And then the HTML5
specification came along and said, "Hey, look."Any new section you create, "if you want a new h1 in it, "go ahead and
use one. "Doesn't really matter." Okay. What's my opinion on that? Well, to be honest with you, I still only use one h1
per page, but not because some SEO guru told me to.

I only use one h1 per page because to me, it is the main header of the document. If you're looking at a document
outline, you have to have some point at the top of it that is the piece of content that owns everybody else below it. So to
me, the only way to get that is to use a single h1 at the top of your doc. And that's what I do for almost every singe
webpage that I create.You might come up with a different heading strategy that works just fine. But in terms of
generating a document outline, and a proper document outline, I only use one h1 per page,and I usually put it at the
very, very top.

Okay. Let's go back down into our main content. Trail Reviews is the next heading that I'm going to encounter. I don't
think about headings, and you shouldn't either, as big, bold text. If you think about it that way, you need to get that
thought out of your head. Headings are all about indicating levels of sections in your document. If I think about this from
a document outline strategy, Trail Reviews is a subsection of Cycle Tracks. As a subsection, instead of an h1, and it's the
very next section, it's going to be an h2.

So I'm gonna highlight that and then I'm gonna wrap that in an h2 element. All right. We've got our main heading, Cycle
Tracks. Underneath that, we have a subheading of Trail Reviews.Now, if I think about that, again, this is saying, "Hey,
okay. "Here are the trail reviews on the page." And there's only one trail review. That is Northridge Loop. Well, only one
main trail review, if you will. But if you think about it, again, from a document outline standpoint,Northridge Loop
belongs to Trail Reviews.

In terms of belonging to it, if I gave it an h2, in terms of structure, it would be seen as having the same importance in the
document outline as Trail Reviews. It's not as important. It belongs to it. So Northridge Loop, even though it's the first
heading in my main article, it gets an h3.Again, because the heading strategy that I'm putting forward is making sure that
I'm generatinga right document outline. Now, that also means that Skill level, Surface, Notable features and Final
thoughts, those are all sections inside that main article.

As such, the need to have headings, but the headings need to belong to the Northridge Loop.So, you guessed it, instead
of using an h3, here I'm gonna use an h4. I'm gonna do that for each one of these. Even if you didn't know
anything about the content on the page, just through the use of these headings, you're beginning to understand the
importance of the content and who belongs to who, structurally. That is one of the great things that headings do for
us. Okay. Well, now I need to concentrate on Comments.

When I think about Comments, I need to think about where they belong in this structure. For Northridge Loop, that's the
main heading of the article, and then we have all of these, Sill level, Surface, well, that's actual content of the
article. Comments are not content of the article.They're separate. Actually, if you think about it, they belong to Trail
Reviews, as well. So instead of doing an h4, I'm gonna go ahead and give them an h3. Now, yes, that gives them the
same level of importance as Northridge Loop. But because they come later, in a document outline, it would go like: Trail
Reviews, Northridge Loop, Comments.

Then these, all these h4s, would be nested inside of Northridge Loop. That's exactly what I want. Now, as I scroll
down, I'm faced with some decisions to make for my Rider Reviews, Los Robles Trail, and these guys. What do I do for
those? Now, in a lot of ways, you would say to yourself, "Well, this is the main content. "So these guys need to be
lower "in terms of their heading value "than these," right? Well, yes and no. One of the things that indicates the
importance of content is where it appears in the document outline.

In terms of my main article, it appears very early, just after Cycle Tracks. That indicates a level of importance. When I
look at this from just a sectional aspect, Cycle Tracks being the heading on the page, after that comes Trail Reviews, and
after that comes Rider Reviews. So, instead of using a lower number, I'm actually gonna use the same heading level as
Trail Reviews for Rider Reviews, and that's gonna be an h2. In terms of the strategy that I'm employing here, I'm trying
to create a document outline that indicates importance by where it is in the outline, and which level it belongs to.

So Rider Reviews, being an h2, and Trail Reviews, being an h2, it says that these two elements are siblings, meaning they
have the same level of importance. But Trail Reviews is more important because it appears first. Now, because Los
Robles Trail, Ojai Trail Facts and Copper Canyon Loop all belong to Rider Reviews, they occupy all the same level of
importance. Each one of those is gonna get an h3. I'm just gonna go ahead and, for each one of these guys, I'm gonna
surround it with an h3 tag.
Now, this is one of the benefits of going ahead and organizing your content and generating a basic document
outline before you ever begin structuring your page, because now, I have an idea as to what all of these headings need
to be simply because of the outline that I wanna generate. Now, finally, we have Need a rental? It's really tempting to
make that an h2, because you would have Trail Reviews, Rider Reviews, and then the ad. But the ad really isn't that
important. I actually want it to be grouped with the content of Rider Reviews, as secondary content.

Here, I'm gonna make a judgment call and use an h3 for that. You could have made a compelling argument to have it be
an h2, as well. Nothing in the footer gets a heading,because it is not its own independent section. Those are all of my
headings. I'm just gonna go ahead and save that. Now, it's really doubtful that you're ever gonna work like this when you
author a page. I don't think most people out there would isolate the headings like this before adding the rest of your
content. However, I did this because I really wanted to illustrate the impact that headings have on document
structure without any additional distractions of content around.

Having a strategy for how headings are gonna be used on your page is a critical part of structuring content correctly. It's
something that you need to really consider before you begin actually authoring the content.

Building navigation

- For the most part, structuring page navigation is pretty straightforward, although there are some specific things that
we can do to make our navigation more semantic. I wanna start building our navigation by opening up trails.htm from
the 02_08 directory. Now, a lot of peoplewill place their navigation outside of the main page's header, and a lot of
people will do it inside it. To be honest with you, it is personal preference. I have done it either way. Usually, the
determining factor for me is how I'm styling it, to be honest, how I'm visually presenting it.

But semantically, it works well either way. Typically, you wanna have it higher up on the page content, however, so that
assistive devices, like screen readers and things like that, encounter it really early on. Okay. After the main heading,
Cycle Tracks. Hit return to go down to a new line. I'm gonna use the brand spanking new nav element from HTML5,
which is perfect. The nav element represents a section of navigation on the page. Typically, you wanna use it for main
areas of navigation.

It's not just a collection of links. A lot of people like to assume that nav means any collection of links. That's not it at all. It
is a collection of linkks that have something to do with the page or site navigation. You need to be careful about how
you use that element semantically. I typically try to keep it to one on a page, but there have been times when I've used
multiple navs. I make sure to identify the main page navigation through some other semantic means, and I also make
sure that the links inside any nav element has at least something to do with page or site navigation.

Now, again, I'm gonna cheat a little bit. I'm gonna scroll down to the bottom of the page. You're gonna find an HTML
comment with some links inside of it. I figure, again, that typing all of those links out probably wouldn't be very
exciting. So I'm gonna copy those and then go up. Inside the nav element, I'm going to paste all of those links. There we
go. All right. I'm just gonna nicely format those. Now. Let's talk about the structure of navigation for a moment. Now, it's
become pretty standard operating procedure to organize menus in unordered lists.

But sometimes a lot of people do that without really knowing why. What I'm gonna do is, I wanna highlight all of my
links here and then I'm gonna wrap those all in an unordered list.Then ... Just gonna try to pretty this up a little bit. Then
I'm going to wrap each link in a list item,so individually wrap each of those in a list item. Now, as I do this, I wanna talk a
little bit about why we do this, because I know a lot of people just kinda do this out of habit and they don't really know
why.

Well, menus are semantic groupings of links, meaning, they're a grouping of link elements that actually go together and
relate to each other. In this case, it's the navigation of our entire page.Because of that, we need some method of
grouping these together in a way that says, "Hey, these all relate to each other." There really isn't anything better out
there, in terms of grouping together a list of elements than a list itself.

So we typically use an unordered list to do that, unless the links are actually in a specific order for some reason. All right.
There are a few more things that we can do to our navigation to make it a little bit more meaningful and improve its
functionality, as well. We're gonna explore those a little later on in the course when we look at extending HTML
semantics. This basic structure is a great place to start, however. It really should form the foundation of any site's
navigation.

Properly nesting structure

- Once you've organized your content and created a basic document outline creating the initial structure is actually fairly
straight forward. However, as you add content, deciding how to properly structure those nested regions can become a
little tricky. In many cases you're gonna be making judgement calls in terms of using one structural element over
another one.So I'm gonna examine that process in a little bit more detail as we add some additional structure to our
trails page which I've opened from the 02_09 directory.
Okay, so if I scroll down into the main article I can see that a little bit more content has been added to this. So let's go
over the structure of our article and talk about the elements inside of it that still need a little additional structure. So
inside the main element we have an h2, Trail Reviews. Which is sort of the main heading of this section, if you will. Inside
that is the actual article itself. The article that is the review for the Northridge Loop. Identified there by an h3.

Now below that we have four h4's. Skill level, Surface, Notable features and Final thoughts.Each one of those is creating
an implicit section inside the article itself. So there will be paragraphs underneath them and essentially each h4 is
creating sort of a new section in the article which would show up in a document outline and so we don't really need to
group those individually. We don't need to groups those areas. The h4 is all we need. It's doing all the work that we need
it to do.

However, below Final thoughts you can see that we have a new section called Comments.And, let me just kind of make
this look a little nicer, there we go. You can see that Comments is in h3. Now what that means, is that in terms of
a document outline it shares the same tier as Northridge Loop. So if you were to look at this in an outline view you
would see Northridge Loop, then those 4 headings would be sorta indented inside of that and then Comments kinda
comes back out again to that sort of main level. So Northridge Loop and Comments occupy the same tier.

Below that we have some introductory text that basically explains the process of leaving a Comment and then we have a
Comment itself. That Comment is made up of two elements right now. We have a heading 4 which identifies who wrote
it and when they wrote it. And then the Comment itself, which in this case, is a single paragraph but I'm sure,
y'know, most Comments could contain multiple paragraphs. So have to sort of allow for that as well. So really, that
Comment area really needs some additional structure. We can't leave it up to just the headings to do that.

And the reason for that is that we really need to group this content together and show how this content relates to each
other. If we just leave the headings in place that really isn't enough. So what I first wanna think about is the sectional or
structural tag to use for the entire Comment region. Y'know, what do I do there? There are two elements that come to
mind first. And that would be an article or a section tag. Now articles, remember, those are independent. Like an article
of clothing.

It can stand alone on its own. Something that you could syndicate or that if, somebody were reading it all by itself, it
would kind of make sense. And in this case, that doesn't really fit that bill. Because Comments really relies on the
article content above it for context. If it were pulled out all by itself as a section of Comments people would know they
were commenting on something but they wouldn't really know what they were commenting on. So, what I'm gonna do
is highlight, starting with the h3, all the way down to the closing paragraph of the Comment that we have there.

Making sure, by the way that I don't get the closing article tag. And I'm gonna wrap this in a section tag. Alright, I'm
gonna make this look a little nicer. There we go. And so now, what we have is we have a new section of content and it's
grouping together the heading for Comments, the introductory text and then all of the individual Comments
themselves. And that's where we need to turn our attention to next is how are we going to group together the actual
Comments? The individual Comments? As I mentioned before this is just a single Comment right here but eventually we
would imagine that this page probably would have multiple Comments on it and this Comment only has a
single paragraph but other Comments might have multiple paragraphs or other formatting inside of it.

So there really needs to be a way of sort of identifying that content in a group setting. Now, again, we go back to the
structural and semantic tags that we were talking about earlier. Which one makes the most sense here? Well, each
Comment is an individual article within this section. And if you think about it that way, that it's an individual thing within
this section of Comments that can be pulled out and probably stand on its own. In that case, it sorta meets the criteria
for an article tag so what I'm gonna do here is I'm gonna surround this with an article.

Now, I'm sure there are some of you out there that probably disagree with me on that. If you do a quick survey of blogs
out there for people that have formatted their blogs with html 5 elements most of them use article for individual
Comments. But there are a lot of them out there that use sections or even div's still. So really it is a judgement call but
you want to make sure that you are semantically consistent with how it's used. So now we have this nested structure
here. Inside of our article we have a section that's encasing all of our Comments.

We have the Comment header which identifies the section. We have some introductory content here and then below
that we have the individual Comments themselves which will all be nested inside of these articles. So understanding the
semantic differences between the article aside and section elements, will really help you create properly nested
structures. Now I know we didn't talk about the aside element in this exercise but we will talk about it later in the
course. Now keep in mind, often the element that you choose to group content with is ultimately a judgement call from
you as an author.

Having a strategy in place for using those tags early in the planning process is really importantto creating consistent site-
wide mark up.

Structuring headers
- In most HTML5 documents that I've seen, authors are putting the branding content, and occasionally the site's
navigation, inside of a header element. That's great. I mean, that's what we're doing here on our trails.htm page. In fact,
it's exactly what the element was designed for.However, you're not limited to using only one header per page. Often, it's
semantically desirable to use a header within other distinct page regions. I wanna explore the proper use of headers and
the right way to structure their content.

Before we actually begin structuring our own headers, I wanna go out to the W3C HTML5 specification and take a look at
the definition of the header element. Below all of the categoriesand content models and all that stuff, you can see that
we have a little line down here that tells us a little bit more about it. "The header element represents introductory
content "for its nearest ancestor," so whoever it's inside of, "sectioning content or sectioning root," so articles, asides,
block quotes, anything like that can have a header inside of it.

"A header typically contains a group "of introductory or navigational aids." To me, that's really the important part. Is it
introductory content? Or is it navigation? That sort of thing. Those are the two things that really fit within a
header. Okay. With that definition in mind, I wanna jump back into my trails.htm page, open from the 02_10 folder. We
have our initial header. We created that earlier, when we did our initial page structure. You can see right now, it is
encompassing h1, Cycle Tracks, it has a tag line below that, "your complete biking trail source"that hasn't been
structured yet, and then the page's navigation. Okay.

Let's turn our attention to the tag line, "your complete biking trail source." Now. Back when the HTML5 specification first
came out, we had a tag called “hgroup." What hgroup would allow you to do is, group headings together, because most
people would put this tag line, or at least, for a while, would put this tag line in an h2. Cycle Tracks would get the h1, tag
line would get the h2. The problem with that, of course, is that it creates a new implicit section in your document.

Most people didn't really want the tag line showing up in a document outline. It didn't really make a whole lot of
sense. But they also felt like, you know, it needed some additional meaning to it. So the hgroup tag allowed us to put
multiple headings in an hgroup and it would ignore all of them except for the first one, in terms of the document
outline. Well, that really didn't get adopted very well by anybody, so they pulled it out of the specification and we're left
to structure these tag lines and things like that, and slogans and stuff, in a way that makes the most sense to us
semantically.

Now, I really don't want "your complete biking trail source" to show up in my document outline.I don't need a new
section of content because it really doesn't rise to that level. Because of that, I'm not gonna structure this in a
heading. In fact, I'm gonna go ahead and surround thatwith a paragraph tag. That really makes the most sense. I can
certainly use class attributes or something like that on a paragraph to add a little more semantics to it. But for most of
what we need, that is all that we need to do there. Okay. I'm gonna scroll down into our main article, or our main
section of content, I should say.

Again, you can see that, each time out, we're adding a little bit more content. That's really to make sure that we're
focusing on what we need to look at without being distracted by a lot of extraneous content around it. Okay. Inside the
main element, we have an h2 for Trail Reviews.Then we have a link for All Trails and Ojai. This is breadcrumb
navigation. Then we have a paragraph that says "Ojai Trails," so just sort of indicating that, hey, this is Ojai Trails. Well,
all of this is introductory content that should be grouped together because the article follows after it.

This is all the introductory content for the main content area. With that in mind, I'm gonna highlight all of that and then
wrap that in another header. Just gonna take a moment to format that up a little nicer. There we go. And then save
that. Now, if I look inside the article itself, we have the title of the article, Northridge Loop, and then we have a posted
date, "posted on January 17th, 2014." Again, this to me looks like introductory content.

We have more than one piece of it. We have the title, the h3, and we have a paragraph. Below that, the individual
sections of the article commence. So it makes sense to go ahead and highlight this and wrap that in a header, as
well. Okay. Now, inside my article, I have a header,which is identifying the title, Northridge Loop, and then also a
grouping with it as introductory content, the initial posting date. If I scroll down into the comments section, I can see
that, inside the comments section, I have a heading three and then I have this paragraph right herethat, again, is just
giving me some instructions on what you need to do to leave a comment.

Right there is introductory content to the comments section. Again, makes sense to go ahead and wrap this in a header,
as well. Now, I know it looks like we're going through and creating a header on every single section. That's not gonna be
necessary, however, but we do wanna be consistent with how we're structuring these headers. For example, if I go
down to the individual comment here, this article element that contains that. Inside this article, I had the h4, which is
heading, and then, just below that, is the paragraph which is the actual body of the comment.

Really, the only introductory content we have is the heading itself. That really doesn't warranthaving to group it inside of
a header. It's just a single element. All right. If I continue to scroll down, I can see that I have a section here for Rider
Reviews. Again, here, the title of this particular section is Rider Reviews. That doesn't really need a header surrounding
it. But if I go to the article just below that, Los Robles Trail, unless we have an author by-line, "by Danny Keys," and then
a publish date, "submitted on," to really look at this as one of the clearest instances as to why the header is such a great
semantic element.
Think about this for a moment. Where does the content of the article actually begin? Is it "by Danny Keys"? Is it
"submitted on 06/26/14"? Absolutely not. The first bit of real content, in terms of the article text, is right there. That
means that everything above this is just introductory content. The best way to show that semantically is, of course,
wrapping that in a header.

Now, below that, we have an aside that has the Ojai Trail Facts. Again, there's just the headingand then below that, the
actual body copy. That really doesn't need a header. But if we go below that, we have another article that has pretty
much the same structure as the article above it. I'm gonna do the same thing here. I'll wrap all of that introductory
content inside of a header element. Then again, I'll just try to make that look a little nicer. Then I'm gonna save that. I
know it seems like we have a lot of headers here.

But really, we're simply following the header strategy for our content based off of the definitionfor when using them is
appropriate. Like most semantic HTML tags, their use is optional. You don't have to do this. However, as you can see
here, using them consistently allows you to create more meaningful markup.

Structuring footers

- People love to equate headers and footers with each other. It makes sense, as most document editors allow you to
insert headers and footers using the same mechanisms.However in HTML5, footers are significantly different than
headers in terms of the semantic role they play. Let's take a look. I am in the W3C HTML5 specification and I have
jumped directly to the footer element. Down below these properties I wanna read the definition for it there. It says,
"The footer element represents a footer for its "nearest ancestor sectioning content or sectioning element." Meaning,
it's the footer for the element it's inside of.

A footer typically contains information about its section, such as who wrote it, links to related documents, copyright
data and the like. It's being pretty specific there. It contains information about its section and that information is stuff
like who wrote it, disclaimers, copyright data, things like that. They can be longer; You'll notice below that it talks about
if the footer contains entire sections, those are typically appendices, index, long colophons, license agreement and stuff
like that.

All of that can go in footers as well. With that in mind I'm gonna open up the Trails.htm file from the 02_11 directory and
the first thing I wanna do is I wanna scroll down to the bottom of the page and take a look at the footer that we already
created earlier when we were creating the initial structure of our document. This is the main page's footer. This is the
footer for the entire page. We know this because it's directly inside the body element, in terms of its structure, and that
means that it references or refers to the entire page.

The content inside of it? Well, we have contact information: Telephone numbers, e-mail addresses. We have a copyright
statement and then we have further contact info, being the address of it, and some phone numbers. If you take a look at
the type of content we placed inside the footer here it certainly meets the criteria of what type of content is allowed
inside the footer. Just as you can have multiple headers on a page, you can have multiple footers as well. In fact, any
section that you have can have a footer if it needs it.

If I scroll up and I go into our main article I notice that we have some additional content. We have the header that we
created in the last exercise and below that we have the four sectionsthat we've been looking at for a while now: Skill
level, Surface, Notable features, Final thoughts.Below that we have About the author, and this is the gentleman who
wrote this particular article, that would be Daniel Weston. We can see from this paragraph he lives in Oxnard, California,
he's got a wife and a young daughter, and apparently various house plants.

We have some contact information for the author as well. All of that sounds like it's related to the section that it's inside
of, meaning the main article, and it contains contact info and information about the person that wrote it. That is a
picture-perfect representation of the semantics of the footer element. What I'm gonna do is highlight those two
paragraphs and then wrap them in a footer element. When I do that, some of you are going to be noticing the location
of that footer element.

You'll note that it is not the last element inside this article. In fact, below that we have an entire other section, in this
case, the comments. Footers do not have to be the last element in a section. They normally are, but there's nothing in its
definition that restricts it to being at the bottom. Any time you have a section of content that talks about who the author
is or who authored the content, or contact information and things like that, all of that can fit semantically inside of the
footer and it doesn't have to be at the bottom.

I'm gonna go ahead and save that and that is the only other footer that we're gonna have on the page, at the moment at
least. They are really powerful semantic elements but you don't wanna overuse them. Pay careful attention to the type
of content that they are intended to represent and then use them when and where they are appropriate.

Checking document structure

We've talked a lot up to this point about proper document structure and generating a good document outline. But other
than keeping track of the elements yourself, how are you supposed make sure that your outline is what you need or
what you intended? In this movie, I want to give you some resources that can help you check your outlines as you
work. To do that, I'm going to use the trails.htm found in the 02_12 directory. But at first, I wanna show you a couple of
extensions.

The first one is a really cool extension for Google's Chrome, and that is the HTML5 Outliner.This is actually available as a
JavaScript library called H50. You can actually go download thatfrom Google Code and sort of create your own. But they
baked it into an extension. You can add this to Google Chrome. Once it's added ... Now, let me show you what it does for
you. If you browse to a webpage, let's say it's something like lynda.com, in the address bar, upper right-hand corner, you
get this little green icon.

When I click on that, I get what looks to be a table of contents. But what this is is the document outline. What's really
neat about this is, if you scroll through it, it's actually clickable. I can click and jump to that specific section of the
document. So that's really pretty cool. The bad part of this is, this extension only works with live online pages. It doesn't
work for local previewing. For example, if I were to preview my page locally, without a local server, just by opening it up
in the browser, you'll notice that that icon doesn't show up.

So you either have to preview it on a local server or you have to upload the file online in order to get that particular
extension to work. Now, there's also an online tool that you can use. This is called the HTML5 Outliner. It's found at
gsnedders.html5.org/outliner. This allows you to enter in the URL of any website and generate an outline. Or, if you
want, you can copy and paste your own HTML. So if I go back to my page and I select everything and copy it, I can come
back to this site and just paste it all in there.

As soon as I do that, I can click the Outline this! button and then it generates a document outline for me. Now, this is
awesome and it's an easy and quick way to check it. The bad thing about this, though, is that it only checks using the
HTML5 outlining algorithm. Remember, that hasn't been implemented by any browsers or accessibility devices at the
time of this recording. So while you see a pretty decent document outline and you can get a pretty good idea, you're not
seeing the outline that's actually being generated by search engines like Google or other assisted devices.

Now, to do that, there's a great add-on for Firefox called HeadingsMap. What's really neat about this one is that it shows
you outlines based on the HTML5 outlining alogrithm as well as the old HTML4 outlining model, which is what search
engines and assisted devices are still using. Once you've installed that add-on, you just preview a page locally. I go up to
Tools and choose HeadingsMap, and it gives me this really cool little outline over here on the left-hand side. Now, notice
I can toggle back and forth between the headings on the old HTML4 versionand the new HTML5 outline.

What's really neat about this is, I can sort of see the benefits of the structural arrangement that I get from HTML5 and
see the real-world application that I'm getting from just the headings themselves. This is a nice way of sort of refining
your outline, making sure the two matchexactly where you need them to and understanding the differences between
them if the HTML5 outlining algorithm is ever actually enabled. Being able to check your document outline while you
work is a great way to ensure that your document structure is exactly the way that you intended it to be.

It can also alert you to possible issues with page semantics and accessibility. I highly recommend exploring these
tools and then using them as you develop your sites.

Sectioning roots

- With all this talk about document outlines, and properly structuring content, there's one final thing I need discuss that
can effect your document's final outline. There's a group of elementsthat are known as Sectioning roots. And their
internal structure is considered independent of the regular document outline. To demonstrate that I'm gonna use the
roots.htm file, found in the 02_13 directory. Now, as you can tell by looking at this it's a little bit simpler file than our
trails file. We have a Main heading, which is in a h1.

And then underneath that we have two Subheadings, which are both h2. We have two Nested subheadings, which are in
h3. And then finally we have another Subheading, which is another h2. Now if we preview this in our browser and turn
on the HeadingsMap, you can see an outline exactly the way we expect it to look. We have our Main heading up top,
which is a h1.We have two Subheadings underneath that. Subheading number 2 has inside of it two Nested
subheadings. And then finally we come back to our Subheading 3.

Alright, if I go back into my html and highlight those two Nested subheadings, I'm gonna go ahead and wrap those in a
blockquote element. So blockquote is one of the elements that's considered to be a Sectioning root. The other elements
for that are body, which makes sense if you think about it. Since it is sort of the parent Sectioning root of all the
elements. Blockquote, as we're using here. Fieldset, figure, and td, or table cells, those are all Sectioning roots. What
that means is their internal structure is totally ignored when it comes to generating a document outline.

So if I save this, so I'm gonna go back to my browser, I'm gonna refresh the page, and then let's turn HeadingsMap back
on. And now you can see in our main document outline, that the two Nested subheadings are no longer visible. Now it
doesn't really matter what type of internal structure the blockquote has. If I go back into my code, for example, I could
change the first Nested subheading to a h1 and have the second one be a h2. If I save that, go back into my browser, and
refresh.

Notice that it makes no difference at all in the document outline. This isn't necessarily a good idea, although most
devices are instructed to sort of ignore that internal structure, not all of them do. And Google is certainly going to index
it. So again, having multiple headings 1 on a page isn't necessarily the best idea. So I think what I'm gonna do is
change the first one to a h2, being the main heading inside the blockquote, and maybe my Nested subheading 2
becomes a h3. So if I save that, go back and preview that in the browser again.

You can see it still makes no difference to the main document outline, but I can still get that internal structure inside the
blockquote that I need. Now you probably won't encounter too many instances of Sectioning roots causing problems or
messing up your document outline,but it's really nice to understand how they work so that you're prepared for their
effect on your overall document structure.

Lesson3: Grouping Content with HTML5

Working with figure and figcaption

- In addition to the structural and sectional content that we've been using, HTML5 includes a number of new
elements and redefines some of the older ones that allow us to create richer semantic documents when grouping and
formatting content. In this chapter, we're gonna explore some of those elements and we're gonna start with the
figure and figcaption element.So I have the trails.htm file from the 03_01, found in the chapter 3 folder opened up and
really quickly, I wanna preview this in the browser.

And you can see a couple of things are going on here. Number one, the styles are attachedso it certainly looks a lot
better. And the second thing is there's a lot more content on the page, so we're now starting to work with the actual
content of the page and not just the structure.Now, I wanna focus on these two images right here. Notice they appear
kind of right in the middle of the article and one of them is a trail map and the second one, below that, is the
elevation of the trail itself. Now these two images are perfect for the figure element and to understand why that is, let's
go out to the HTML5 specification and check out what it has to say about the figure and figcaption elements.

So here I am in the HTML5 spec. I have navigated to the figure element. And the first defintion, if you will, really just
talks about what content it is and where it fits, that sort of thing. It's the second one right here that I wanna focus
on. "The element can thus be used to annotate"illustrations, diagrams, photos, code listings, etc." So it's really used to
define content that illustrates the content that it is related to. Now if I scroll down a little bit. It talks a little bit about the
figure caption, or figcaption.

That is a "child of the element" and if it is it "represents the caption "of the figure element's contents." It's optional. You
don't have to have a figcaption inside of a figure, but when there's enough content inside there that you wanna
represent it by using a caption, figcaption is what you use. Alright, now, they show us a couple of code examples of the
figure element in action.The first is marking up a code listing, the second one is marking up a photo that is the main
content of the page, like a gallery, the third example shows an image that's not part of the figure because it doesn't
really meet a criteria, while there's also an image and a video that are illustrative of the content, so they sort of fit the
criteria.

The last example that I'm gonna show here is part of a poem that's marked up using figure. So really what I wanna stress
here is that a lot of people associate images with figure, and indeed we're gonna use images for our figure element, but
it doesn't have to be that. It could be any content at all. Code examples, graphs, charts, video, whatever you have that's
illustrating the content around it in some way, is perfect for the figure element. Alright, so I'm gonna go back into my
code and I'm gonna scroll down until I find those images.

Here they are right around line 63 or so. And I notice that right now I have them enclosed in a paragraph, so I'm gonna
replace that paragraph with a figure tag. We gotta remember to do that for both the opening and the closing tag. Now
I'm gonna go ahead and save that. If you preview the page in the browser, you won't notice any difference at all. Again,
this is structural but it's really a semantic change that we've just made to the page, not necessarily a huge structural
one. The next thing I wanna do is give this a figure caption.

I'll look at it this way, I have two images here. One indicates the trail map and the second one indicates the trail
elevation. There's nothing really on the images themselves that sort of delineate what it is that they're
representing. Plus, I like figcaption because it makes your figures a little bit more accessible because those can be read
by screen readers. So one of the really neat things about figcaption is it can go pretty much anywhere you want it within
the figure. You can either put it at the end of the figure or at the beginning of the figure, and it's totally up to you. What
I'm gonna do is I'm gonna place mine directly inside the figure element.

So what I'm gonna do is open up a new tag and it's gonna be a figcaption. And then inside that figcaption, I'm just gonna
type in Trail Map and Elevation. Alright, I'm gonna save that. Go back out to my browser and you can see right there is
Trail Map and Elevation. Now, compared to the rest of the page, the caption doesn't look all that great. And I don't really
wanna rely on the browser's default styling for a figure caption anyway. So I'm gonna go back into my code and I'm
gonna open up, from the _css directory, the main.css.

I'm gonna scroll down to about line 217 or so and you'll find a comment that says, "figcpation styles go here." Alright, so
I'm gonna place it right there. I'm just gonna go ahead and create a selector, "main figcaption" Now again, this is not a
CSS title and of course right now I am authoring CSS. If you already know how to write CSS, you know exactly what I'm
doing. If you don't know how to write CSS, just follow along with me and you're gonna see how the styles that we write
are going to change the visual formatting of my code.

So by writing this selector, "main figcaption," I'm saying, "Anytime you find a figcaption element"inside of a main
element, style it like this." What I'm gonna do is I'm gonna do a text-transformAnd I'm gonna transform everything to
uppercase. I'm also going to assign it a color and the color is going to be a hexadecimal value, so that's #4d4d4d. And
then, finally, I'm gonna up its font-size a little bit because I thought it was a little small.

So we're gonna go with font-size 1.2em. Alright, I'll save that. Go back to my trails page. And preview that in my
browser. That looks a little better. So we have the figure caption, Trail Map and Elevation, two illustrations below
that and what's really nice is the figure element allows me to group all of that semantically inside an element that
says, "Hey, I am illustrating the content"that I'm related to, in this case, the article." So this example was fairly
simple, but figures and figcaptions can get pretty complex.

Although, you'll primarily use them for things like images and charts, you do need to keep in mind that figure can be
used for a lot of different types of content. Anything that can be considered illustrative, so code samples, videos,
graphs, canvas elements, really, any data that illustrates the related content can be contained within a figure
element. Remember that the goal of the figure element is to define the relationship of the illustrative content to the rest
of the content and then to group all of that in a meaningful way.

Grouping content with asides

- Although we've talked about using asides to help structure pages and section content, I wanna talk in more detail as to
when it's appropriate to use them to group content within larger sections. Remember, asides will generate a new
section of content regardless of where you use it, but it also gives you a wonderful ability to identify content that is
related to the other content around it. Now the trick is understanding how an aside element works when it's used
inside of another sectioning element.

It'll probably, or hopefully, make a little bit more sense once we take a look at our example.And our example is gonna be
the trails.htm file found in the 03_02 directory. Before we get into writing some code however, I do wanna jump out to
the specification really quickly, just to read a little bit about the aside element. So the definition down here says, "The
aside "element represents a section of a page "that consists of content that is tangentially "related to the content
around the aside element "and which could be considered separate from it.

"Such sections are often represented as sidebars "in printed typography." And the use of the word "sidebar" there is
kind of a loaded word, because one of the things I've seen a lot of authors do is use these aside element simply as the
sidebar element. So they say to themselves, "Well, if I have a sidebar "I'm just gonna make it an aside element." I've
seen a lot of people do that. Now the reason that that often works is that sidebars typically are tangentially related to
the page or the content that they're found in, and so they are a pretty good match for the aside, however, that's not
always the case.

And I want you to be really aware of what the aside element's semantics are so that you knowexactly what it's
representing. Let's go back inside of our code, and what I wanna do is I wanna scroll down to the section of Rider
Reviews which is found right around line 92 or so. So here we have a section of content, of Rider Reviews, and inside of
that we have three articles currently. The first article is a review submitted by Danny for the Los Robles Trail.

The second article is for Ojai Trail Facts, just some information about all the different trails in Ojai. And the third article is
another user-submitted review by Shea Hansen for the Copper Canyon Loop. OK, well, it's kinda like of these things is
not quite like the others. The Ojai Trail Facts isn't a user-submitted review. So out of the three articles, two of them are
user-submitted reviews. The third one, this Ojai Trail Facts, is kinda sandwiched in the middle of them, is just some
related trail facts about Ojai.

The interesting thing here is that both of those writer submitted reviews are Ojai trails. So this information is indeed
related to those two rider reviews, but only tangentially, because it is not also a rider review. So in fact, a better
semantic fit here, instead of article, would be the aside element. So I'm gonna change it from article to aside. So now,
semantically, we're saying that these trail facts do relate to the two reviews around them, but only tangentially.

Now if I save this. And preview this in my browser. As I kinda scroll down, other than the heading looking a little
odd, there's really nothing to visually set it apart from the other two. One of the things that you wanna do is you want
your visual representation to match your semantic representation. So we're authoring the content to convey the
thought that Ojai Trail Facts is related to the two rider reviews, but not the same thing. We need to indicate that visually
as well.
And we're gonna do that through modifying our CSS. So I'm gonna go back into my main.css file, which I can find in the
03_02 /_css directory. And if I scroll all the way down to 385, and you can see that I've already prepared here. I'm right
down here and there is a little commentthat says "aside header goes here," so I'm gonna replace that with a brand new
selector. Now this kind of a complicated selector, so bear with me here, I'm gonna type in section and then without any
spaces, #riderReviews space, aside space, H3 So that's a little bit more of a complex selector than I normally like to
use, but for the way that I've structured the styles in this document, that's kinda how it's gotta go.

So this is saying that, "Hey, anytime you find "a section with an ID of riderReviews, "inside of that, when you find an
aside, "and inside of that, when you find an h3, "apply this styling." So what we're gonna do is we're gonna change our
font-size to about 1.6em. So make it a little bit larger, 1.6em. We're gonna set font-weight to normal, so that it's no
longer bold. We're gonna set the color to #000, which is black.

And then I'm gonna set the background for this to a different color and that's gonna be #c3cebc, that's sort of a light
green. And that's the thing that's gonna set it apart the most visually is that background to the heading itself. Alright, I'm
gonna give it a little bit of padding.5em all the way around. And then I'm gonna set some margins on it as well. My
margin's gonna be 0 for the top and then a space, -20px for left and right, another space and .5em for the bottom.

OK. So I'm gonna save this. Go back into my browser. And you can see that now, Ojai Trail Facts visually is representing
the fact that it is related to the two articles that surround it, but also distinct from them as well. So it sorta gives that
sort of tangential relationship in a visual way too. Now I know we've gone over the aside before, but it's important to
remember that the semantics of the aside element depend on where it is found. If it's nested inside of a parent
element, it's viewed as being related to that element's content If it has no parent, it relates to the entire document.

And that, of course, is what's happening, if I scroll down, with this ad content which is also an aside but isn't contained
within that section. So by placing this Ojai Trail Facts in an aside inside the Rider Reviews section, we're saying that this
content relates to the other reviews, not the entire page. Being able to scope content in this manner allows us to
establish very specific relationships between the content and our files and that's extremely helpful when you're tryingto
create more semantic markup.

Using divs in HTML5

- You may have noticed that up until now we haven't used a single div on our page. Now this is in stark contrast to
HTML4 and XTHML documents where divs are the primary way to groupand organize content. That's not the case
anymore, as the variety and richness of the sectioning and grouping elements in HTML5, means that we don't really
have to rely on the div tag to do all the heavy lifting for us. Of course, this doesn't mean that we're just gonna forget
about the div and never use it anymore. There are some very legitimate reasons for using it.

So I wanna take a quick look at what the specification has to say about the div and then come back into our page and see
where it might work for us. So, I'm in the W3C HTML file specification. I have jumped down to the div element. And this
is where it gets kinda sad.Number one, first off, notice that it's content model is flow content and it can pretty much
contain anything you want it to contain. But this is where it gets kinda sad. Read the description here. "The div element
has no special meaning at all, "it represents its children." That's it.

"It can be used with the class, lang, and title "attributes to mark up semantics common to a group "of consecutive
elements." Well, that's nice. But notice the note. "Authors are strongly encouraged to view "the div element as an
element of last resort, "for when no other element is suitable. "Use of more appropriate elements "instead of the div
element "leads to better accessibility for readers "and easier maintainability for authors." So what it's trying to tell you is
that, "Yes, the div is out there and it still works "the same way it's always worked, "but we would really like you to
use "the new elements when they're appropriate.

"It's just gonna create more cemented content." So what does that mean for the div element?And when is it
appropriate? Well let's go back into our trails page, this time open up from the 03_03 folder. Now, everybody has a
difference of opinion on this and really, again, like most of the sectioning and structural elements, it is a judgement
call. But this is the sort of litmus test that I use for when to use a div versus when not. Are you grouping content
together that there is no suitable element for? If yes, a div might be right for you.

Typically, it's when you're grouping content together for JavaScript controls, like maybe creating some tabs or an
accordion widget. And the other would be when you need to groupcontent together simply for styling purposes. Let me
show you what I mean by that. If I preview my page right now and I scroll down to the bottom, you've got a bunch of
links kind of all stacked on top of each other. What I'd really like to have here is a two-column layout so that I have the
telephone information and the email and all that stuff on the right-hand side and the address and other stuff on the left-
hand side.

That's kinda the way I would like to see this work out. But if I go into the structure of the footer itself, I'm gonna scroll
down through my code until I get to the footer. I can see that there's really no pre-built structure to allow me to do
that. All of these elements are contained within paragraphs. Now I don't wanna create any type of sections that might
show up in a document outline. I don't need any headings here. It really doesn't make any sense to group themtogether
themantically, so the use of sections really doesn't work because they're all sort of related.
And that's where the div element comes in. The div element allows me to group these into the columns that I want to
group them in and then style them that way without really giving any semantic value at all. So it's just purely grouping
for styling sake. So now, what I'm gonna do is I'm gonna highlight all of the first three paragraphs. And then I'm just
gonna wrap them in a div element. Then, I'm gonna select all of the remaining paragraphs and do exactly the same thing
with them.

Now, in-and-of itself, if I save this, and go back into my browser, that does nothing for me. The browser's not gonna
render that a specific way and they just sort of ignore the div tag and they go, "OK, great, you've grouped it together.
Now what?" Well that's where my classes are gonna come in. So what I'm gonna do, and let me make this look a little bit
better, is for my first div, I'm gonna go ahead and give it a class attribute of "rightCol," for right column, and as you can
probably guess, for the second div, I'm gonna go ahead and give it a class attribute as well.

And this one is going to be "leftCol" and I'll save that. Now, I'll spare you the suspense. I've already written the styles for
these and in my CSS, I have a class selector for right column. I have a class selector for left column. And they're doing
exactly what you think, they're floating all of the right-column stuff to the right. They're floating the left-column stuff to
the left. So if I save this. Go back into the browser. You can see my thrill looks a lot better and a lot more organized now,
even though semantically I'm not actually passing any information. It just visually looks organized.

So DIVs are playing a very important role for us here. They're grouping our content for styling purposes without actually
creating a brand new section in the outline and without adding a tonof unneccessary markup. Now, you might not use
the div tag as much as you have in the past, but it does remain a really important tool for web authors. It's a great way of
grouping content together in a generic way in your documents, which can be extremely helpful for a styling, like we're
using it here, or for creating interactive elements, or if you just simply want to add an extra measure of organization to
your content.

Working with lists in HTML5

- We're gonna take a slight break from our trails page for just a moment to talk about lists. Now if you've been authoring
web pages for any time at all, you're probably familiar with at least two types of lists that are available to you in HTML. I
mean, most web authors have used an unordered list, or an ordered list, probably pretty frequently. They're really
handy, for example,for things like navigation. For the most part lists remain unchanged from HTML 4 to HTML
5.However, the ordered list and the definition list have changed a little bit, so I want to discuss those changes and
maybe experiment a little with what we can do with definition lists in HTML 5.

So here I am in the HTML 5 specification, and I'm gonna jump down to the ordered list element. There's a small change
here. What I want to bring your attention to is right over, the Content attributes. So these are attributes allowed on the
ordered list. We have reversed, start, and type. Now if you looked back at the old HTML 4 specifications, you wouldn't
have seen reversed, and you wouldn't have seen start. Start had been around for a long time, and start gave the ability
for you to say, hey I want you to start with, say, number four instead of starting with number one.

Well, it was pulled out of the HTML 4 specification but no browsers ever dropped support for it.They've always
supported it, so finally the folks when they were making HTML 5 just put it back and in, and say, hey look, everybody still
supports it, nobody's ignoring it so let's just keep it.Now reversed on the other hand is brand new. That's kind of
interesting because what it allows us to do is, of course, reverse the list so that it numbers it backwards, which can
actually be pretty handy from time to time. However, at this point, no browser has added support for it,so that's just
something sort of to keep your eye on rather than something to experiment with at the current time.

Now I want to jump down to the definition list element for just a moment because a little bit of clarity has been
added to this element. Now previously in HTML 4, a definition list was defined as a list containing a term and one or
more definitions for that term. Now this didn't really reflecthow authors were using the definition list as people were
using it for things like bibliographies, indexes, and really all sorts of non-definition list lists, really anything where you
might need to organize multiple name-value pairs.

So let's take a look at what the definition reads. I'm just gonna scroll down a little bit and read the definition here. "The
dl element represents an association list "consisting of zero or more name-value groups "(a description list). "A name-
value group consists of "one or more names ..." which are dt element, "Followed by one or more values (dd
elements), "ignoring any nodes other than dt and dd." Now if I jump down a little bit, notice that it says "Name-value
groups may be "terms and definitions, metadata topics and values, "questions and answers, "or any other groups of
name-value data." So what that really means is is as long as there's a clear relationship between the name-value
pairs, almost anything can be described by a definition list.

Honestly, that's really simply bringing the specification up and sort of recognizing how authorswere using the definition
list in the real world anyway. Okay, I'm gonna jump back into Brackets. So to show you how definition lists can be
used to define name-value pairs, I'm back here in the all-trails.htm file found in the 03_04 folder. If I preview this page in
my browser and kinda scroll down a little bit, I can see that under All Trails, I've got the section or the area of trails, and
then the individual trails inside of it.
Now right now it doesn't really look all that great, but it's not the styling that I'm interested in. I'm more interested in
how this information is being organized. If I go back into my code, I can see that it's being organized by a series of
headings followed by paragraphs. Now that works and it certainly would be okay to leave it this way. Semantically, it's
actually pretty clean. The problem is there's nothing defining a relationship between this section and the sections that
follow it.

In fact, it does affect our document outline. If you remember, every time we use a heading,we're implicitly creating a
new section in our document. So, in this case, would we really wanteach of these little sub-areas to appear on a
document outline? If the answer's no, then the current structure that we have for the page isn't really going to work for
us. So when I look at a structure like this, I think about sort of the name-value pair, meaning the name of the
section,Butte, Contra Costa, El Dorado, and then the values of the individual trails inside of it.

It's really a perfect structure for a definition list. So what I'm gonna do is right after All Trails, I'm gonna create a new
line, and then I'm gonna go ahead and open up a brand new definition list, which is simply dl. Now since I'm wrapping
the whole thing in a definition list, I'm gonna go down to my very last one, and close that definition list. A definition list
consists of two types of elements: definition terms, dts, and definitions, which are dds.

So each of the sections, which are represented by h4s, are gonna be changed to a dt or definition term. I'm gonna make
sure I change both the opening and the closing tag. Then all of the individual links themselves are going to be definitions,
which are dds. Again, I'm gonna make sure I do both the opening and the closing tags. So I think you can see what we're
gonna do here. What I'm gonna do is I'm gonna use the magic of editing to help me complete this.

I'm gonna go ahead and complete all the rest of these. I want you to do that as well. Be sure you type all of them
in. Make sure you're getting both the opening and the closing tag. Just go ahead and pause the video while you're doing
this. I'll go ahead and complete mine, you complete yours, and then we'll pick it back up in just moment, okay? Okay, so
how did you do? If I scroll through, I can see that each section is defined as a definition term and then each link is
defined as a definition, sorta that name-value pair representation that we were talking about. If I go over and preview
that in my browser, I can see that the styling looks a little bit better because the styles were written to accommodate a
definition list and not headings and links, so that looks fantastic.

All right, so in certain instances the structure that the definition list, and really all the other lists in HTML 5 affords
you, allow you to structure your content in a way that better describes how the content relates to each other. That's a
really important part of using lists. In our case, the definition list groups all of the links together, it lets people know
that they're all related to each other, and we still get the advantage of using the name-value pairs that the definition list
gives us. So while the changes that were made in the specification to both the ordered list and the definition list may
seem a little minor, what they really do is they allow authors to continue using them, as they have in the past, with a
clear conscience about being in conformance with the specification.

Emphasizing text correctly

- HTML5 reintroduced the bold and italic tags after those tags had been deprecated in XHTML.The addition of these
tags, side by side with the emphasis and strong tags, have caused some confusion about when it's appropriate to use
one over another. I wanna explore the semantics of those elements and when we should use them. To do that, I'm
gonna work with the trails.htm page from the 03_05 folder. Now, before we jump into using these, I wanna go back to
the specification and take a look at the definition for these tags.

Here I am in the HTML5 spec. I'm gonna start with the italics element. Notice in the definition it says, "The i element
represents a span of text "in an alternate voice or mood, "or otherwise offset from the normal prose "in a manner
indicating a different quality of text, "such as a taxonomic designation, "a technical terms, "an idiomatic phrase from
another language,"transliteration, "a thought, "or a ship name in Western texts." Okay. It gets a little esoteric there in
the end.

The part I want you to pay attention to is the "alternate voice or mood." We're not stressing this text. We're not
emphasizing it. We're just recognizing it, that it is in a slightly different voice or mood from the text that it's grouped
with. Again, notice that it doesn't say anything about italicizing the text, even though it is the i element. Next I wanna
take a look at the emphasis element, or the m element. "The m element represents stress emphasis "of its
contents." Here is text that is being emphasized or stressed in some way.

We have a similar difference between the bold and strong tags. If I look at the definition for the bold element, or the b
tag, it "represents a span of text "to which attention is being drawn "for utilitarian purposes "without conveying any
extra importance "and with no implication of an alternate voice or mood." So italics, alternate voice or mood. The b tag,
"a span of text,""attention is being drawn" to the text, but it's not supposed to convey any extra importance and no
implication of an alternate mood.

That's kind of vague, but they wanna make sure that, you know, hey, this text isn't really being emphasized. Now, the
strong element is a little bit different. "The strong element represents strong importance, "seriousness, or urgency for its
contents." Again, you'll note that none of these definitions talk about how the text is supposed to be displayed
visually. Okay. Going back into my trails.htm page. First thing I'm gonna do is, scroll down to my footer.
Inside the footer, I can see that, at the very bottom, we have an address. Cycle Tracks, 5606 Nota Street, Ventura,
CA, and then we have the phone number. You'll notice that, beside this second phone number, which is a toll-free
number, we have the daily trail conditions. Well, those two items are grouped together. We have the number, and you
have the daily trail conditions. The daily trail conditions certainly could qualify as an alternate voice or mood. It's not the
actual information. It's sort of defining it or describing it.

What I'm gonna do with that is, I'm gonna highlight this, and then I'm gonna wrap this in an i tag, so using that alternate
voice, if you will. If I save this and preview it in my browser, now if I scroll down, I can see that indeed, daily trail
conditions is italicized, which is exactly what I was expecting it to do. But that's all about presentation. It's really nothing
about the semantics of it.The semantics now say that that little aside text, if you will, is in a slightly alternate voice or
mood.

Now, one of the things I'd really like to do is draw attention to the name of the company in the address. Cycle
Tracks, 5605 Nota Street, but I don't necessarily need to emphasize or denote any type of importance. Because of that,
the bold tag is perfect. What I'm gonna do is, highlight the words "Cycle Tracks" and again, I'm gonna wrap this in a bold
element. Save that, preview that in my browser. Now I can see that Cycle Tracks is bold, daily trail conditions is italicized.

Presentationally, it is sort of representing what I was hoping. It's drawing attention to Cycle Tracks, daily trail conditions
is kind of set aside. But we're not denoting any extra importance here, and not stressing it semantically inside the actual
code itself. Of course, that sort of leads you to believe that these are presentational elements, and they're really
not. They're designed to semantically draw attention to, or describe, alternate voice or mood. If all you wanna do
ischange the presentation of the text, you really should use CSS for that.

Let's say, for example, the date that the article is published. I'm gonna scroll up until I find the date that this is
published, on January 17, 2014. Okay, fair enough. That's located inside of a paragraph, and I would like to italicize this
text. You might say, "Well, "you could use the i tag to do that, "or the m tag," and you could. But neither of those
semantically would really be correct.I don't really wanna present this in a alternate voice or mood. It's just the date it's
been published.

I also really don't need to emphasize it or strongly emphasize it. All I need to do is just italicize it. So what I'm gonna do
is, inside the paragraph, I'm gonna assign a class of pubdate to this.Now, this is something that already exists within my
CSS. I did not have to create it. Now, if I save this, and preview that in my browser, I scroll up to the publication
date, now that is italicized. I went ahead and aligned it to the right, as well, just because I like it.

Now, finally, what happens if I really do want to emphasize some text, or set some text aside as strongly urgent? If I go
down into the actual body copy myself, if I look in, say, the first couple of paragraphs, I've got some information
there that's really important. For example, "hiking is permitted along all trails, "so ride with caution "and don't override
your stopping power." That's kind of important. I would wanna draw attention to that. I would wanna make that really
urgent, especially the line about "hiking is permitted along all trails." I know whenever I've gone mountain biking, that's
information you really wanna have, because you don't wanna be going down the trail really fast or riding faster than you
can see somebody, because then you could collide with them.

But if you know that hikers aren't on the trail, it's a lot easier to sort of let loose. So I want people to know that. What
I'm gonna do is, highlight this, and I want to really be urgent with this. So I'm going to use a strong tag. I'm gonna go
ahead and wrap this in a strong tag. That's gonna strongly emphasize this text. It's gonna add a sense of urgency to
it. Now, if we go down a little bit further, I can see that there's a paragraph here that says, "While there are no steep
drops or bombs on this trail, "there are several areas of the trail "that extend over bare rock.

"The paths are marked, "but there are canyon areas "that you should be aware of. "Before starting any downhill
section "make sure you know the path!" That last line, "Before starting any downhill section "make sure you know the
path," probably should be emphasized a little bit.What I'm gonna do, again, is highlight that line and I'm gonna wrap
that in an m tag. Saving that,and then checking that out in the browser. I can see that the browser, by default, bolds any
strong content and italicizes any emphasized content.

However, we know that we've made a semantic change to that text. We've changed the actual meaning of those lines so
that that information is being presented in an emphasized or a more urgent manner. Now, like many of the semantic
elements in HTML, choosing how you're gonna emphasize text is often a judgement call on your part an as author. Make
sure that you understand the implied meaning of each of these elements, and you'll be better equipped to develop a
strategy for when they're appropriate.

Citing works semantically

- Using HTML for citing works or authors can be a little tricky, especially with all of the changes that have been made to
the specification over the last few years. Initially, when HTML5 was released, the cite element was no longer allowed for
citing the authors of works, just the works themselves. This directly contradicted the way that authors had been using
the tag for years.And, as you can imagine, it created a huge controversy. Well, the specification has been modified, to
allow authors' names within citations again, but there's still a lot of confusion out there about how to properly cite
works.
So, what I wanna do is take a look at one popular pattern. To do that, we're gonna work with a trails.htm, which is found
in the 0306 folder. And if I take a look at that in the browser, if I scroll down into the main article, there's something that
seems a little bit off in this section for Notable features. And by the way, if you're watching this course, and you're
wondering about what these blue outlines are, this is a live preview feature inside Brackets, which is the editor I'm
using. And it's awesome because if you have something selected in the code, it's highlighted in the page, so that's not
actually part of my CSS, that's just Brackets being Brackets. OK.

So, in Notable features, there's this little paragraph right here that says "Northridge Loop is easily the best loop in
Ojai! "You'll kick yourself if you miss it! "Nick Brazzi, The Complete Guide to Trails". It's totally out of context with the
surrounding paragraphs. It's not part of that section.So clearly this is sort of a pull quote or a quotation that relates to
the article, but isn't actually part of the article flow itself. And so, not only is this not apparent stylistically, it's not
semantically apparent either. If I go back into my code, and I scroll down to, say, about line 69 or so, I can see that,
again, this is just enclosed in a paragraph.

So there's nothing really here semantically to say, "Hey, this is a quotation", or "This is an aside" or something like
that. So really the best structural element for this is probably a block quote, because this is a quote from an author, it
pertains to the article that it's inside of, so semantically a block quote really works here. So instead of a paragraph, I'm
gonna change this really quickly to a block quote. And I have to remember to do that to both the opening and the closing
text.

Now, what's nice about that, if I save this, and let's just say I go back and preview that in the browser, I can see that
stylistically, there's a change here. Now this is not the default styling for a block quote. I've written styles within my main
.css that are gonna help us style this already.So that's sort of already been finished, but now we're seeing that
stylistically, it looks different as well. Alright, if I go back into my quotation here, there are really two parts of
this. There's the quote itself: "Northridge Loop "is easily the best loop in Ojai! "You'll kick yourself if you miss it!"And
then there's the author information and the work that's being cited: "Nick Brazzi, The Complete Guide to Trails".

So I need to separate these in some way, as well. I would also like to have some quotation marks around Northridge
Loop-- around the quote, basically. Now, there are a couple of different ways to do this. I could use the HTML entity
character encoding, so I could do that, or I can use a tag. There's this neat little tag in HTML, called the q tag. And that, of
course, stands for quote. So what I'm gonna do is highlight all this text, and then I'm gonna wrap that in a q tag.Alright,
so I'll save this.

And then, let's say I wanna take a look at that in the browser, you can see it adds the proper quotation marks around
this quote. Now this is great for text that you want syndicated or that you wanna be able to sort of pull out, and the
quotation marks don't need to actually physically be there. You just want 'em there presentationally. This is a great tag
for this, and it's well supported in all major browsers. OK, so going back into my quote, I now need to think about how to
format the citation. Now, the cite tag obviously comes into mind.

But, because this is inside of a block quote, I'd really like to give the block quote itself some additional structural
information. Remember that block quotes, those are what we callsectioning roots, meaning anything we put inside of
that doesn't affect the main document outline. So we can use headlines or other structural elements in there that really
give definition and structure to the block quote, without affecting the document outline. Well, one thing I'd like to do is
wrap all of the author and the work information in a footer.

So I'm gonna highlight "Nick Brazzi" all the way to "The Complete Guide to Trails". And I'm gonna wrap that in a footer
element. Now, if you think about it, structurally, a footer element really works here, because footers are really supposed
to be, sort of, the info for a particular section. So that could be copyright data, it could be the author information, you
know, that sort of thing. So footer really works here, semantically and structurally, to separate the quote from the actual
citation itself. Now, if I save this, and once again go out to the browser to take a look at it, you can see that now
stylistically, I can use that hook of the footer to really give a much different appearance, physically to the author and the
work itself.

Now, I definitely wanna use the cite element here. In the HTML5 specification, the cite elementis used, really, to
reference any creative work or an author of a creative work, and in this case, that sort of applies to both of
them. There's "Nick Brazzi" and there's "The Complete Guide to Trails". So in addition to the footer, I'm gonna highlight
this, and I'll wrap that in a cite element.Now in this case, we have a fairly simple quote here. In other cases, you might
actually have a lot more information inside the footer.

So you might have contact information for the author, that sort of thing, and in those cases,that's why it's very helpful to
have both the footer and the cite. We really could have left the footer off. It just gives us a little bit of additional
structural integrity to the block quote. And then cite covers, in this case, both the author as well as the work that's being
cited, too. So if I save this and go back out to the browser, I can see that, stylistically, in my CSS, for cite, I'm going ahead
and italicizing it. And I've also aligned it over here to the right.

You'll notice that having the name of the work, The Complete Guide to Trails, italicized is probably a pretty good
idea. But the author's name, I don't really want to show that italicized. I would like to give them an additional bit of
visual separation. But I'd also like to semantically identify Nick, as the author, as well. Well, unfortunately, we don't
really have that type of mechanism in HTML. And that's one of the reasons why later on in the course, we'll be talking
about how to extend HTML5, with some additional vocabularies.

For right now, I'm gonna highlight the name, Nick Brazzi, and then I'm just gonna wrap that in a span tag, and I will use a
class attribute of "author", to identify that as an author. Now, that's actually not putting out any semantic data that, say,
Google or somebody else like that, would scan and pick up. It's really more human readable, but it also gives us an
additional styling hook. We now have span around the author. We're giving it a class of author, which is actually a
semantic class name, and not just something like class1a, or something like that.

Alright so if I save that, and then go back out to the browser, I can see that I've used that styling hook to make sure that
the name, Nick Brazzi, is not italicized, while the actual work itself is. So this is certainly not the only pattern that we
could use to mark up a quote or a quotation. Many authors will use things like the figure and figcaption
elements. Others will cite the work outside of the block quote. They'll do the block quote for the quote and then do the
citation outside of it. I've even seen people use definition list to do it.

What really matters is that you mark quotes and citations up in the cleanest, most semantic way possible. Later on,
we're gonna explore enhancing the sematics of our citation, but for now, this is a really solid place to start.

Using the address element

- When most people hear about the address element for the first time, they automatically assume it's designed to
markup things like, well, I don't know, postal addresses. Well, of course, it isn't. That would make sense. No (laughs) it's
actually designed to do something quite different. So before we start working with it, let's check out what the
specification has to say. So here I am in the HTML5 specification. I have navigated to the address element. And let's just
take a look at the definition, below all these different property values. "The address element represents the contact
information "for its nearest article or body element ancestor.

"If that's the body element, then the contact information "applies to the document as a whole."So it's really about
contact information, and that could pertain to an author of an article, or it could even mean the contact information for
an entire company. And you really have to use this judiciously. And there's a lot of judgment call about when it's
necessary and when it's not.My take on that would be when, semantically, you want a person, an individual, or a
robot to be able to search through and find the proper contact information for an author of a particular document or
article, then it's really the proper use for it.

You don't wanna wrap every bit of contact information in an address element, because that's really not what it's for. It's
really for the contact information for the generator of a specific article or document. OK, so going back into our
trails.htm, this time from the 03_07 directory, what I wanna do is find the footer for our main article. So if I scroll down,
I'll find our main article. And then, going down a little bit further, to, say, about line 77, 76, somewhere around in there,
there we go.

We have a footer, it's class is article footer, and inside that, we have some information about the author, Daniel
Weston. We see that he lives in Oxnard, California. He's got some various house plants, daughter, wife. He writes about
mountain biking, web design, and the outdoors.Oh, and here we have some contact information. So, inside the footer
for the main article, we have contact information for the author. So this is really a great example of when the address
element can come into play. Now, do I wanna wrap the whole thing in an address element?Yes and no, not really.

The line about the author, I would like that physically to be on a separate line. Just 'cause it would look a little bit
better. But then the rest of it really meets that criteria. So what I'm gonna do, is I'm gonna take the closing tag here for
this paragraph, I'm gonna cut it. And then I'm just gonna paste it on that line about the author. And I'll just hit Return, so
visually, I'll give myself a little bit of separation there. So now About the author is in its own paragraph inside the
footer.And then we have "Daniel Weston lives "in Oxnard, California," dada dada dada.

So all of this can be wrapped inside an address tag. Now, you might be saying to yourself,"Wait, it's not all just the
contact info. "The contact info is really just this link." Well, that's true.But the nice thing about the address element,
semantically, is that the contact info just needs to be inside of it. So if you have some brief descriptive text, it's
fine. Obviously, you wouldn't wanna go multiple paragraphs, but if you just have a few lines of text, think about it like a
Tweet, 150 characters, or something like that, you're in good shape. A single paragraph or a brief description, there's
nothing wrong with that.

Just so long as the contact info is also involved inside of that. So what I'm gonna do is highlightall of this newly orphaned
text. And then I'm gonna wrap that in an address tag. So I'm just gonna save that, and now, if I take a look at that in the
browser, I can see that stylistically, I have About the author on a separate line, which really looks nice. And then I have
the contact information down below that. Now, again, formatting visually, it doesn't really matter, 'cause I can use CSS
to style this any way that I want.

Visually, I'm giving a little bit of space in between that. But semantically, when we go back to the code, the address
element tells us that we can find the contact information for the author of the article, inside of this tag. Now if I scroll
down to the very bottom of the page, the footer, I can see inside that, I also have contact information. I have a couple of
phone numbers, I have an email address, I have a physical address, I have some additional phone numbers, so there's a
lot of stuff here. So now technically, a lot of this could be contained within an address element.

The real issue here is that, within an address element, you can't have a lot of additional structures. So you can't use any
sectioning elements, you can't use footers or headers, you're really looking at that being just flow content. The other
thing is it's not always appropriate. This is, indeed, contact information for the company, and it does kinda pertain to the
document, but in terms of being the author of the document's contact info, that semantically, is more of a judgment
call. In this case, I've decided not to use the address element, because I just don't think it's a narrow enough focus, in
this case, so it's really up to you as an author.

And in this case I've got the contact information for the author of an article. Yes, address element works out
fine. Contact information for the company that the site's referring to? That's a little bit more vague. So, as you can see,
whether you use the address element or not, can a lot of times be really just a judgment call on your part, as an
author. And because of the fact that a lot of folks really don't understand exactly how it should be used, it's probably a
little underutilized, in terms of how often it's used and allowed. Now, if you do decide to use it,make sure that you have
a clear use case for when it should be used in your site, and that you're focusing on providing specific contact
information for the source of a specific section of content.

Using the small element

- Several elements that were almost entirely presentational in nature have had their definitions redefined to add a little
bit of additional semantic value to them. The small tag is one of those.Now I wanna take a look in the specification to
learn a little bit more about it. In HTML4, the small element was simply defined as text that the browser should render in
a small font without giving it any additional information or meaning. Now in HTML5, this element has been redefined to
represent legal text or other text that would normally be considered fine print.

So, notice in the definition here, it says that the small element represents side comments,such as small prints. Now I
have a couple of notes below this, I'm gonna scroll down a little bit so I can read these. It says small print typically
features disclaimers, caveats, legal restrictions or copyrights. Small print is also sometimes used for attribution or for
satisfying licensing requirements. Now also notice the note below that. That the small element does not de-
emphasize or lower the importance of text emphasized by the em element or marked as important by the strong
element.

So, all this is really doing, is identifying the element as being fine print or a disclaimer. Now that's a big change,
however, because now it represents a specific type of content and not the size or importance of it. There's one more
thing in the description that I wanna make sure gets passed along. And that is, that the small element should not be
used for extended spans of text. You'll notice that just below the second note there. So no multiple paragraphs, no
lists, no really complex structures inside of it. It's just supposed to be used for shorter runs of textwhere you have that
one specific legal statement, or a link to something of that nature.

So if we go back to our trails page, this time in the 03_08 directory and scroll down as I have here to the page
footer, you'll find a line of text that fits perfectly for what the small element can do for us semantically. You'll notice that
about line 143 or so, there's a paragraph that says all content copyright 2014 Cycle Tracks, please read our terms of
use. So this is perfect. I'm gonna go ahead and highlight everything inside this paragraph, and then I'm gonna go ahead
and wrap that in a small element.

Now because of the way that I've written our CSS, if I save this, and then go preview that in a browser, go ahead and
refresh the page, you can see that it does appear a little smaller and it italicizes it, but that's just me writing the
CSS. What I wanna show you is what happens to a browser's default styling when you use small. So I'm gonna go up in
Firefox here, I'm gonna turn off my page styling, and scroll down and you can see that by default what browsers do to
any text inside of a small element, is they do render it a tad bit smaller.

And that really goes back to these earlier versions of HTML who basically instructed the browsers that hey, this should
be a size smaller if you will. So there's still that sort of residual presentational use inside the browsers. And if you don't
want that via the use of your CSS,you'll need to overwrite that. So if you do decide to use the small element, I'm gonna
turn all my styles back on again, if you do decide to use the small element, be aware that you're probably gonna have to
overwrite some of the default browser styling.

Also, keep in mind that if you're gonna use it, the small element is for smaller segments of text,not longer passages, and
also remember the restrictions on which type of content can go inside of it. Make sure you're using it with legal
disclaimers, copyright data, anything that would normally be considered fine print. Thanks to its redefinition in
HTML5, the small element becomes yet another element that can help us add meaning to our code.

Using the mark element

- The mark element was first introduced in html 5 and it's designed to help authors highlight page content. Usually for
reference purposes. Let's take a look at what the specification has to say about this new element. So inside the html 5
specification the definition for the mark element reads as such. "This element represents a run of text in one "document
marked or highlighted "for reference purposes, "due to its relevance in another context. "When used in a quotation or
other block of text "referred to from prose, it indicates a highlight "that was not originally present but which "has been
added to bring the reader's attention "to a part of the text that might not have been "considered important by the
original author when the "block was originally written, but is now under "previous unexpected scrutiny.

"When used in the main prose of a document, "it indicates part of the document has been highlighted "due to its likely
relevance to "the user's current activity." Whew, man. Alrigh, so some important things to take away from this. When
used in a quotation or other block of textthat's referred to from the prose it indicates a highlight that was not originally
present. Now that's a really important part. Not originally present. So if you're quoting somebody and you wanna take
part of that quote and emphasize it for the reader and it wasn't originally emphasized then the mark element is perfect
for that.

Now it can have some other uses as well. If I scroll down into the code examples, take a look at the second code example
here where it says, "Another example of the mark element "is highlighting parts of a document that are matching "some
search string. "If someone looked at a document, "and the server knew that the user was searching for "the word
'kitten', then the server might return the "document with one paragraph modified as follows." So it's showing you the
searched paragraph of text but the word "kitten" is surrounded by marks to indicate to the user that "Hey, this is the
term" "that you searched for and here's "how it's relevant." And that's actually a pretty common usage pattern when
people are showing you search results these days.

Alright, well let's take a look at the mark element in action and to do that I'm gonna open up thetrails.htm found in
0309. Now there's not really a whole lot going on in our trails page that's relevant for using the mark element. So if I
scroll down into our main article and keep going down a little bit you'll notice that I've got this little section where it says
"Notable features" andthere is a little paragraph here towards the bottom of it it says "If you wanna give this a try you
need to be extra careful, the washout resumes at the bottom of it and is perched on the edge of a 700 foot drop.

"So consider yourself warned." Well, what if I wanted to take that text and and emphasize, "So consider yourself
warned." If I highlight that text and then wrap that in a mark element. I wanna show you what browsers do to the mark
element for their default stylings. If I save this and go back out and preview that in the browser if I scroll down it's really
easy to find, you can see, "So consider yourself warned." Now this is typical of the browser's default styling.

This is not a style that I wrote. This is Chrome's, in this instance, default styling. But Internet Explorer and Firefox
pretty much do the same thing. It's almost like taking a yellow highlighterand highlighting the text. And that's really, if
you think about the definition of the mark element,it really fits for that. So this is actually a pretty good default
styling, although you certainly could change it if you wanted to and over-write that styling. Now frankly, this isn't a very
good use ofthe mark element. If I want to emphasize this text, I've got the m tag or I've got the strong tag, it really
doesn't work for that.

Remember, it's really intended to highlight something within a quote or another block of text that wasn't originally
present so it doesn't really work there. So I'm gonna go ahead and get rid of that. But if I go down I can see that inside
the block quote I do have a quote from Nick Brazzi. "Northridge Loop is easily the best loop "in Ojai. "You'll kick yourself
if you miss it."Inside that quotation Nick didn't really emphasize one part of that or another but what if I felt like really
highlighting the fact that this is "the best loop in Ojai".

So I could highlight just that little span of text there and then go ahead and wrap that in a mark tag. Now that's more in
conformance to the intended purpose of the mark tag. So if I save that.And go back into my browser. Now I can see that
I get that default highlighting for "best loop in Ojai." So if I really felt like keeping this, if I really wanted to emphasize the
fact that Nick says, "This is the best loop in Ojai." and I felt like that was worth highlighting within this larger quotation
then the mark element would be perfect for that.

And I would probably re-write the styling so it was a little bit more in conformance with my own site. So the mark
element is a great way to add new emphasis to quotes and references or indicate the original terms of a user's search. If
you plan on using it be sure to keep in mindhow most browsers are gonna style the mark element as you're seeing it
right here and then determine for yourself if you wanna over-write the default styles with something more
consistent with your own site.

Working with date and time

- It’s hard to believe, but prior to HTML 5, there was no reliable way to mark updates and times.Although the datetime
attribute existed, it was available only for extremely limited use cases.Now, thankfully the time element was introduced
in HTML 5, and although it’s gone through some changes, through multiple revisions, it’s now stable enough to use. So
before we start using the time element, I think it’d be very helpful to go out to the specification and read through it. So
here I am in the HTML 5 specification.
I’m taking a look at the time element. First thing I want to point your attention to is in the attributes, the content
attributes. We do have the datetime attribute available, and this is a machine-readable value. What does that
mean? Well, let’s take a look at the definition. Alright, so I’m gonna scroll down a little bit here and you’ll notice that the
definition says “The time element represents its contents “along with a machine-readable form “of those contents in the
datetime attribute. “The kind of content is limited “to various kinds of dates, times, “time-zone offsets, and
durations, “as described below.

“The datetime attribute may be present.” May, not must, but may. “If it’s present, it’s value must be a
representation “of the element’s contents “in a machine-readable format.” Phew, okay. So what does all that
mean? Alright, so essentially any date or time that you have, you can wrap in a time element. Now, that semantically
tells search engines, robots, anybody else coming through, that this is a date or a time, could be a duration, could be a
specific date,could be a certain amount of time, that sort of thing, that you want to pass along to it.

So that’s helpful for calendar dates, for making sure that searches can return with articles published within a specific
date range, those types of things. So because of the fact that this is really for search engines and other user agents to
come through and parse, the dates and the times have to be in a specific format; a valid month string or date string, or
something like that.So essentially if you put the time element around a date and it’s not already in a valid format,then
you’ll pass that value using the datetime attribute.

So the only time you’ll ever need a datetime attribute is if the text you’re surrounding it isn’t already a type of a
valid month or date string. So, what are valid strings? Well if I scroll down a little bit you can start to see
some representations of those. So we start by looking at a valid month string. Now the year always comes first, so in this
case the year comes first, then a dash, and then the month. A valid date string, adding the date to this, would be year,
month, and date. Now, you don’t have to have a year. For example if you always wanted to say, you know, in this case
the 12th of November, you pass the month first, and then the date after that.

Now, you can also do time. Notice the time is in the 24 hour clock. You can do hours, minutes, seconds. You could even
go into milliseconds if you want, that sort of thing. You can also combine them, so you can have both date and time
strings. Notice that you have a valid date string, then you have the time comes after that, and it’s separated by
this capital “T.” So that let’s you know you’re going from a date to the time, and in this case the date goes first. You can
also separate them by using white space. Any of that works.

I don’t want to spend a lot of time going over all these valid formats. What I would advise you to do is if you’re
interested in using a time element, and it’s really very, very helpful in terms of your page’s semantics, come to the
specification, read through these, and all the other various formats that you would use. For example we’re gonna talk
about offset strings in just a moment. But there are a lot of different formats that are acceptable. It even contains
links that go out to the specifications that they’re pulling these formats from so if you want to go out and read the
specific ISO standard that it’s pulling these valid strings from, you could do that as well.

So there’s a lot of information here, and I would really recommend you come here and become comfortable with
this before you start using the time element in your own sites. Okay, so let’s go ahead and practice using the time
element by going back into the “trails.htm” filefound in the “03_10” folder. Now the first thing I’m gonna do is I’m just
gonna scroll down and I can see that our main article has this little paragraph here that said it was posted on January
17th, 2014. That is perfect for a time element, so what I’m gonna do is I’m gonna come in, highlight the date, and then
I’m gonna wrap that in the time element.

Now, you may have remembered from when I was reading the specification, the datetime attribute is optional. We don’t
have to have it. However, the information that I just wrappedinside the time element has to be formatted in a valid date
string. When I look at this, it’s just written out. “January 17th, 2014.” So although you and I will understand
that, Google’s search engine, or other spider robots probably wouldn’t recognize that because it’s not in a valid date
string. So, in that case, we do need the datetime attribute. So I’m gonna go into the time element, I’m gonna go ahead
and create a datetime attribute, and in this case I’ve got to format this with a valid date string.

Now remember, year comes first. So I’m gonna type in “2014,” and then a dash, next comes month. Because this is
January it’s gonna be “01,” then another dash, and the specific datewhich in this case is “17.” So I’ll go ahead and save
that. So essentially the time element is alerting a user agent that “Hey, there’s a time value here’” and then the datetime
string is gonna pass that in a machine-readable format. Perfect. Alright, if I continue to scroll down into my main article
text, I’ll notice that at about line 75 or so there’s a paragraph here that says “I also want to mention on June 22nd of
every year, “the Ojai Biking Club sponsors a trail cleanup day.” Well, if somebody’s reading this on their mobile phone,
for example, maybe they’d like to tap that date and sort of save that to their calendar.

Well, one way to allow that is to use the time element. So I’m gonna highlight the text “June 22nd,” and again I’m gonna
wrap this in a time element. Now, we know from our earlier discussion that this is not a valid date string, so because of
that I know that I need the datetime attribute in order for this to be valid. So I’m gonna pass a datetime attribute. In this
case I don’t have a year, I just have a month and a date, so I can pass in “06-22.” And that stands for June 22nd.

Remember to close my quotations, and then go ahead and wrap that. So you can see I’m wrapping just the date, and
again I’m passing along datetime attribute in a machine-readable format. Let me go ahead and save that. Now you can
get a lot more specific with this if you want to. If I scroll down into the comments, on line 88, Max Smith wrote a
comment on August 7th 2014 at 12:52. That’s pretty specific. So I’m gonna highlight all of this... And I’ll wrap that,
again, in a time element.

Now we know that we’re gonna need a datetime attribute. But because there’s a little bit more going on here, first I’m
just gonna go ahead and wrap that in a time element. So, here we have both a date and a time. So when I go in to do the
datetime attribute now, I’m gonna have to pass along both a date and a time string, and I’m gonna have to separate
them using some type of value or a white space. So I’m gonna do “2014-08-07.” Now that handles my date, now I need
to pass the time.

To do that I’m gonna insert a capital “T,” that says the time value’s coming. And now I’m gonna do, using a 24 hour
clock, “12:52:04.” Now the “04” there, I’m just sort of adding that to show you what type of time value that you might
get from an automated system like a blogging engine like Wordpress. So a lot of times when they pass along a time
string you’re not only gonna have hours and minutes, you’re also gonna have seconds involved as well.

Now, we also want to supply a UTC offset here. So that tells it where it fits along which time zone it’s in. In this case I’m
gonna do a “-08:00.” And then I’m gonna save that. For the most part, you won’t ever have to worry about that. You’ll
have blogging software that’s gonna go ahead and generate that for you. But if you ever have to do this manually, it’s
kind of helpful to know where those UTC offsets come from. So if you go to Wikipedia, and you search for a “List of UTC
time offsets,” you will get a really large document with all the UTC offsets in it.

So you can figure out where you are or where the original poster was, or where the original time was, and you’ll know
exactly which UTC offset to use. Again, this is probably gonna begenerated by a machine, but if you have to do it by
hand, it’s kinda helpful to know where to find this stuff. Alright, we’ve only got two more left to do. I’m gonna scroll
down into my Rider Reviews, and I’ll notice that both of those have a publication date of when they were
submitted. Now this looks a little bit nicer, but this is still not a machine-readable format. So I’m still gonna use the
datetime attribute.

So here I’m gonna surround this in a time element... I’m gonna do the datetime attribute, and I’m gonna set that
value to “2014-06-26.” And then I’ll scroll down a little bit more... And I’ll do my last one. Now notice that I’m only
surrounding the date itself, not any additional information.This one will get a time element with a datetime attribute,
and its value is going to be “2014,”remember year comes first, “-04-30.” So remember, when you’re using the time
element you won’t always need the datetime attribute.

But remember that the element itself is designed to present dates and times in machine-readable format, so if the date
or time isn’t already formatted that way, you’ll need to include it as we’ve done here to ensure that you’re passing along
the information in the proper format.

Defining link relationships

- So far, we've explored how HTML5 allows us to describe the contents of our documents in more meaningful ways. In
this exercise, we're gonna focus on how HTML5 also allows us to define the relationships between pages and the
resources and the content that they link to. By using the rel attribute on links, anchors and area elements, you can
create sites that provide additional information about linked resources and even influence how user agents handle
them.

Before we put this into practice, let's jump out into the specifications for just one moment. Here I am in the HTML5
specification, and I have browsed to section 4.8.1, Links created by the a and area elements. Now, the rel attribute can
be used by anchor elements, the a elements, area elements, as well as the link element, which is bringing in external
resources. If I peruse down a little bit, I can see that "The rel attribute "on a and area elements controls "what kinds of
links the elements create.

"The attribute's value must be "a set of space-separated tokens. "The allowed keywords and their meanings "are defined
below. "It has no default value. "If the attribute is omitted, "or if none of the values in the attribute "are recognized by
the user agent, "the document has no particular relationship "with the destination resource "other than there being a
hyperlink between the two." What that's saying is, there's no real default value and if it's omitted, it's really not a big
deal. It's there to add semantic value and information between these two linked resources. Now, it also talks about the
keywords being defined a little bit below.

I'm gonna scroll down a little bit to take a look at the different types of rel attribute values. You'll notice from this table
that we've got here, we have one column for the link element. We have another column for the a and area
elements. Then we have the different types of values that we can add to the rel value. Now. I just wanna go over a
couple of these. I don't think we need to go through each and every single one of these. For example, we have
stylesheet. Notice that that's allowed on the link element, to say, "Hey, this is an external resource." It's not allowed on
the a and area.

So not every value is allowed on all of them. We also have things like previous and next.Those are helpful when we're
defining breadcrumbs. This is a link to the previous page. This is a link to the next page. We have things like
nofollow. That comes from blogging software. It basically tells search engines and other user agents, "I don't really want
you to follow this link,"in terms of its content not being relative to the page." We also have things like help, icons, which
would be unidentified external resources, licensing, to let it know that this link links out to legal or licensing
information for this particular content.

Again, there's a lot of additional information here that can help define the relationshipsbetween pages within your
site and the resources that are used within your site. If we go back into our trails page, this time from the 03_11
directory, let's take a look at where we can put the rel attribute to use. The first thing I'll notice is, on line six, I have a
link element, which is linking out to my main.css file. If you guys have been authoring HTML content for any time at
all,you've probably used this before and you probably have used the rel attribute so often within ityou don't even notice
it.

But you'll notice at this point that it's missing. If I go into my link element and add a rel attribute,I wanna give it the rel
attribute of stylesheet. As I mentioned before, you've probably done this so often that it's just muscle memory. You
don't even realize you're doing it. A lot of you guys might do what I do, which is just copy and paste it. But this is an
extremely helpful attribute. In fact, it's required on the link tag. In this case, we're saying, "Hey, we're linking out to an
external resource, "and that resource is a style sheet." All right. I'm gonna go ahead and save that.

But of course, the rel attribute can do a lot more for us, as well. If I scroll down, into my article, if I go down to the footer
of the article, about line 76 or so, I'll notice that this has been expanded a little bit, and I have a link to "Dan's personal
blog," which links out to danbikesalot.com. This allows me to let user agents know that, "Hey, this link is linking out "to
some information about the author "of this article." If I go into the a or anchor element and give it a rel attribute, I can
use the rel attribute of author to let it know that this page contains contact information or additional information about
the author of this article.

I'm gonna go ahead and save that. Now, I could also expand the meaning of other links on the page, too. If I scroll down
into the footer, I'll notice that I have a link here for the terms of use,which is a legal document. It's got our licensing
information. Because of that, I wanna alert user agents to the fact that this page has licensing info on it for our
company. I can do that by, again, going into the a element and doing the rel attribute and using the rel attribute of
license.

Go ahead and save that, as well. Now, the rel attribute can do a lot of things for us in terms of working with search
engines, as well. A lot of the values that it is picked up in the HTML5 specification really are sort of a response to existing
practices within the world of blogging. If I go up, for example, into the aside that holds our ad copy. This might be
rotational ad copy.You might not really know who is going to be buying ads. They may be relevant to your site,they may
be somebody you support.

But they might also be somebody that you really don't support or that isn't extremely relevant.A lot of times, you don't
want search engines to relate your page with the link that might go out to ad content at all. So you can use the rel
attribute to do that. If I go into the link here, our to melbikerentals.com, I can add a rel attribute to that. I can use the rel
attribute of nofollow. Now, nofollow is basically telling search engines, "Don't follow this link and index it "in terms of
how it relates to our page." Essentially, search engines really won't relate this content at all.

They won't follow this link out to see how it relates to yours, and it won't impact your search results at all. Now, you can
use more than one rel attribute. In this case, we use nofollow to tell search engines, "Hey, we don't really know who
these people are. "They shouldn't be associated "with our page ranking "or the type of content that we have on our
page at all." But it's also helpful to let browser or user agents know that this is an external link, too, meaning, not part of
your own domain. So I'm gonna type in a space, and then just type in external.

You can have multiple rel values. You just wanna separate them by using a white space. I'm gonna go ahead and save
that. Now we have identified this link as being an external link, a link external to our site, and we've also told search
engines, "Don't follow this and associate it "with our page, "because we're not really sure who these people are." All
right. By using the rel attribute, we've made a lot of our links a lot more descriptive. We've also established the
relationship between our page and its linked resources, which is a really good thing. In some cases, as with our link to
the CSS resource, the rel attribute is required.

In others, such as the author's contact information, for example, the rel attribute simply provides us with an
opportunity to provide semantically richer content which can be used by any supporting user agent.

Lesson4: Extending Meaning

Writing comments

- By design, HTML has a small set of elements. This makes HTML easy to implement and it ensures backwards
compatiblity with earlier versions. The downside of this is that it limits the semantic, meaning that we can impart with
the default set of elements. In this chapter, we're gonna take a look at some of the techniques that can help us extend
the meaning of our content. We're gonna start by exploring how incredibly useful HTML comments can be. So to do
that, I'm gonna open up the blog.htm file, found in the 04_01 directory.
Now, if you've been authoring HTML for a while, you're probably familiar with comments. But for those of you that
aren't, they're an extremely helpful way of passing along information to other authors or people reading your code that
you don't want rendered within the browser itself. We're actually already using one on this page. You'll notice in the
very top of the head of the document, we have a script here for HTML5 shim, but we only wanted that to affect
browsers that were Internet Explorer prior to version 9.

And that's why we're using what's known as a conditional comment, which is the "if lt IE 9."however this part of it, the
opening part, which is !-- and the closing part which is --> That's just a normal HTML comment and it allows us to pass
along any information that we want without that information being parsed and rendered by the browser. So let's say we
wanted to pass along to people reading this page, what this conditional comment is doing.

I might wanna help other authors out. Maybe they're gonna look at this and say, "I have "no idea what that code is
doing." So I could create a new line, just above that. And then I could type in a left angle-bracket, !-- so that is the
opening of my comment. And I'd want to add a little bit of descriptive text here, so I'm just gonna say, "Adds HTML... "5
element support for earlier versions of IE" Now, when I'm doin' a comment, it's really important that I remember to
close it,because if I forget to close it, in a lot of cases, browsers will just ignore everything that comes after it because
they think it's all part of an open comment.

So I'm gonna do -- and then a > and that's gonna make sure to close my comment. So essentially what I'm doing here is
I'm passing along a little bit of additional information. I'm letting people know that, "Hey, below this "I'm adding HTML5
element support for earlier"versions of IE" A lot of times you'll do this just as a way of being nice to people who might be
reading your code Sometimes it's a nice way to be nice to future versions of yourself. Maybe you're gonna open up this
document later on and you might wanna give yourself a gentle reminder of why you were doing something within your
code.

Comments are definitely helpful for that. They're also helpful in team environments. Maybe you've got multiple people
working on a site. One person's job, for example, is to come in and add certain types of content, like maybe advertising
content. In that case, you might create a comment to let 'em know where that content was supposed to go. So, if I scroll
down in my blog page, all the way down towards the bottom, I can see that there's a little aside down hereon line 126
that has an ID of "adCopy." So that's where the ad is supposed to go.

Now most people would read the ID and know this, but maybe you're gonna tell your dev team, "Hey, look for this
comment, use a find and replace "or something like that to insert the ad content." So, again, I'm gonna add another
comment here. So you remember the < !-- And then inside of that, I'm gonna type in, "Ad content goes here" Now did
you notice how brackets went ahead and grayed everything out? Most code editors, or most IDEs, are gonna
represent comments as gray text just to let you know that it's not gonna be parsed, it's not gonna be rendered by a
browser.

You'll notice that if I leave this comment open, browsers would ignore everything from here down, so that's really a big
deal. So I'm gonna have to remember to do --> to close that again.And you can see my code editor helps me by letting
me know that that's coming back. Now if I save this, and let's say I preview this in my browser, now if I scroll down to
where the adcontent is supposed to be, I don't see anything. And that is simply because comments are not rendered or
parsed by browsers at all. They're totally ignored.

So you can use them to do things like I'm doing here, which is pass messages along to development teams, you can add
additional information for what's going on within a particular function or widget, and you can do that for yourself or
maybe other people that are coming to your site. Now even though they're not rendered by the browser do keep in
mind that it adds to the weight of your code. So most people have a strategy for when comments are appropriate. And a
lot of people, when they're publishing their sites will strip their comments out through the use of a script of some type
or another.

Now chances are, if you've been writing HTML for any time at all, you've probably been making use of
comments, however I wanted to make sure that I included them in the discussion of how you could communicate more
detail about your content to fellow team members or even to your future self.

Working with meta tags

- Meta tags are one of the oldest and most popular ways to include additional information about your page content. Its
main purpose is to serve as a general way to define document level metadata, although it has, over the years, evolved to
serve some very specific purposes as well. Before we start using it in our Trails page, I want to take a moment to look at
the specification. So, I've pulled up the meta element in the HTML5 specification, and there's a couple of things that I
want to point out.

Now first, I'm going to go down to the definition. You'll notice that it says, the meta element represents various kinds of
metadata that cannot be expressed using the title, base, link, style, and script elements. Now that's pretty broad, and
actually because of this broad definition, a lot of people have taken the meta element and extended it a little bit. If we
look at the content attributes, we have name, http-equivalent, content, and character set. These are really the only four
attributes that are defined within the specification, but as we're going to see, a lot of people have taken that and sort of
expanded upon it.

Http-equivalent is really sort of the old way that we used to do document encoding. Now that's done through character
set. And if I go back to my Trails page for a moment, you can see that we've already done that. On line number four,
when we were first describing the document structure, we typed in meta character set utf-8, and that goes ahead and
defines the character encoding for your page. So that's a meta tag that really should be in every single HTML page that
you do, and it should be towards the top, if not the top tag in the head, so that it is encountered very early on within
your page.

So that leaves us with name and content, and essentially name and content allow us to have name value pairs, which
can give us an opportunity to expand the information about a particular page. If I jump down to the names, there are
standard names, like application, author, description, generator, keywords, those types of things. Now when you use
this, name will equal a value, so, for example, description, and then content will give us that description.One of the meta
tags that used to be used quite frequently was keywords, and this was a wayof letting search engines know what type of
content was on a page.

Because this was abused so often in the early days of the web, search engines really just don't pay attention to keywords
anymore, and they've kind of fallen out of favor, in terms of using them. Blog software uses it now for categories, but
most people don't use it to actually describe or give keywords for the content of the site. Descriptions are still widely
used, however, and they give a nice summary of the page, and in a lot of cases, search engines will show the
description, if a summary of the page is required. So it's not a bad idea to include them on all of your pages.

So I'm going to go back into the trails.html file, found in the 04_02 directory, and what I want to do is add a new meta
tag, and I'm going to add this right after our title, Cycle Tracks Trail Guide,and I'm just going to open up a brand new
meta tag, and any time you open up a meta tag,there are various attributes you can use. In this case, when you're using
name content pairs,name always comes first. The name that I'm going to use for this one is description, because I want
to supply a description. Next, I'll follow that up with content, and content is where my description goes.

Now, you want these to be brief summaries. Think of it almost like a tweet, so 150 characters or somewhere around in
there, really just a sentence or small paragraph. You don't want to go into too much detail here. Now for the Trails page,
I'm going to type in Cycle Tracks trail reviews gives you the inside scoop on the best biking trails around. So, it is
descriptive, it's not overly long, and it's a nice little summary of what this page is all about.

Now I'm going to save this, and then I'm going to copy this description and open up my blog page. It's in the same
folder. Now the reason I copied it is because it just saves me a little bit of typing, however, the description on one
page isn't necessarily going to be the description on another. So although I want a description, the blog does something
slightly different than the actual Trails page. So, I'm going to come in and change this a little bit. I'm going to type in
Cycle Tracks biking blog dives deep into the culture of serious mountain biking, and then I'm going to save that.

Now, obviously, if I previewed this in a browser, nothing would really show up. This is simply for search engines and
other user agents to have a nice summary of what that page or site is all about. And this is one of the oldest uses of the
meta tag. Now I mentioned that because of the fact that it has such a broad definition, a lot of people have taken the
meta tag and extended it for other uses, and just as a way of showing you kind of how the meta tag is evolving, I want to
show you a couple of those.

The first thing I want to show you is the meta viewport tag. Now if you've done any type of responsive designs or read
about them, you've either used this or seen this, but what the meta viewport tag allows us to do is to define the initial
width of the viewport on mobile devices and what the initial scale is. So in this case you can see the example we have
here, meta name equals, viewport content equals. So it's still using that name content value pair, it's just passing along
more information. So really, inside of name and content you can place anything you want.

One of the biggest areas in which the meta tag is being extended is in social media. So right now I'm in the
documentation for developers within Twitter, and I want to take a look at summary cards. So you can use summary
cards of the page to help Twitter sort of pre-formathow this is going to look like if somebody tweets about a particular
page. So if I scroll down, you can see that we have meta tags here that have been extended, again using the same name
content pairs, but in this case Twitter card content summary, and again, you can just go through and use these Twitter-
specific meta tags to pass along additional information about a page to Twitter.

You can do the same thing for Facebook. Facebook uses what's called open graph tags to pass along information to a site
for Facebook so that Facebook can either share it a certain way or display it a certain way. And again, there are a lot of
different tags available here. If I scroll down a little bit, I can see these meta tags at work. So if you're interested in using
theseto expand the social media reach of your site, you could come to the developers.facebook.com or the developer
page for Twitter and kind of find out how these work.

Now how you employ meta tags within your own site is really a matter of personal preference.Now keep in mind that
some of their uses, such as defining the character encoding, should be done for every page, while others, like adding
descriptions, keywords, or even using social media specific tags, is going to largely depend upon your site's goals and
strategies.
Using class and ID attributes

- By now I’m guessing that you’re probably familiar with class and id attributes. However, you may not view them
as actually ways of extending the semantic meaning of your content. I want to reexamine these attributes and then talk
about developing strategies for using them properly within your sites. So to do that I’m gonna work with the trails
page, but before I do that, I want to show you a page here from Zurb’s Foundation framework. And if I go back to my
browser you can kinda see that this is sort of the demo page for Zurb’s Foundation framework.

Now, this is an incredibly popular framework. I didn’t include this in the exercise files, but if you go to
Foundation.zurb.com you can find this and download it. Now, Foundation is just one of the many front-end application
development frameworks out there. And these frameworks have sort of pre-built classes and styles and html, and they
allow you to quickly and easily create things like this, with buttons and columns, and all sorts of stuff. Now, they typically
do that through the application of classes.

If I go back into this index page itself, you’ll notice that if I look through these divs that they have, I have classes like
“large-12,” “row,” “panel,” “row large-4,” “medium-4,” “medium-8,”“callout,” “large-6.” Now, while these are styling
hooks for the framework itself, it doesn’t really pass along any additional meaning. I’m not learning anything from this,
and if I didn’t already know the framework, I really wouldn’t understand what these classes were doing or trying to do.

And that’s one of the challenges of frameworks. They have to use classes as hooks, because really you need to be able to
turn almost any element into what they’re trying to style. So they can’t really have semantic names because it could go
on anything. So now to talk about how ids and classes are gonna be used in our project site, I’ve opened up the
“trails.htm” file which can be found in the “04_03” directory. Now if I preview this page in my browser I can see that all
the styling on it is broken.

So, much like the Foundation framework, I utilize classes and ids as styling hooks as well. But what I want to try to do is
impart a little bit more semantic meaning with them. A lot of people tend to view classes and ids only as styling
hooks, and don’t really think about the semantic value that they can add to your files. So if I go back into my page, I want
to start with ids. Now,whether you use ids or not is totally up to you. A lot of people will use them, but not use them as
styling hooks because they’re so specific.

They have such a high degree of what we call ‘specificity,’ within the CSS. Other folks don’t have any problems using
‘em. I, frankly, will use them sometimes, other times I won’t. It really depends upon the site and how the entire site is
gonna be structured. I do use them all the time to identify specific unique areas of a site. I’ll tell you why. Because ids,
their values can only be used once per page. So it’s a really nice way of identifying unique sections of your page in a nice,
semantic way.

So what I’m gonna do is go through the structure of my page and I’m gonna identify all of itusing ids. I’m gonna start
with the header. So on line 14 I’m gonna grab the header... I’m gonna give it an “id” value, and it’s going to be
“mainHeader.” So there are multiple headers.This allows me to identify this one as the main header for the site. Now
you’ll notice that I’m using CamelCase naming. A lot of people like to use dashes or underscores, it’s totally up to
you. It’s all about personal style. Next thing I’m gonna do is scroll down, find my "< main >" element, and inside of
that I’m gonna give it an “id” of “trailReviews.” So again, I’m identifying that this area, or this section, is my trail reviews
section.

I’ll notice that just below that there’s a table. I’m gonna give this table an “id” as well. I’m gonna give it an id of
“quickFacts.” Now if I go down below my main article, I find right after my main a new section, line about 96 or so. This
section is another main section of my page, so it’s worthy of an id as well. In this case, I’m gonna give it an “id” of
“riderReviews.” So we had trail reviews, now we’ve got rider reviews.

And again, semantically I’m starting to add a lot of additional information about how this page is structured. If I scroll
down even more I find an “< aside >” that has my ad copy. That’s gonna be on about line 132. And I’m gonna give it an
“id” of “adCopy.” And then finally the footer here, I’m gonna give it an “id” of “pageFooter.” I’ll save that and go back
out to my page, and right away you can see that the styling is improved.

That’s because I’m using those ids as styling hooks to style these individual sections. Now, the styling isn’t perfect, and
that’s because I also used a lot of classes in my styles as well.Now the main difference between ids and classes is that an
id can only be used once per page. So that means, for example, there can only be one page footer. Classes, however, can
be used as often as you want. So when I start to think about when one might be used over another, ids for me identify
unique elements on a page, whereas classes allow me to identifycontent that may or may not repeat often within a
page, or within a site.

So I’m gonna scroll up to, again, the top of the page here, and on about line 30 or so I’ve got some navigation here. So I
have a paragraph with some breadcrumb navigation inside of it.And that’s exactly what I’m gonna do. I’m gonna grab
that paragraph and I’m gonna give it a class, of “breadcrumbs.” So you’ll notice that the values I’m using for all of these
are semantic values. They’re passing information about what these elements are. And I’m not saying “b-1” or “section 4”
or anything like that.
I’m being very descriptive in how I name these. Now just below that on line 31 I have a paragraph that says “Ojai
Trails.” I’d like people to know that that is, in fact, their current trail, so I’m gonna give it a class value of
“currentTrail,” again using my CamelCase naming convention. You could certainly do dashes there if you wanted to do
that. So now I’m gonna save that, and let’s go down through and add a couple more here. On line 36 I’ve got a
paragraph that basically has the publication date in it, so that’d be nice to pass along as well.

So I’m gonna give it a class of “pubdate.” Now this actually used to be an attribute inside html with the element that has
since been sort of pulled out of it. So I kind of like adding this as a class to anywhere I have a publication date, cause it
can semantically still identify those. Now I’m gonna add those also to line 102. I have another paragraph here that has a
pub date, so I’m gonna do “class=“pubdate.” And if I scroll down a little bit further, on about line 121, I have another
pub date.

So everywhere I find that I’m gonna add that to the class. And here you can see I’m having multiple instances of the
same class on the same page. Now staying here in this rider review, I also notice that “Copper Canyon Loop” was written
by “Shea Hansen.” So the paragraph where I talk about the author, I’m gonna go ahead and give it a class of “byline.” So,
again, it’s being very descriptive about this and will also apply to the other rider review up here on line 101. So I’m
gonna give that a class of “byline.” So, again, you can see that unlike ids, I can use classes multiple times on a page.

And if I keep going up to about line 72 or so... I can see that we’re back into our "< blockquote >" here, and if you
remember from earlier: the "< span >" around "Nick Brazzi," I need to identify what this is, so again I’m gonna use the
class attribute of “author.” Now, if you remember from earlier, if you watched that exercise, you know that not only is
that going to pass some semantic value, but I’ve also used that as a styling hook, so Nick Brazzi now won’t be
italicized. And then finally on line about 89...

I can see that I have an "< article >" here. Now, this is a comment, and right now I only have one comment for this
particular posting, but people could certainly submit more comments, so I might end up with multiples on the page. So
instead of using an id to identify this as a comment, it actually would make a lot more sense to use a class, so I’m gonna
give it a classof “comment.” That way if additional comments are added, I can go ahead and identify each one of
them through these class attribute.

So now I’m gonna go ahead and save that. Now, you might have noticed that almost every time I’m doing an id or a class
attribute I’m trying to be as semantic as possible. I really like doing that because if somebody else comes through and
reads my code, they’re gonna be able to understand what these elements on the page are, and it’s gonna be a lot more
readable for both humans and machines. Now if I scroll down to the bottom of the page, the page footer, you’re gonna
see that not everything uses semantic naming. For example, I have a div with a class of “rightCol.” And then I have
another div with a class of “leftCol.” And I sort of used an abbreviation in there for right column and left column.

Now, once I explain what that means to you you’re like, “Oh, okay, that’s “the right column and that’s the left
column.” But really, this doesn’t impart any semantic value. I just needed to do some styling hooks so I used a generic "<
div >" tag and then the class that I used for it is really not semantic at all. It could be “rC” or “lC” and that would’ve been
just fine. I like being a little bit descriptive, but it’s not actually enhancing the value of the content, or identifying what it
is outside of the styling purposes. So if I save this, go back out to the browser, I can see that now I’m fully engaging all
the styles that I’ve written for this page.

Now, how you use classes and ids in your own sites is usually an integral part of any design and development
strategy. There are gonna be times that non-semantic values are called for,like the footer I’m using here, but when
you’re developing your own strategy you need to consider the value that using semantic class and id values can add to
your sites.

Using ARIA landmark roles

- Over the next several exercises, we're going to explore some of the vocabularies that have evolved to extend HTML's
native semantics. In this exercise, we're going to take a look atusing ARIA landmark roles, which uses the roles
attribute to identify content as having specific semantic meaning and representing a particular section in a
document. Using these roles makes it easier for screen readers, assistive devices, and other user agents to quickly scan
page content and then navigate to specific sections when required.

So to show you how this works, I'm going to open up the trails.htm file. Now before we get too deep into doing this as
an exercise, I want to switch over to the specification. So what we're looking at is the accessible rich internet
applications or WAI-ARIA 1.0 specification, and specifically, I've navigated to what's known as The Roles Model. The role
will be an attributeyou can apply to any HTML element, and then you can assign it a specific role. Now if I scroll down
into this, you see that we have certain categories.

Now I'm going to jump down a little bit in this document to the different categories and roles.There are basically four of
them, abstract, widget, document structure, and landmark roles. So the first ones, abstract ones, they're really just there
to define the actual role concepts themselves. Widget roles help when you're defining applications, so to do things like
menus,to do things like buttons, alerts, dialog boxes, tab panels, things like that. Document structure is extremely
helpful, because it allows you to identify things like articles, groups of content, headings, things like that, but landmark
roles are where we really want to focus.

Landmark roles are incredibly well supported, and this is probably the most practical of all semantic techniques that you
can employ on your sites. The reason for that is because screen readers and other assistive technology have been
built with landmark roles built into them. So if you use these on your site, you're going to get an immediate benefit for
people using assistive technology. There's really no reason not to use them, and I would make them mandatory for every
site you're going to be working with. And you'll notice there aren't too many landmark roles, navigation, main, form,
search, content info, complementary, banner, and application.

Now we'll get to using these in just a moment, but there are a couple of things that I wanted to point out. First off, when
the folks were developing the HTML5 specification, landmark roles were one of the things used when new semantic
elements were discussed. For example, the nav element closely mirrors the landmark role of navigation. You'll notice
that we also have a main landmark role and a main element. Now this is just a brief introduction into using landmark
roles. There's actually a document called Using WAI-ARIA in HTML.

This you can also find in the W3C's site, and one of the great things in this document, if I scroll down a little bit, you'll
notice that we have a recommendations table, and this recommendations table will basically go over different HTML
elements and whether or not you should explicitly define ARIA semantics with that, meaning should I use a role and is
one available. So, for example, for article we can see role equals article would be the appropriate role attribute. Should
we do this? Notice this table says yes, you should do this, although it gives you a no, saying if it's the child of another
article element, or if it's being used to mark up comments, you don't need to.

So it's really just specifically for individual articles on a page. So you could use this particular table to sort of learn when
they're appropriate and which elements they're appropriate for. So this is definitely something you want to
bookmark and come back to when you're starting toauthor your own pages. All right, so I want to open up the trails.htm
page, in the 04_4 directory, and we're going to start adding some useful roles to our page. Now the first thing I'm going
to do is I'm going to go to my main header, which we've identified with the ID main header, and I'm going to give it a
role attribute, and the role attribute that I'm going to use here is banner.

So, obviously, before you start using roles, you're going to need to know what they mean, and the best way to do that
is to read through the specification. Banners, for example, are typically at the top of the page and typically have, say,
company branding or searches, and they typically span the top of the page, which sounds exactly like a header. So for
the page's main header, you typically want to assign a role of banner to it. Now just below that I have a nav element. It
contains my page's navigation, so I also want to give that a role of navigation.

Now what this is going to do for me is if somebody is visiting this page on a screen reader, for example, the screen
reader can give them the option of jumping right to the navigation or even skipping over it. So this is a nice way of
identifying this region as a page's navigation, and then assistive devices can choose how they want to access this or
whether they want to navigate to it or not. Now I'm going to continue to scroll down. I'm going to find the main
element, and I'm going to add a role attribute to that, and I'm going to give it a role of main as well.

Now a lot of cases you're going to be doing dual things. The main element has a role of main,and that seems to be a little
repetitive. Well, the fact is in HTML5 specification, screen readers are encouraged to use the native semantics, meaning
if it's looking for the main content, find the main ID. That support is still evolving, so right now it's useful for us to do
both of these at the same time so that screen readers that support HTML5 specification will be able to use the
element, while other assistive devices that don't support it yet will still find it through the use of the role attribute.

Now I'm going to scroll down and find my main article, which is right here. I'm going to give it a role of article as
well. Now in some cases you'll only have one on the page. That's the case in most of the landmark roles. But other roles,
like article, can be used multiple times. So not only am I going to do the main article with a role of article, as I scroll down
I'm going to find my writer reviews, and I'm going to give each of those articles a role of article as well. So again, I just
want to do that to both of the writer reviews.

So it's identifying that content as being a separate article, which again, screen readers could navigate directly to, if the
reader wanted to. Now we also have a couple of asides, and we have some helpful roles to identify those, and we're
going to use the role of complementary. So essentially that's identifying this content as being complementary to its
siblings, which is the case for our Ojai Trail Facts, as well as our ad copy. Then finally, for the page footer, I'm going to go
ahead and give it a role of content info, which is exactly what this is.

It's information about the page, contact information for the site, things like that. I'm going to go ahead and save the
page, and now we have the main roles identified for all of our page content. You could make the argument that no other
semantic technique has as much practical application as ARIA roles. By adding landmark roles to your sites, you
automatically increase your page's accessibility and functionality, and there's really no good reason not to do it.

Introducing microformats, microdata, and RDFa

- As I mentioned, by design, HTML has a small set of elements. Unlike XML which can create any element that you need
to describe an object, HTML is locked into a specific set of elements that have very specific semantic meanings,
mostly centered on document structure.Now this creates a language that's a lot easier to implement and learn and one
that creates consistent documents. The downside is that when you need to define various specific objects, say a
personal contact or book review, there really aren't any native vocabularies that are capable of doing this.

That's one of the reasons behind the development of microsyntaxes. These are small, targeted vocabularies that
are designed to add meaning to your markup. There are three main microsyntaxes, microformats, RDFa and
microdata. Before we explore how to use them, I want to take a closer look at each of them. I'm going to start at
microformats, which is the oldest of them, this is microformats.org. You can see on their home page they just turned
9 years old at the time of this recording, which is pretty cool.

Now, if I go to the about page to learn a little bit about it, it's got this nice little sort of what are microformats and what
are they not? Well, they're a way of thinking about data. They're a design principal for formats and, essentially, they
pave the cow paths, meaning they're usingalready established patterns, essentially. Microformats basically use classes to
identify specific types of information. You'll notice that under the "are not" it just says it's not a new language, it's not
infinitely extensible, although the second version of microformats two is a little bit more extensible, an attempt to get
everyone to change their behavior or rewrite their tools, that sort of thing.

It's just a way of adding additional data. Now, let's take a look at kind of how they work. If I go to microformats2, which
is the latest version of microformats, you'll notice that we have prefixesfor class names for specific things. They have h-
for names, p- for properties, u- for URL properties, dt for dates and times, and e for embedded markup. You'll notice, for
example, they have h-product. If I click on that, I get certain things like name of the product, photo of it, brand category.

So all these different things that can help me describe products. If you're looking at this in the abstract, this probably
doesn't mean anything to you because you're like, "Okay, great, but how do you use this?" Well, there's another great
page on their site. There's this little Code & Tools, which, if you go to the main page, you can click on Code & Tools, and
it'll bring you here. This is actually a Code Generator for you, which makes the process really easy. If I go to hCard
Creator, for example, all I have to do is type in certain things, like James, and then Williamson, for example, and then my
code over here is updated for me.

You'll notice that, essentially, they're using IDs and classes to identify additional information.They're sort of extending
HTML through the use of IDs and classes when they're having specific values that user agents can
recognize. Microformats has been around for so long,things like hCard and hCalendar are widely supported and
used. Now the next syntax I want to talk about is RDFa. RDFa is created by the W3CG, so the same people that do the
HTML5 specification are doing the RDFa specification as well.

Now, it's almost exactly the same as microformats, in fact, almost all these syntaxes are doing exactly the same
thing. They're using classes or IDs or some type of property to extend a native element. If I go the the Play area, I can
sort of see how it works compared to microformats. If I go to Person, for example, I can see that this example over here,
on the right hand side, here's a name, a title, a phone number, that sort of thing, would be marked this way. Instead of
class, it uses an attribute called property.

Those property have values such as names, job titles, telephone, that sort of thing. So, really, once you learn the syntax
of one of these microformats, it's all about looking at specificschemas for things like books and people and contact
information and dates and times,events, things like that. So, to do that, I would go into Documentation and I would be
able to go into these specific specifications to read through the documentation. Now the last one that I want to take an
individual look at is schema.org.

This one has really caused a bit of a ruckus because microformats was established, it was around for a long time, most
people, like Google and Yahoo supported it, but a lot of people thought that it was lacking in some way or maybe
needed to be a little bit more extensible. A bunch of companies, including Google, Bing, Yandex, Yahoo, all got together
and said, "You know what? "We need to really come up with our own standard "on these microsyntaxes."They created
schema.org. Although all three of these, RDFa, microformats and schema are all supported by all major search
engines and other user agents, schema.org is the one that probably getting the most press at the moment.

Now if I go into Documentation, and Getting Started, they'll have a nice little introduction to how microdata works. If I
scroll down, instead of using classes or a property attribute, microdata uses what's known as itemscope, itemtype and
itemprop. So itemscope says, "Hey, I'm going to scope this "particular element to a specific type." Itemtype tells it which
type, in this case, a movie. And then, if I scroll down, we have itemproperty that goes ahead and gives properties.So it's
like, "Hey, from the movie schema, "this is the name of the movie, this is the director,"this is the genre and this is the
trailer for it." So those are things are all supported.

Again, once you learn the syntax of it, you have to look at the individual schemas themselves.To do that, for schema.org,
if I just click on Schemas, I have a full listing of all the Schemas. If I go to Book, I can see all these individual properties for
Book. And as I scroll down, you cansee there are a lot of different properties. What's nice about this is it also gives you
someexamples of, not only how microdata would look, but how it would compare to something like RDFa. It's a nice way
of sort of learning about all of them. All three of these vocabularies are reasonably mature.
They're all well-supported by Google and other major search engines. Which you use is entirely up to you. And actually
might depend on the ease of use or which syntax you find the most appealing. Now that I've introduced you to these
microsyntaxes, we're going to put them to use in our next exercise.

Using microdata

- Regardless of which microsyntax schema that you use, you'll be able to define data in much richer detail. To introduce
you to the process of using rich data, we're gonna explore using Schema.org's microdata syntax. So we're gonna do this
using the blog.htm file, found in the 04_06 folder. Now one of the reasons I wanna use this is because if I preview this
page in my browser, I can see that this entire page is really focusing on a recipe, in this case, "Hollys Trail Mix." We
notice we have a nice summary of the recipe.

If I scroll down, we have prep time, cook time, ingredients, directions. We even have a bunch of reviews where people
have reviewed the trail mix recipe and said, "Hey, we really like this."So I'd like to explain this semantically in a little bit
more detail. And the best way for me to do that is to use microsyntaxes because in HTML, there are no recipe tags, or
prep time, or cook time or ingredient elements. So I'm gonna have to extend HTML in order to do this. Now if I go back
to Schema.org and I'm looking at the schemas, I can see that there is indeed a schema for recipes.

So if I click on that, it takes me directly to the schema for recipe. And I'll notice that recipe is a type of
CreativeWork which is a type of Thing. So not only can I use all the properties that are specific to recipe, but I can also
use all the properies of CreativeWork and the properties of these sort of generic Things, if you will. So, for recipe, I've
got really specific things like ingredients and prep time. For CreativeWork, I have things like About, Author, Date
Created, things like that.

If I scroll down into Thing, notice I have things like images and names, which also are usefulfor describing them. Well in
order to use the Schema.org microdata syntax, remember, I'm gonna be using three main properties. I'm gonna use Item
Scope, which is gonna scope a specific section of the page into saying, "Hey, it's this object." Item Type, which tells it
which type of object it is, in this case, recipe. And then Item Properties, which are gonna allow me to use the individual
properties that I'm seeing listed here.

The easiest way to do this is to simply go up to the url and copy this. Then I'm gonna go back to my HTML code and I
have to decide where I wanna scope this recipe to. And if I'm scrolling down through my code, I can kinda see that the
recipe is inside of the main element, so it really is very helpful to scope a specific section of the page to this, to let a
search engine, for example, know that, "Hey inside of this main "element, you're gonna find a recipe." So what I'm
gonna do is right inside the main element, I'm gonna go ahead and do itemscope.

So again, that's gonna let a user agent know that, "Hey, this element is scoped to a specific item type." And that's what I
have to give it next. So I'm gonna type in "itemtype," notice that these are separated with some whitespace, and
itemtype has a value and that value is gonna be equal to the url for that particular schema. So the only way that you're
gonna know this, of course, is to go to Schema.org and find the url for it. Notice that you wanna copy and paste the
entire url, including the protocol, in this case, http://schema.org Alright, I'm gonna go ahead and save that.

And so now a search engine would expect inside the main element to find a recipe. Now that we have the itemtype
declared and scoped, now we can use the individual properties of recipes or creative works or things to describe all of
these things in a lot more detail. Now the first thing I wanna start with is the name of the recipe, so this h3 right here
that includes the name, I'm gonna go ahead and give it an itemprop and the value for that is going to be "name."Now
again, I'm not making these up.

I'm grabbing these from the schema. If I scroll all the way down for example, I can see that name is a property that's
inheriting from Thing and it's the name of the item. So really, in order to use these schemas, you're gonna have to spend
some time to familiarize yourself with which properties are available and what those properties are used for. Alright, if I
go back into my code, I'm just going to keep going down through this. Next, after name, I have a time. This is the time
that it was published. So inside the time element here, after that class, I'm gonna go ahead and give it an
itemprop ="dateCreated" Now I'm gonna save myself a little bit of time here, instead of having to type out
itemprop every single time, I'm just gonna copy this.

Because what we're gonna be doing is we're gonna just be defining all these different properties. So I'm gonna go down
below that and find the image. I'll paste this in again and I'm gonna change "dateCreated" to "image." Now again, I'm
not making these up. I'm grabbing these from the schema and I have to know how they're spelled and capitalization
does matter.So, for example, with "dateCreated" we're using camel-case naming, lowercase "d," uppercase "C." After
that I'm just gonna go through and find, for example, the name of the author, which in this case is Holly Williamson.

I'm gonna paste "itemprop" in there and I'm gonna change that from "dateCreated" to "author" because she is the
author of that particular creative work. Right below that, I have a summary of the recipe, which is perfect for the item
property of "description." So I'm gonna go ahead and give it "description" there. Below that, if I scroll down, I find the
section here that has Prep time, Cook Time, things like that. You'll notice that I have time elements that are specific for
each one of these.
And so I'm gonna go in and give each one of these their own properties. Prep time is going to get, you guessed it,
prepTime, lowercase "p," uppercase "T," prepTime. Cook time is gonna be just that, cookTime. So while it may take you
a little while to familiarize yourself with all the properties that are avialable, as you can see, a lot of them are pretty self-
explanatory. For example, for Total time, can you guess what that is? Yep. It is indeed, totalTime.

So a lot of them just kinda make sense and are pretty easy to figure out which property you use for what item. And then
finally, down here for Yield, I've got a span around the actual text "3 cups." The reason for that is because if a search
engine is gonna pull this information out, I don't want it to say "Yield: 3 cups." I just want it to say, "3 cups." So in this
case, I'm using the span to sort of give me a generic hook so that I can say, itemprop="recipeYield" and then I'm
gonna go ahead and save that.

So we've done a pretty nice job of covering the basics of using microdata to enhance our recipe semantics, however, the
next section in a recipe covers nutritional information. You can see we have Serving size and we have Calories. Now,
that's gonna actually require us to reference another schema in order to accurately define it. Now that's worthy of a
longer discussion, so we'll cover that next.

Nesting rich data

- There will be times when using micro-syntaxes where you're gonna need to reference a newschema inside of another
one. In our Recipe, for example, we wanted to find the nutritional value of our Recipe but since nutritional information
has its own schema we're gonna need to properly scope it, before we can reference its properties. Now to illustrate this
I'm gonna be working in the blog.htm file found in the 04_07 directory. It's really just sorta picking up rightwhere we left
off. And what I wanna do is just quickly, I wanna jump over to the schema.org/Recipe schema and you'll notice that for
the properties for Recipe we have cookTime, cookingMethod and then the expected type of data.

So Duration, for example, would be a time duration. CookingMethod would be Text.Ingredients would be Text. But for
nutrition, the value is NutritionInformation. Now this is actually its own schema. So essentially what it's saying is, is once
you use the nutrition property you have to actually reference an additional schema. If I click on NutritionInformation,I
can see that, "Hey, this references "NutritionInformation, which is part of "StructuredValue which is Intangible, "which is
in type of Thing.

You can see sort of how complex a lot of these things actually get. Inside that I'll find properties like calories,
fatContent, sodiumContent, cholesterolCount, all sorts of stuff that I could add to this. So I'm gonna do exactly what I did
before in our previous exercise. I'm gonna go up to the URL. I'm gonna copy this and then I'll need to go back into my
code and scope out just where the Nutrition Information is gonna be found. So going back into my blog.htm I can see
that I have two heading 4's right here. Serving size and Calories per serving that serve up my nutritional information.

Now obviously, I need to scope this so the first thing that I'm gonna need to do is create a new section around those two
elements. So I need some type of container that allows me to scope this. I could use something generic like a div but
a section actually has a little bit more semantic value here. So I'm gonna go ahead and wrap those with a section
element. Now once I've done that, and just to make this a little bit more readable, I'm gonna go ahead and clean this up
a little bit. Inside the section I'm gonna have to, once again, do an itemscope and then I'm gonna have to do itemtype.

And that value is gonna be equal to NutritionInformation. Now because I'm using itemscope on this section that again is
telling a user agent like a search engine that, "Hey, Nutrition"Information is gonna be found within just this section." So
I'm scoping it only to this section.And that allows me to use the NutritionInformation properties. So for the first h4, for
Serving size I can go ahead and use the itemprop value and the itemprop value that I'm gonna use is servingSize.

And once again I'm getting that from my NutritionInformation schema. Now to make life easier on myself I'm gonna go
ahead and copy itemprop and then for the calories I'm gonna come inand give it calories and then save that. Now
remember, NutritionInformation is only scoped to this section. So if I come in and finish all of my rich data I can
immediately go right back to using all the properties for Recipe because even though this rich data is nested I'm still
inside the main element which is scoped to Recipe.

So at any point I can go back and start using those Recipe properties again. For example, if I go to all these individual list
items those are ingredients. So I can go ahead and give them an itemprop of ingredients. Now since I have to do that
multiple times it's easier if I just copy that.Then I can paste it into each list item. This will go ahead and identify each
one of these as an ingredient including this 1/4 cup of roasted pumpkin seeds.

That sounds delicious. And if I scroll down a little bit more I can see that I have some directions and I can finish this up by
going to the ordered list and giving it a property of recipeinstructions. Now, more than likely you've noticed here that
I an using an ordered list yet I'm still giving it a value of 1,2,3,4. Now a lot of the stuff that you learn when you're using
micro-syntax is trial and error. Now I would normally never do this. I would let the user agent handle that because I'm
using an ordered list but because search engines and other user agents are using these itemprops to come in and pull
this data out, I wanna put the 1,2,3,and 4 here just in case somebody is formatting this without the benefit of html.

So I'm going ahead and adding those things and then through the use of CSS I'm turning offthe default
numbering. Alright, I'm gonna go ahead and save this. Now if I were to preview this in my browser we wouldn't notice
any difference at all. But what I've done is I've added a wealth of semantic data that's specific to recipes. And as you can
see, adding these micro-syntaxes can get a little complex. It's really best to familiarize yourself with a specific syntax and
then research the schemas that you want to use before structuring your data. It's gonna help you structure your data
the right way and it's gonna insure that everything is scoped properly.

Now before we finish up discussing micro-syntaxes I wanna show you how to check your page's semantics to make sure
that your data is formatted correctly. It's also gonna show you the practical application of all the hard work that we've
been doing. And we're gonna do that next.

Checking page semantics

- If you're going to put in all that hard work to add extra semantic data to your pages, it would be nice to know if you've
done it correctly and what value that data actually gives you. Well, thankfully Google has a structured data testing tool
that makes it easy to do just that. I'm back in our blog, this time opened from the 04_08 directory and the reason I've
opened it from there is because there's a little bit of extra information in here. You'll notice, for example, that if I go
down into the reviews, you can see that I've already added a little bit more micro-data there that's specific to the
reviews themselves.

Okay, so what I'm going to do is I'm going to select all of this code, and then I'm going to copy it. Since I don't have it
online, I want to use Google's structure data tool to do this and what's nice about this tool is I can either give it a URL of
a page to check or I can just paste HTML directly into it. I can find this at
Google.com/webmasters/tools/richsnippets. Now, I will say that his URL moves around a little bit, so what you really
want to do is just go to Google, or any search engine, and type in Google structure data testing tool and it'll lead you
here.

So, here we are, the structure data testing tool, and notice I can pass in a URL or I can pass in some HTML. What I'm
going to do is replace all the content with the HTML that I just copied from our blog page. When I hit PREVIEW, this is
going to do two things for me. It gives me a nice little preview of what this page would look like, in terms of search
results. Now, because it's not live online, the preview image isn't showing up here but it is showing me the square here,
it's telling me that hey, there is an image available.

And if this were live online it would preview it. I also get to see that some of the actual data that I added, prep time 10
minutes, 350 calories, is being displayed as well, so that's pretty cool.Notice that I don't see any summary of this
because, of course, it would depend upon whatsomebody had searched for. That preview's nice but there's a lot more
to this. This tool actually shows me the Extracted structured data. It shows me all of the things that it's pulling out of
here. Notice that it's showing the first item, which is scope to recipe.

It's showing the name, the date that it's been created, the image, the author, description, prep time, so all those things
that we placed in there, it's showing me. In fact, notice that for nutrition it says this is item 1. Then it has the individual
ingredients and the recipe's instructions. Now you can see why I sort of number those individually, because if I didn't
add those and I let the HTML's ordered list do those, as Google pulls this out, it would just be like one run-on
sentence. Now if I scroll down, I can see Item 1 is the nutritional information, it's pulling theserving size and the calories.

I can see that I have some aggregate ratings. Then as I go down, uh-oh, I begin to see the individual reviews but it
appears that there is a problem. This is another great thing about this tool. It's going to show you if there are
any problems with the way that you structured your data. You'll notice that it says, "Hey, no rich snippet "is going to be
generated for this data because "it appears to include multiple reviews of an "item, but no aggregate review
information." Then it has some more information that I can click to learn a little bit more about that. Well this is
confusing because it does say that I have aggregate reviews.

So what is the problem with this? Well, it all comes down to a problem of scope. A lot of times you've got to do some
trial and error, you've got to read a little bit more about it. But if I go back to my code, I can see that the recipe itself is
scoped to the main element. However, the main element ends before the reviews begin. So, when this one is scoped to
aggregateRating,notice that I'm using the itemprop"aggregateRating, it doesn't really belong to anybody.

This property belongs to nobody. It's supposed to belong to the recipe. If I go out to schema.org and I look at
Recipe, because it's a creative work, one of its properties is aggregateRating. Right now, this is just a floating
aggregateRating that doesn't belong to anybody because it hasn't been properly scoped. What I'll need to do is, instead
of having just the main contents scoped to Recipe, I'll need to really scope the entire page. To do that, I'm going to cut
itemscope and itemtype from main and I'm going to paste that onto body.

That way, it'll apply to the entire page. Now, there are pros and cons to scoping the entire page like this. I mean, is the
entire page really talking about the Recipe? We have navigation, we have footer information, so maybe not, however, in
terms of the way I've structured the page, this is going to be a very quick and easy way to get this done. So really, one of
the things that this forces you to do, is how does my information relate to each other and how is that going to affect the
structure of my page so that I can make sure everything is relatable? Alright, I'm going to go ahead and save this.
I'll do another select all and copy it. And then I'm going to go back into my testing tool and then I'm going to replace the
existing HTML with my new HTML and now when I preview it,automatically I can see some changes down here in the
preview. I can see that the four star rating comes through out of 200 reviews, I still get my 10 minutes and 350 calories. I
can see that this structured data is making a real difference in how this page is being presented to people that search for
it and how search engines are parsing that data. If I go down through, I can see that here's all my extracted data and
here are all my individual reviews.

And I'm not getting an error message and that tells me that each one of these reviews is indeed being pulled out and
does relate to the recipe. So the structured data testing tool's a great way to see the practical application of your micro-
syntaxes at work. It also helps you verify the data that's available to search engines and other user agents. It can also
help you troubleshoot your structured data, which can be invaluable for those that are just starting out with micro-
syntaxes.