Welcome back.
I hope you had a great time completing the challenge on structuring pages.
I know this was a good bit of work because you had to edit so many of the pages.
And, you probably found it a little bit repetitive but,
there was a method behind my madness for doing that for you.
Number one, I wanted you to really get the sense,
that consistency across pages within a site is very, very important.
The other thing that I wanted to get across to you,
was how important developing a structuring strategy is,
at the very early planning stages of a website.
That way you could create templates or
boilerplates that can help take a lot of the work out of authoring pages,
because a lot of that structure can already be in place.
So what I want to do really quickly is go through the finished files so
that you can compare your files to mine.
Now, more than likely, we're going to agree on most everything, but
there are a couple of places where judgement kind of came into play and
I want to talk about those, so I'm going to start at the intro.htm.
At the very top of the page we have our header,
notice I've given it a role of banner.
And that's going to surround the headings and the navigation as well.
Now the navigation which is contained within this unordered list
is surrounded in a nav element with a role of navigation, and
that's going to be that way consistently across the site on every single page.
Below that I have a main element with a role of main and
that surrounds all of the main content.
Now the main content is all contained within a single article and
that article also has a role of articles, so the main has a role of main.
Article has a role of article.
Now, each page has a sort of section of content at the very beginning of it
that you could choose to encase in a section or in a header.
Now, in a lot of cases, this section of content does not have a heading.
It's just an introductory paragraph.
To me, that made more sense to appear within a header than it
did a section elements.
So, on each of the pages, the very first paragraph and or paragraph heading,
depending upon the way the page is written is in a header and not a section.
You'll also notice that this header does not have an area role applied to it
because we've also used the banner role and it's not appropriate to use it again.
And actually it doesn't fit here, it fits within the page header.
Now below that, I've taken each of the discrete sections of the article and
those are the ones that begin within heading three and
I've wrapped those in a section tag.
As you can see, some of these have really big sections.
Others have smaller sections.
Now the intro page, there really wasn't an aside.
There's nothing down here that's related content.
It all belongs to the main article, so I didn't use an aside tag.
And then at the very bottom of the page the copyright information and that sort of
stuff, I've contained within a footer, and that has a role of content info.
As I mentioned, that's going to be consistent across all the pages.
So links, for example, you can see that there's a header up top with the role of
banner, there's our navigation.
I scroll down there is main and article and
just below the article we have that opening paragraph surrounded by header,
and then that's followed there after by sections again.
And as I scroll through this, there's no aside here either.
As a matter of fact, the only page that I did an aside on, was the structuring page.
That may have thrown a couple of you.
You may have taken some time to look through the content and
figure out, where the aside goes.
But again, this is another one of those things, without having a strategy.
Just because one page needs an aside doesn't mean that every page needs it.
And in this case, I felt like the information on the structure page
was the only one that really warranted the use of that aside.
So you will have to think about the semantic usage behind an element before
you commit to using it.
Now, at the bottom, we have our footer, as well.
So now, if I go to next, I can see there is the header, there is my navigation.
There's the main article,
there's another header inside the article that contains the opening paragraph.
Add the individual sections again.
And at the bottom of that, a footer.
Here's the reference page.
Again, very similar.
The header's up top at the role of banner.
There's my nav.
There's main and article, the first paragraph is within a header for
the article, and thereafter we have sections.
Not quite as many sections in this one because we have a long description list
and a table, and then the footer,
andthen finally syntax is going to look very similar, and here's the header.
There's the main and article.
I do have a header inside the article that contains just the first paragraph and
thereafter, we're using sections.
And again, there's no aside here, these are all just individual sections and
then the footer.
So what we really have here, is we have a site that has meaningful structure,
structure that actually conveys semantic meanings.
We have aria rolls, that allow assisted devices, screen readers and
things like that to navigate or ignore specific areas of the page.
It's going to allow search engines to quickly scan the content and
determine what's relevant and
what's related to each other, and more importantly, we have consistency.
Each page is using the same consistent structure.
And that's going to make it much easier for people and
machines to understand how your content relates to each other and
contents relates to each other throughout the site.
And that should be your goal, as you're developing your own structural strategy,
when you start planning and authoring your own sites.