Advance HTML – HTML Attributes

HTML Attributes

Hello and welcome again to this lesson on HTML attributes the attributes in HTML is additional information about an element and we can add this additional information right inside the opening tag in the form of the name is equal to value.

To show you an example let me call our common core element.

Remember we use it to hyperlink to another website and to do so we add inside the opening a tag its half is equal to and then inside codes we provide the link so each ref here is an attribute for the anchor element that provides the additional information of the linked website moreover this graph is the attribute name.

And this link is the value.

So this is how we can add attributes.

Another example we have is of the image element that is AMG that we use for adding images on the website and inside this opening AMG tag.

We mentioned a source that is as our CE is equal to and then the file location again here as I see in the attribute name.

And this file location is the value the attributes are not limited to a few elements.

In fact, we can add attributes for any element in each Djamel however for most of the elements adding attributes is optional but on the other hand for some of the elements it’s essential to provide the attributes and these anchor and image elements are such examples where we have to add the attributes.

Otherwise they won’t work clearly if we want to hyperlink then we have to provide the linking website.

So this stuff becomes mandatory.

Likewise for the browser to load and display the image we want.

We definitely need to provide the file location of the image otherwise it won’t know what image to load.

That’s why in both cases we have to provide the attributes talking about the optional attributes which are not mandatory but we can add them and we want to provide some additional information like the first one we have in the list is the Lang attribute for telling about the language of the content we generally add this attribute inside the opening HTML tag to specify the language of the entire page content and

we type it as language is the attribute name then net is equal to and provides the language code.

These language codes are the two-digit country codes and some of the common language codes are the end for English.

And if you want to even precise which region then you can also use e hyphen us for English in the United States.

G.B. for English in the UK I E for English in Ireland.

C for English in Canada NZ for New Zealand.

JM for Jamaica and so on.

But if it is not too specific then you can simply mention it and for English in general.

And here are some of the other language codes for different languages like the ease the country code

for German is for Spanish f for French f I for Finnish AGI for Hindi.

You can easily find out language codes for more languages online by searching for each team a language

code for the language name you are looking for.

It’s a good idea to add the language attribute as it’s read by the search engines as well.

And if a user has said some language filter by searching let’s say English.

Then the browser will be able to thank your base.

If you have mentioned English as the language so let me add the Lang attribute to our document as well.

I opened the document and then go to the HTML tag and add Lang is equal to and since our pages in general English.

I’m going to add even as the value we have now specified our page content language as well.

Having said that in each team of five we can add this Lang attribute not just to each to your email to any of the elements.

For instance, if you are adding a new paragraph which is in some other language let’s say French then

you can add the Lang attribute to that paragraph element and mention IFRS value.

Now the second common attribute we have is title attribute it’s important to note that this title attribute is different from this title that we use inside the head tag here.

It’s a title element and we are using title tags whereas this title that I’m talking about is an attribute

which is additional information about an element and we can add it inside any HTML element yet we commonly

use it inside paragraph element by adding inside the opening B text.

And this works like a tooltip to show you.

I go to the average team and document and here we already have a paragraph that I added in the previous lesson on div elements.

I go to the opening B tag and add the title attribute and inside quotes let me type the value like let’s

say this is a paragraph let’s now save the document and then go to the web page before I refresh if

I hover over the paragraph nothing happens but when I refresh the web page I can see this tooltip with

exactly the same value that I provided for the title attribute.

HTML Attributes

So yes we can add the title attribute to any element for providing the user with additional information

like this tooltip when they hover over the content and we often see this on various websites.

So you know know how we can add this and then we have style attribute for adding CSO style properties

that I use in the previous lesson as well for adding word background color and full color inside the

diff elements the style attribute is a very essential topic and I’ll be talking about it more in detail in the as lessons.

Next, we have certain height attributes for specifying the width and height of any element D width and

height actually we accept all school and we don’t really use them nowadays because I can easily modify

the height and which properties using CSS but just for demonstrating.

Let’s say I have added this image tag for adding an image on the web page.

Now inside this image tag I can add weight.

Let’s say 20 and this will make the image 20 pixels wide I can also add the height attribute as well

by adding height is equal to and then let’s say 50 and this will make the image 50 pixels high.

This example also shows that we can add multiple attributes for the same element.

For this image, we have provided three attributes the first attribute is the source attribute.

The second attribute is the word attribute and the third one is the height attribute.

After that we have class and idea attributes while class and 80 are two very common and important attributes.

It’s an HTML Landsea assess and have prepared a complete lesson on class and idea attributes and providing

a class or idea attribute helps us in identifying an element with the class or I.D. name.

The concept is simple so let’s assume that you have three paragraphs on your document and if you provide

a class attribute to a paragraph let’s say to the second one and you can give any name to that like

for instance, I give a name example to this class then anytime I need to call only this paragraph then

I can call it by using the class name.

Example, in the same way, we can also give an idea to an element and it does have the same rule as a class

but the main difference is that we can provide an idea name only once.

In other words, if I give this paragraph an idea with value let’s say example 2 then I contribute this

idea value anywhere in the same document or page.

In other words, if I have given this paragraph an idea name of example to then to this third paragraph

if I want to give an idea name then it can be.

Example 2 because we have already given it once I can name it.

Example 3 example for on any other word but not.

The idea does not allow that.

On the contrary, we can provide the same class name to multiple elements as I can give the first and

third paragraph.

Also, the class name of example and this means that when I call the class name example then all these

three with the class name example paragraphs will be called.

Furthermore it is also possible to provide an element with both class name and I.D. name.

It’s completely fine.

Secondly, if you are wondering why we need to call the elements well we need to call the elements by

class name or I.D. name in CSF when we are designing the layout of the web page.

And therefore this makes it a topic for science lessons.

And that’s why you will learn more about ideas in classes later as well.

So these are the commonly used actually boots and you learn about a few more incoming lessons but for

a complete list I would like to mention an important resource to explore all the HTML attributes the

resources Mozilla developer network.

You can search on Google by typing each attribute list followed by MDA and that stands for Mozilla developer

network and the first link that says HTML attribute referenced by Mozilla developer website will take

you to the list of which general attributes.

So I am on the website and on the left are different attribute names and in the center are the elements

that we can use.

Numbered now for some of the attributes such as this class attribute.

You’ll find this global attribute mentioned which simply means that we can use this attribute with all

the elements.

Further when you click on the global attribute then it will open a complete list of global attributes

and then you can click on any of the attributes to know more about it.

On the other hand, if you click on element name instead and it will take you to the element description

page and then below you will find the different attributes you can use with the element.

So it’s a vast resource but I would say that now and you’re just learning it’s GMO.

You don’t really need to learn all of them.

In fact many of them we don’t even use often and some of them are used for other languages such as javascript

which is another language?

For now it’s fine to know these common attributes that I have mentioned in this lesson.

So this was about the attributes in Yemen.

So keep learning and see you in the next lesson.

Also, Read –

 

Leave a Reply

Your email address will not be published. Required fields are marked *