Hi, today we're gonna talk about
some of the tags that you may
find extremely useful as you go and
try to add blocks of code and
simple snippets of different
things to your web page.
I know that it can seem overwhelming
how many tags there are in HTML5.
So today, I'm going to try to break
down some of the most useful ones.
Now, I realize it may seem overwhelming as
I said throwing all these elements at you.
You're not supposed to memorize them
all by the end of this lecture.
Instead, I'm really just trying to give
you a taste for what's out there so
you can start playing with your own code.
So, one of the first things you need
to decide when you're coding is,
which tags are you going to use?
There are the generic kind of what
we call block tags, paragraph and
div, that break your
code into nice sections.
Paragraph is kind of self-explanatory,
and div gives you a way to put
groups of content together.
But the problem with both div and
paragraph is that they're very generic.
So we want to move over to the idea
of using these semantic tags,
such as header and nav, footer and figure.
And we talked about those
in an earlier video.
Some of the other block tags that you may
not be familiar with are listed here.
The first one are the containers.
Containers are simple things where you
can put like-minded code together.
So you might have an article or
an aside, a section made.
Again, they almost seem
generic in their names.
But as you grow more comfortable,
as you're designing your website,
you can start to see oh,
this isn't a generic section.
This really is an aside.
The next block tag is hr,
or horizontal rule.
And it's really an interesting idea
because it doesn't contain any
text at all.
Just to remind you, block tags
are tags that have the display block.
It means it forces a new line above and
below.
There's never going to be
anything next to it by default.
So our hard rule will just put a single
line across your page, simple yet
very much used by many people.
The next one is address.
This will go ahead and be a block tag, and
it doesn't format your address
any differently than other text.
But what it does is, it allows screen
readers and other assisted devices
to quickly and easily find if
they're looking for your address.
 will be another
block tag as well as details.
Now the details tag is very interesting
in this kind of quote you get into work.
And what it does is elastic
hand having drop down open and
close idea with your text.
Now, just to warn you it is
not implemented in Firefox so
if you're someone with Firefox who
tries to run it its just gonna kinda
default to this open idea.
Alright, so there's , ,
 and s.
