All language subtitles for 003 Attributes, Classes and IDs

Let's not learn about HTML attributes,

classes and ids.

And then also learn

about a couple more different HTML elements.

So what are attributes?

Well in HTML some elements can have attributes

and these attributes basically describe elements.

So that's for example create a link

and this link will be inside of this paragraph, okay.

So as you already saw we can nest elements

inside one another, for example this h1 is inside the body

and this p element is also inside the body.

So the child elements of the body element okay.

So I forgot to mention that in the last lecture.

Anyway so let's not add this link element

inside of the paragraph.

And for that, we use the anchor element.

So there's an a, and then in here

we put a text that we want to be displayed on the page.

So just like before and the paragraph, for example

so here I want to place a link to my profile on Udemy.

So let's say Jonas on Udemy

but now how do we tell the browser where this link

should actually point to?

And that's where the attributes come in.

So, as I said, we used attributes to describe elements.

And in this case, we described this anchor element

using the href attributes.

And so href stands for hypertext reference.

And so here you put the URL where this link should point to.

So let's actually get my profile page on Udemy.

So Jonas Udemy that's actually a link,

I think yes, so let's copy this and put it here.

Okay, give it a safe.

And now well here we have to reload it.

Sometimes it doesn't work.

Sometimes we have to reload okay,

so when you don't see it changing right away

just reload and then it will work.

So here we have this now blue link.

And so that's the standard format of any HTML link.

And when we now click this indeed,

it goes to my user page here on Udemy.

And of course you can use your own link

or whatever link you want to use.

And then we can go back and we're back on this page.

Okay, so that's what we used this href attribute for.

We described the anchor element by telling it

which URL it should go to,

whenever we click on the link.

Now here on the page,

you can actually see that there's text here.

So this link is right in line with the previous text.

So the text here in this paragraph

that's why we call the anchor element an inline element.

So it flows in line with the rest of the text.

Now on the other hand, for example

this h2 element here is a so-called block element.

Because as we see here, this heading is not in line

with the text of the previous element.

It created a new line

which only contains this content of this heading right?

So all of this year is this huge block.

And so it's a block element not an inline element, okay.

So we can actually include this link here in a sentence.

So let's say you can learn more about it

and then let's say on Udemy.

All right here, we need a space, okay.

And so now this looks like a normal sentence

and then with a link in it,

and we can even put a period after it ,great.

So let's check out another element which needs attributes

which is the image element.

So let's do that after this somehow space here

and for the image we use the img tag

and then this source attribute.

And then in here we can specify any image

from the current working folder

or we can also set an image URL.

So let's do that.

So what I'm doing here is,

since we're talking about HTML and CSS on this page,

I want to copy this image here, okay.

So the image address, so I'm getting the image address here

and now I'm pasting it here.

And so this jpg image is now the source of this image.

Okay, and now you see here that

with the auto save and edit this closing slash

and that's because the image element

does not have a closing tag.

It only has an opening tag which is a img of course

but then we don't have a closing tag.

And so we can close this opening tab

by the end using this slash here at the end of the tag.

But it's actually not mandatory,

it works just the same without this one here.

Okay, so image doesn't have a closing tag

because we don't really put any

like written content in here.

It's not like we say now a course image

or something and then close the image, right.

That would make no sense.

And so that's why images don't need the closing tag.

Now if we check it indeed here now is the image.

Okay, so that's the source attribute.

And as you see,

different elements have different attributes.

So for example

the href attribute is not going to do anything on an image

and the opposite is true for the source attribute.

So if we use source here on the anchor element,

it's not gonna have any effect.

And so when you really learn HTML properly

you gonna learn exactly which attributes

you can use on which elements.

But it's actually pretty straight forward,

and you get used to it pretty quick.

Now there are two very important attributes that

we can actually use on all elements

and which we can use to identify them.

And these are classes and ids.

So we use classes and ids to essentially name elements

so that we can then select them in CSS

in order to style them.

