Hi everybody.
Today we're gonna be talking about
some of the newer HTML5 tags that
I like to refer to as the semantic tags.
This is going to continue our conversation
about how we're trying to make our
webpages the most accessible
as possible to as many people.
Before we begin talking
about specific tags,
though, I want to talk to you
about the design of your webpage.
Really, the most important step
in your web design is the design.
Once you're down pat with the different
tags and typing in files,
we're gonna change our focus to
how you want to lay out your page.
And you need a really clear
picture of what you want to create
before you can begin coding in earnest.
So let's take a look at this sample page.
Again, it's just a quick sketch, and
it shows that I would like to have
a header section, a footer section, and
a few other sections embedded
in between the two of them.
Once I know that that's the kind of
design I want, I can begin coding.
So you may recall that one of the most
common tags used to be the div tag,
because in the beginning, kind of dum,
dum, dum, you did everything with div.
You would go through your page,
group it together, and
put each group into a div tag.
These divs almost always had some sort of
special class or ID associated with them.
So for instance,
one div might have the class of header,
another the section, another the footer.
This way,
you could back to your design and
really break it up in a way
that worked best for you.
The first tag that I'll be talking to
you about today is the header tag.
The header tag is typically used
to group together introductory or
navigational aids.
So you'd put in your title,
perhaps your navigation bar,
anything that really lets the user know
right off the bat what this page is about.
The thing I want you to understand about
the header tag is that it is a block tag,
and nothing more than that.
There's no special formatting or
anything along that line.
However, it does let the user know
that this is the header section.
Now, most people will never see the tags.
Remember, the browser looks at the tag and
doesn't display it,
instead formats its content.
But for
people who are using screen readers or
other assistive devices,
this is a great way for
them to find what they're looking for
if they're not using visual clues.
Another point I wanna make
is that the header tag
should not be confused with the head or
different heading tags.
This is going to happen to you a lot.
Just remember that the head tag is for
metadata, and
the header tag is more of just an aid.
The next tag I'm gonna talk to
you about today is the nav tag.
The nav is basically a section of your
page that links to other pages or
parts within your page.
So, inside your nav you're not going to
have links to Facebook, or Google, or
your LinkedIn account or
anything like that.
Instead, it's really just links that
go to other parts of your site.
So for instance, here I've made
unordered list with three links.
Each of them go to a different
part of your page.
There's a lot of debate, for
better, for worse, as to whether or
not your nav tags should be using lists,
but the important thing is to include
the nav tag to help people
navigate through your page.
Oftentimes, you'll find the nav tag
embedded inside the header tag.
Another tag is the footer tag, and
this is a section that contains
information that is pretty typical for
the bottom of the page,
such as copyright data, related documents,
your links to social media.
And while I say that it's usually at the
bottom of the page, this is not required,
nor does using the footer tag actually
make it that it'll show up at the bottom.
So in this example here,
I have my footer tag, my special entity
to make the copyright symbol, and
then my name with a line break.
And then I've also included
a link back to my main site.
Some of our other semantic tags
have a little more oomph to them.
So for instance,
one of the new tags is the figure tag,
and it has a lot more semantics than
the image tag we've gone over previously.
Every figure can include
additional information.
So you can include an image,
you can include multimedia, you can
include a combination of all of them.
But it also has some additional
tags such as the figcaption.
So what this is going
to do is somebody who,
it provides additional information for
somebody who may not be able to see it.
So the picture normally just floats
by itself when its in an image tag,
this lets you say, this text goes
specifically with this image.
Now again, we do have the alt tag,
which helps describe the picture, but
you have to remember,
most of us will never see that.
There are a number of
other new tags in HTML 5,
and it's not really possible for
me to go over all of them.
Instead, you'll find that as you develop
your pages and after you've done your
initial web design, you'll logically
just head towards these different tags.
Some of them are structural elements,
such as article, summary, sections, etc.
Others you won't be using
until we create forms.
Another would be input types.
Have you ever noticed that
sometimes on your phone,
when you click on certain buttons,
different keyboards will pop up,
depending on whether you're
typing in an email or a URL?
These are all things to the new HTML 5.
Email, data, color, etc., tags.
We're also gonna be able to talk about
graphics elements such as canvas, and
also media elements which let you
go ahead and put in your movies and
music of your choice.
The important thing to remember is that
if you're developing your page, and
you find yourself using a lot of divs,
you're going astray.
You really want to use the best tag
available that will give the most meaning
to the users.
Semantic guide tags are gonna help
guide your users to the information
in your page.
And that's really what you want to do,
you want to make your page the most
accessible to as many people as possible.