I've told you what they were.
My guess is, you still have no
idea what they really do, so
let's take a look at a quick example.
So here would be an example
of the hr element.
It's just a simple line across the screen,
nothing too fancy, but very recognizable.
The next one, the address element.
In this case, the browser does
italicize what's inside the content.
I had to put my own end line here, but
otherwise it just looks
kind of italicized.
But you can't be sure that it'll
be italicized on every browser.
It's really specific to Chrome,
Firefox, Safari et cetera.
But the important thing to know is
that there is semantic meaning here.
Here we have a block quote, and what block
quote does, is it lets, indents the code
and kind of lets people know that
there's a quote that you're look at.
One of the things that I put inside my
blockquote, was I put in a cite tag, so
someone can know right away
that I cited Napoleon Hill.
So if someone's doing a search for
Napoleon Hill,
this is going to up the chances that a
search engine will link back to your page.
The last one, detail,
is kind of combined with a summary tag.
So I'm going to go ahead and click here
and you can see that it opens and closes.
So the default is to have it closed and
then open up when someone clicks on
the little arrow icon right here.
Now one of the things I mentioned is
that it's not supported on Firefox.
So if you're looking at
this page on Firefox,
by default you're just going
to see it in the open context.
So let's go ahead and go back to some
other tags that aren't block tags.
We're gonna do some inline tags.
Again remember, inline tags just means
that you can put it into the page and
go all in a line one after the other.
You don't need to break things up.
So span was the original inline tag for
plain text.
You would put span around some code,
and then you could go ahead and
style it any way you wanted to.
Now, in addition, we have cite,
abbreviation, time, code and
then the subscript and the superscript.
Now, if you're watching closely you may
have noticed I left a little typo after
abbreviation there.
So make sure you go ahead and
put in the less than or greater than sign.
But let's look at examples
of this code as well.
Here I have my inline elements.
The site basically makes it easier for
people or bots to search your code, so
I went ahead an put this code
right inside a site tag.
Now, again, this particular browser
happened to style it differently,
but that's not always
going to be the case.
Another new tag that has come along
recently is the abbreviation tag.
So if you notice, right along here,
I've included abbreviation inside the box.
Now, if you can, watch what happens
when I put my mouse over the Sunday,
Monday and Tuesday.
As I hover over it, it's very
small probably on your screen, but
you can see that the expanded version
of the abbreviation pops up, Sunday,
Monday, Tuesday.
Now, from an accessibility screen point,
it can actually go ahead and
read the expanded version.
But even for people who aren't using
screen meters, I actually find that
you need to do something to let people
know that hovering over is even an option.
Most people wouldn't think about that.
The time attribute is another one
that is just inline and most of
us won't even know it's there but it
allows you to give extra semantic meaning.
So the party starts at 9 PM.
It makes perfect sense to us, but
the party took place on New Year's Eve.
Notice again, that's actually a time,
even though it's not our typical
numeric time, it is a time.
By putting in different time tags,
it's also much more likely that if someone
is accessing your site on a mobile phone,
it'll pop up as knowing
that it's an eight.
Sometimes you would like to be able to
identify parts of your code as code
fragments.
This happens to me all the time
because I'm a computer scientist.
So the code elements tend to be
displayed in different font but
it's not always the case.
But code is just a nice
way to break it up and
let people know what is this
crazy stuff people are typing?
Oh, it's code.
It's not supposed to make sense.
Finally, the last two are subscript and
superscript, and these are used to create,
a lot of times, mathematical formulas.
So, you can see here, I've raised up
the three, and I've lowered down the two.
So, I've given you kind of
the general block tags,
the general in-line tags that people use.
And there's other tags that
people use quite often
that you may see when you're
looking at their pages.
The issue with these tags is
the thing when I say need more.
It's really weird to use these tags unless
you're also incorporating them with
JavaScript or some other elements that
you probably don't know a lot with yet.
So these include the button,
the , , ,
, which stands for
bidirectional orientation, and
then the  attribute
along with .
Now, people really like these,
but they tend to need JavaScript.
So I'm gonna show you a quick example.
But I'm not going to include the fancy
addons you would need to use then.
Cuz that's not what this course is about.
Right now, we're just learning these tags.
So let's take a look at them so you can
see what they look like visually and
understand that there not
actually functioning yet.
So, my special tags that need more,
I called it.
Little word that you might not even
be able to see it because it's so
light in screen but you can see I've
included some open and close buttons.
They don't do anything but
they look really nice.
So go ahead and
put them in if you want but
it may confuse people that
there not actually operational.
The next one is meter, and
you've probably seen this before.
Basically how this one works, let me
actually bring up the code for this one.
You can see for the meter one I've
actually gone in here and put in meter
minimum value of zero, maximum value
of 100 and my current value is 50.
So you can see it's colored in until about
pretty much half way through all right?
Same here with the next one,
I've set it to 25% Here I just want to
show you that it doesn't
always have to be 0 to 100.
You can start at 5 and go to 10,
and I've set it to 8, which is 60%.
So that's kind of how the meter works.
Progress is very similar to meter in that
it shows kind of a proportional value.
Now, with progress, you're expecting
that you're doing something where
eventually you'll get to 100.
So you've taken the surveys
before where as you filled in,
the progress bar fills in.
Again both meter in progress tend
to use JavaScript to update them.
The next one I was going
to show you is iframe.
Iframe is used to nest
content in each other.
It is not equal well supported
by all the browsers, so
you really want to explore who can
use it and the best way to use it.
And you would definitely want look into
options, such as height and width.
So right here in my iframe, I've said hey,
let's go ahead and link back to my page.
And it puts my whole web page inside
this little block of the page.
Down here, I went ahead and said hey,
let's do that iframe again, but
this time let's go ahead and have it
take up a much bigger width, all right?
Now, one thing to notice is
I can still click in here.
I can do all the things.
It's as if I have a webpage
inside of a webpage.
The last one.
Let's go down here.
I want to show you is
a bidirectional orientation.
And this one would be something you would
use if your particular language tends
to not just go from left to right and
instead goes right to left.
So bidirectional orientation
take either rtl which stands for
right to left or
ltr which stands for left to right.
And you can go ahead and put in the text.
So here is my going from left to right and
here's that same thing
going right to left.
I didn't really give examples
of the map with the area.
Because, again, this is one where you
would really need to understand JavaScript
to really embrace what it's doing.
So I realize I went over a lot
of tags with you just right now.
And some of the code, you probably
understood and some of it, you didn't.
But all of the code is online,
so you can go ahead, you can download it,
you can play with it, you can change it.
But as you code, you're not
supposed to go in and be like, oh,
I'm going to try to use every possible tag
I can to show how much I know about HTML.
No, use the most specific tag possible.
Whenever you're not sure go and ask
somebody else say what would happen if I'd
trying to look at this page with my eyes
closed, what I understand what's going on.
The second thing you need to understand is
that sometimes your tags just don't work.
Now, there are two reasons that
your tags may or may not work.
The first one might just be
that you have a syntax error.
So, make sure you run your
code through a validator, and
that will help you find places
where you haven't closed tags.
This is especially
important if you nest tags,
meaning you put one inside the other.
The other thing you really want to do,
is you want to run your
code in multiple browsers.
So, even if your page looks great
when you're running it in Chrome,
make sure you check it out on Firefox.
If it looks great on Safari,
make sure you check it on Chrome.
It's really important that
you make sure that your pages
can be reachable to the greatest
number of people possible.
And really, the only way you can do
this is by keeping your code simple,
succinct, and you're always validating.
Thanks.