And actually we also use ids and classes to select elements

from JavaScript when we do dumb manipulation.

So classes and ids are crucial to identifying elements

and especially classes.

And here's how that works.

And again we can add them on any element.

So let's add one here to this paragraph.

So all we have to do is class

and let's call this one the first okay.

Because it's the first of these two paragraphs

and then here class again and you guessed it.

This one is gonna be called second.

And we gonna use this in the next lecture

to then select the two paragraphs

and style them differently.

So then according to these classes,

now as I said beside classes,

we also have ids and they work like this.

So let's add it here to the image

and let's call it course image just like this.

Now the difference between classes and ids

is that ids have to be unique, okay?

So each id can only be used once on the page

while classes can be used over and over again.

So I could have more paragraphs called second

but I could not have another element called course image.

All right, in practice we actually almost never used ids

to style elements or to select them from JavaScript.

It's just a better practice to use classes.

Okay, and now to finish let's create an HTML form

so that we can use some more attributes.

Okay, so let's do that here after the image.

And now I'll also introduce you

to the idea of basically creating boxes.

So we want the contents of this forum to be in a box.

And so there are many ways of creating boxes in HTML.

The most generic box is a div.

So let's say div

and let's give it a name here using an id again,

does that so we use classes and ids in different places

so that you can learn how to use both.

So I'm calling this box here your name

because that's what we gonna do in this form.

So just an input asking for the user's name basically.

Okay, and here it already close the element for me.

Or and maybe you're also noticing that for the names here.

So the id name but also for class names in CSS,

we use the dash to separate two different words.

So in JavaScript we would use camel case.

So course, and then like this, right.

But the convention is yes

as is to write it like this.

Of course it will also work the other way

but this is just a convention, okay.

And let's create just a heading for this form,

your name here, okay.

And you can see that of course we can have multiple

h2 elements here on the same page.

So we have here a secondary heading and here another one.

Okay, so we of course you already have the h2 here now

and there's also this box around it,

but you cannot really see it

but we will see it in the next lecture

when we actually style all of these elements using CSS.

Anyway let's not add another paragraph here

please fill in this form.

And now let's actually use an input element.

And so like that we are then basically creating a form.

So input and then we use the type attribute

to specify the type of data that should be inputted

into this element.

So once again

we're using an attribute to describe this element.

So here we could use a text

or as you can see it we could use button checkbox,

email, file and so on and so forth.

But here we just gonna use text

not then we can even specify a placeholder.

Now we'll just use the auto complete functionality here.

Okay, and we close it.

And once more this is one of the elements

which does not have a closing tag because, well again

it doesn't make much sense to have that here.

And then usually a form also has a button.

And so for that we have to button element.

And in this case it actually makes sense to have content.

And so that's why there is a closing tag

which the S code automatically placed there for us.

Let's give it a safe and here we go, nice.

So we have a nice input and a button,

of course nothing will happen

because for that we would need some JavaScript

but that's not the point of this lecture or of the sector,

but now you know how to create a form like this.

And now just to finish this form

we should actually change the name

or the type of the element of this box here.

Okay, because this is now a form

because it has this input and this button elements.

And so in HTML we have a special element for that,

which is instead of div we use form,

okay give it a safe.

And it looks exactly the same but this is more semantic.

What this means is that the form element

better describes the content that is inside of the box

than just the generic box that is the div okay.

So the div element is really just a generic box

which has no meaning at all.

And so that's usually not a good idea

for many reasons for example for SEO,

when Google searches your page,

it's better if it knows exactly what each element means

than just having generic boxes without any meaning at all.

Okay, so using the appropriate element,

according to the content that's in it

is the idea of semantic HTML.

In this case we are creating a forum here

because we have an input and a button.

And so we use the form element that HTML gives us

just for this purpose.

Okay, it looks exactly the same as a div element,

but it has meaning and so it's semantic.

Okay, and that's it for this video

in the next one we're finally gonna style all this,

using some HTML.