So in this video we're going to learn about a few more HDMI elements that are pretty common.
So we've seen how to write comments we've seen head and body doc type in HCM owl as well as H-1.
Now we're going to learn about a bunch more things that can go in the body.
So in the slides there's a little cheat sheet here of some of the things that we're going to cover so
we'll be referring back to this in a little bit.
But before then I want to show you the MT-NW element reference.
So this link is in the description.
It's also in the slides.
You could also just get there by googling M.D. n element reference and it's basically a web page that
lists all the elements in HMO.
So some people are surprised at how many there are other people other students that I've heard are surprised
at how few there are there is around.
And this is just a guess.
I haven't counted but around a hundred or so this page has all of them.
You can read about every single one so you know we could search for body and we could read about body
of which we've already done.
What I want to show you though is that there are a ton here.
There are probably 10 to 15 that you will use all the time.
I'd say if you do about half of these in the last few months none of these really what I'm trying to
say is there's a lot of things here don't feel like you need to know all of this.
This is one of those times where I'm going to tell you it's not about memorization.
Let's go back to our H-1 and let's do a little bit of reading about once.
So I'm just going to search on here for each one quick on the corresponding link and basically an H1
down to an age six are the six levels of document headings.
So in each one is going to be the most important heading on your page it's the largest heading down
to an age 6 which is still a heading but it's the least important heading.
So you can see there's an example here H1 H2 which three all the way down to age six.
This is the resulting age to a male.
So here's another example here where we've got some H1 and some other tags.
And we end up with this heading element.
Well go ahead and make a few more h ones.
Sorry a few more Hedding elements will do in H-2.
We won't do all of them
and we'll do one more.
And let's change this to be an age three.
Let's do actually in age six.
You can see how small they get and let's save it.
Go ahead and open up our page again and you can see that we have a large Hedding slightly smaller heading
.
And this absolute smallest heading that we can go.
So one other thing about H-1 and other headings is that they are something called the block level elements
.
So what that means is each one gets its own line.
So even if I put them on the same line and I refresh the page every one of them gets a separate line
and pushes everything after it to a new line.
So this is important.
This will come up because there are going to be other elements that do not behave this way and those
are called inline elements.
OK so you undo that.
Make sure we have this spaced correctly.
Let's go ahead and add some text here.
So I'm going to let's say that this is just a little bios I'm going to put some text here.
This is some text.
Blah blah blah.
And this I just want to be regular text.
I don't want it to be big or highlighted or anything so I could just write text like this.
Can I add a bunch more here.
And I refresh my page.
I get this giant thing of text on one line but let's say that I realize I actually want a line break
right here.
These are two paragraphs of nonsense to do that I can use the paragraph tag.
So if you went back here and we search for the tag
you'll see that the tag is just used to represent a paragraph of text and paragraphs are block level
elements.
So that means that they also go on their own line.
So let's add a paragraph in here.
So I want to split here and here sorry here.
So I just wrap this in a paragraph tag like so
and then I'll add another paragraph tag in front of this
and afterwards there we go make sure we save it and we refresh.
And now we have two paragraphs that are on separate lines.
So let me go and get syntax.
Let's just do Lorem Ipsum
go to a generator and let's just pull a bunch of text here and copy this over so you can see may have
something longer like that.
It's actually a paragraph so it's not just one line but it's a paragraph and it has spacing after it
before the next paragraph.
So now that I have my paragraph here let's suppose that I wanted to make some text stand out I want
to italicize the title of a book or I want to bold a key word for instance.
So there are ways of doing that with each team I'll I'll show you one here.
Let's say I want to make simply dummy text bolded.
So to do that I could write a B tag around it and as I mentioned earlier this is actually not the best
way of doing this anymore.
We're going to show it to you here briefly just so you can see it.
So I refresh the page and you can see simply dummy text is bold.
And more importantly or equally importantly it doesn't take up a new line.
It's still in line.
So there is something called a block level element which we talked about these take up their own block
level.
This paragraph does this takes up its own block and there are inline elements that just slip in and
won't actually force something down to a new line.
So if we go back I did say it's not really the best way of doing it anymore.
We're going to talk about that in a feature video about semantic markup basically.
And each time at 5 your email now needs to be meaningful.
So by simply saying something is bold it doesn't really say anything about the text.
So rather there are a few options.
The most common one is to use strong and so strong has a little pull a little bit more meaning it will
do exactly the same thing.
You will not notice a difference here but the idea is that by saying this is strong rather than bold
that means something a little bit more.
So you'll see in the future video really what this semantic markup is all about.
What a shame all 5 is trying to do.
But for now just know those are two ways of making something unfold.
Likewise there are few ways if I talus using some text.
So if I want to italicised Lorem Ipsum I could do the I tag
you can see I have I tell Assayas form ipsum there but the better way of doing it is using the E-M tag
which is for emphasis and it looks exactly the same.
And the idea again is that emphasis means something more rather than just saying I.
So we want to separate and this is what my five did.
We want to separate our styling from our structure.
So by saying something should be italicized or bolded that's actually the styling of it.
But by saying something is stronger or something is emphasized that's not how it's styled or how it
looks.
That is more about the structure of it and what it means.
So in summary we've got H-1 386.
These are block level elements.
We've got paragraph's which are also block level.
They take up their own line and then we've got strong and E-M or emphasis.
And these are inline elements that let us build our italicize things.
But really what they do is call something out for being strong or being emphasized.
And our browser just decides to make it italicised or make it bold