What is an Attribute in HTML with Example?

Hello friends,

Welcome to our this learnvern's HTML series,

I hope that you have properly gone through the previous session on tags.

In the last session, we learned the tags and how to write an HTML program along with it.

We also learned about the main and different kinds of tags like title, body, etc in the last session.

After that,

We covered the meta, the style, and the link tags.

Along with the text-related tags like h, p, em, cite, etc.

I hope you went through and tried all these tags on your systems & successfully were able to run the program.

If you have faced any issues or at any point where you got stuck, you can inform us on forum.learnvern.com.

We will try to solve all your doubts and queries.

Let us start today's session.

Today's topic is Attributes.

Tags were our last topic and I explained attributes with it because tags and attributes mostly come together because is the attribute is a part of the tag.

As you can see in the slide, What attributes are and their characteristics

The first is Html attributes.

These are the special words that provide additional information.

That means when we write the tag, we include the attribute in the same tag, and because of the attribute browser determines the task of what it has to perform.

I repeat, because of the attribute, the browser gets additional information about the task it has to perform.

We know the tags also provide information to the browser regarding the task it has to perform, whereas, with attributes, additional information is passed to the browser that what task it has to perform specifically.

Next,

Each element can have tags or attributes, which define the behavior of the element.

Let me explain this with the help of an example,

If you wrote a tag and assigned a color to it, that tag will perform the same task with that particular color.

So, here the attribute defines the behavior and how the tag will behave.

That means,

If we have defined a color inside the tag, it'll perform the same task with that color.

Next is,

The attributes should always be written in the start tag,

When we write a tag,

We mention the start tag and close tag & and we will write the attribute inside the start tag only.

Let me explain this with an example,

I'm removing the old stuff from the last program because we are going to learn attributes.

I will only keep the stuff that's useful for it.

I have kept the basic HTML structure as it is.

That means doctype.html, which informs the browser that it has to use HTML 5.

Followed by the HTML tag, the head tag inside that title tag,

body tag and body tag closed.

From today's slide, we will learn how to write an attribute.

As you know, the last time we saw from H1 to h6 is the header tags, and p is the paragraph tag.

So, I will include the header tag inside the body tag.

Let's say,

I am adding H1, and inside that, I will write, "hello how are you".

I am saving it like last time.

I will open the browser and I have to run the program so, I am going to the program,

here it is on the file path.

When I click the program_1, the browser will open that program.

That is my program, "hello how are you".

We used the h1 tag which is why the font is looking large.

Currently, the color of the browser window is white & if want to change it and show it in another color.

For that, there is an attribute "bgcolor" I will add that into the body tag, bgcolor =, I can choose any color in the bgcolor attribute & for now, I am selecting a basic yellow color.

I am saving it & when I run this in the browser, you can see that the color of the browser body becomes yellow.

We are learning attributes today.

We will now go back to the code and see what attributes are.

Here inside the body tag, I have applied H1. Nothing is happening due to h1 but, we have taken it as an example, it implies that the body is not empty and there is some content in it.

We took H1 as the content and, inside that, we took "hello how are you" as the text.

We have passed an attribute to the body tag, and its name is bgcolor.

That is our attribute and, we gave a value to it that is yellow (in words).

So here, the body is the tag, "bg color" is the attribute and, yellow is the value passed to the attribute.

Again, the body is our tag, "bg color" is our attribute and, yellow is the value.

Here we can change the value but it should be in a valid format.

Like if currently, If we are talking about colors, they can be in words like blue, green, orange, yellow, cyan.

The name can be anything.

If we pass the value using a valid name and color code, it is also valid.

There are several color codes in HTML, these color codes can also be passed as values.

For example, if I want to pass black color, I will write #000, save it we can see here the background became black.

If I want to pass white color, although it's the default color, I will write #fff in place of #000 we save it and load the background will become white.

Though by default, it is white, if I write FFF, the background will become white.

So, to change the color, we can pass the value using names and hexagonal codes for the colors.

We have both options available, but make sure whatever value we will pass should be a valid value.

Again, the value we pass must be a valid value...

If I write abcd in bgcolor, that might not work.

But here, abcd worked because that might be one of the color codes that define a color.

Same way, if we write any random name, they might or might not work,

So, if any code is working, that means it is defining some color & ideally, we never do that because that is not the proper way to define a color.

So, what we will do here, we will write proper names for the colors like blue, green, yellow, or orange or write the color codes with hashtags.

Now, I will try to write #yellow & the background has become yellow.

In today's topic, Attributes.

We learned we write the attribute in the start tag.

If I remove this and add it here, it will not work, as you can see..

Always remember the thumb rule that whenever we mention an attribute, it will always be mentioned in the start tag and not in the end tag...

I have defined attributes in the start tag.

Let's come back to the slide.

The attribute should always be applied with its name and value pair.

As we saw the same in the example,

The way we write the attribute is to write it in the pair of its name and value.

We need to write the attribute name & mention its value with it & we will always write both the things in a pair.

If I write the "bg color" and do not mention the value, the attribute will not work and will not show anything and show the output as it is.

I am saving it and running the code.

Although we took the attribute, nothing happened because we haven't passed the value.

We should always pass the value of the attribute,

only then it will perfectly operate.

Next,

The attribute names and values are case sensitive & it is recommended by W3C, that it must be written in lowercase only.

W3C means World Wide Web Consortium.

It defines the protocols that need to be followed for HTML, and how the stuff should be written is W3C (World Wide Web Consortium)

W3C has defined that whenever we write an attribute, it should be in the pair of its name and value, it should be case sensitive & everything should specifically be in small letters.

And the name of the attribute should always be in small or lowercase letters only.

If I write any color name with a hashtag after bgcolor, it will work if written in this way.

It's a thumb rule that the name-value pair should be together, and attributes should always be in lowercase.

Next, you can add multiple attributes in one HTML element but have to give space between two attributes.

If I take the bgcolor attribute in the body tag & I want to add any other attribute, in what way I will do that.

Only after adding a space, I can add another attribute here.

Let's say I need to add another attribute & I take the style Attribute.

Style is an attribute that defines the style we want to give, and how the content will appear inside the body.

So here we have mentioned two attributes in the body, the first is bg color and the second is the style.

To write these two, I added a space between them, and in this way, there should be at least one space between two attributes.

Here I took two attributes and left a space in between and, if I run the program writing it this way, it will be proper coding.

In this way, we can add two attributes. It is not necessary that we can add only two attributes, we can add multiple attributes to a tag.

Like I took bg color and style in one body tag, Apart from that, I can add more attributes, there is no limitation to adding the attributes.

But make sure when we add an attribute to a tag, that tag must support the attribute.

That is what I will show you further in this series and in today's session too. The main focus we have to do is that when we are writing an attribute then that attribute should be supported by that tag.

Let's move further in the slide.

Syntax means how to write an attribute.

Open the angular bracket followed by the name of the element,

Element means the name of the tag.

After the attribute's name and value are followed by the content, we will close the tag.

So as said, these are our elements, attributes, the second attribute & is the content.

Currently, we have applied the attribute in the body tag.

So, everything that is in the body tag will serve as the content.

If I wrote H1 in the body tag, it is the content & after that, the body tag has been closed.

So, this is the syntax.

Now we will see some examples of the attributes.

Like the first example is:

The body text equals green & the bg color equals orange.

Let us try to run this example.

What we have added to the body is;

So, text equals green & I am taking yellow as the bg color.

As you can see, the background became yellow & the text in the body looks green.

Now, as you can see, we have added a total of three attributes, left spaces between all of them, and given values to them.

Here we have not given the value because we do not need it, and if there is no need for an attribute, we can remove it & I am removing it for now and saving it. And now there are two in my body tag.

Within this example, we can see that we gave color to the background and gave the color to the font too.

The next example of the attribute is,

In H1, we wrote the title equal to "this is heading",

After that, we wrote something.

Now, I will explain what the title attribute is.

The title attribute is that attribute within which, when we hover on the text written in the h1 tag, hover means to navigate the mouse on it.

So, when we hover over the text, we can see something other than that particular text on the screen, which passes extra information about the text whatever is written on the screen.

That extra information is added to the title tag.

Let me explain this with the help of an example for a clear picture.

Currently, we have written "hello how are you", so here I will add the title, and inside it, I will write "this is an information".

I will save and reload,

Now you can see if I hover on the text, an extra block is being shown below & we can see "this is an information" written in that block.

That means the text "hello how are you" will show permanently on the screen if we want to show something extra related to that text like

Why the text is written here, the reason for it, or if any additional information has to be passed, we can show that using a title like this.

This is called a tooltip in HTML, and to add the tooltip you can use the title attribute.

Tooltips are very useful things.

At times when we create forms, we are going to learn further.

So, when we need to create or fill out lengthy forms and need to add the address on the form.

As the address can be longer than 1 line sometimes, sometimes it can be 5-6 lines when we show an address in the text area the scroll bar appears. We use the tooltip to show the same address together.

Like,

When the address is not showing proper and complete, we will hover the mouse over the address & by using the tooltip it will show us the complete address.

So, the tooltip is a useful functionality through which we can show less information together.

The next example is after the title.

What is a?

Let me explain this with an example too.

The complete name of "a" is the anchor tag, & it is used to specify links.

Links: if we are currently at a place and want to navigate to another place.

For this, we can use the anchor tag.

For example,

After the h1 tag, I write the "a" tag.

As soon as I wrote the "a" tag, sublime text entered href by default.

That is also a functionality of the editor that it passes the mandatory attributes of the element by default, we don't need to write extra for it.

This is a functionality of sublime text.

So "a" stands for anchor tag, A N C H O R (anchor tag).

An anchor tag is used to define a link to skip among different screens or web pages.

We can do that using the "a" tag with the help of the "a" tag. We can go to a different webpage with the help of a link.

So, let's say I want to visit the website of learnvern, after writing "a", there's href, it stands for hypertext reference & it's an attribute.

Inside the href attribute, I'll add the path of the website of learnvern, and here I will write learnvern.

Here I need to add the path, so I am opening learnvern. This is the site's URL & I will copy and paste it.

So here is the URL inside href, (https://www.learnvern.com/) and here learnvern.

Now, when I save it and reload it.

Soon as I reloaded, learnvern appeared here & you can see the underline too.

Whenever we use the anchor tag, the HTML provides a default style when we use the anchor tag, the links are written under HTML will always be underlined.

Also when we hover the cursor on it then, instead of the arrow pointer, it will show a hand pointer which also indicates that in the area we are on the screen the content is written in the anchor tag.

If I click on this, the screen will be redirected to the learnvern's website.

So, whenever we want to insert an additional link in our webpage, we use the anchor tag & under its href attribute, we can add the useful link.

Make sure the link or URL you pass must exist, and it's an existing link or URL of a website.

If I give abcd and there is no webpage like this then it is not going to redirect anywhere. So, make sure the URL you are entering is must be a proper URL.

Next, example 4 is the image tag.

"Img" stands for the image tag, and it is used to add or load an image into our webpage.

There are a few basic rules to using the image tag & I will explain them along.

Let's say, I want to add or load an image on the current webpage.

Firstly, that image must exist in my system if I'm loading an image that must exist on a specific path.

So currently, what I did is I saved an image named shoes.jpg in the folder where our program is saved.

That is in Joel HTML under programs.

There I have saved an image named shoes.jpg.

I'm opening the image, which is an image of a shoe.

Now, what I have to do to add this image to the program

What I will do is I will go to the code inside the tag, the tag for the image is the "img".

I wrote "img" for the image, and here soon as I wrote, "img" the basic attribute that is "src" got inserted & these are the functionalities of using an editor.

The Src attribute stands for the source, which means from which path or source we need to add the image.

So, I will add the path in the source where our image is saved.

Currently, my image is in the same folder where my program is saved, because of that I do not need to add the path & I can simply add the name of the image.

The name of my image is shoes.jpg, so the source is shoes.jpg.

I saved and reloaded.

Here, we can see something but, what exactly is it that we don't know.

That means what I have written in the source path is either wrong or the image doesn't exist at that place.

For that, I will have to check whether the image is present on that path or not.

Because it's the same path, but the image is not shown, this means the spelling might be incorrect.

It's S H O E S,

S H O E S.jpg

Still, we'll check its properties,

It's jpg which means the file format is correct, if it's not working let's add a slash.

It is still not working, what we'll do to identify it is we can see the name of the image is shoes.jpg & its format is also jpg.

So here, if I have written shoes.jpg as the name of the image, then I need to write shoes.jpg.jpg in the code.

What happens here is that this part is the name of the image & that is the format.

I am saving this and reload

The image is displayed.

But this technique is wrong so, we will remove the additional extension .jpg from the name of the image.

Writing a name with the format is not a good way because it can create issues, that is why I will name the image as shoes & its type will be jpg.

So, we'll write the same in the code.

I will remove one of the .jpg from shoes.jpg.jpg.

Then this is the name & this is the extension.

Let's reload.

And it's working, while I am pressing f5 and reloading the screen, that means when we upload an image, we need to make sure of two things,

Firstly,

The image must be saved in the folder where the program is saved, and if it's not the same we need to add the path.

Let me explain to you the image by adding the path.

I am creating a new folder named image and, I am moving the image "shoes" to this folder.

Now, the image is in programs in the image folder.

Let's see if we can access it now, I pressed f5 & the image disappeared & again the broken image icon is shown.

That means the path of the image is incorrect and the program cannot access it.

So here, we will write “image” and slash (/) and save.

That means we need to add the path in the source, where our image is saved in the system.

So currently, the image of the shoes is stored in a folder named image which is why I wrote image/shoes.jpg.

So that was our image tag.

As we can see, the image is looking a bit large & we want to fix it and show it smaller.

So, I will add height equals 100.

The height is given in px but here, I will write it as 100 the system will consider it in pixels (px) by default.

In the same way, I will write width equals 100, and I am saving.

When I saved it, you can see the image became smaller, and now its height and width are 100 pixels.

If we want to make it bigger, I will write height as 200 or width as 200 or anything let's say I want a broader width I will write it as 250.

Then if I reload it, it will look like this.

You can set the height and width according to your requirement.

But what we are learning now is how to add an image and its attributes like source, height, and width.

We have one more example for learning attributes.

And that is the style attribute used in the p tag.

Style is usually added to use inline CSS, which means it is used to add CSS in one line.

But as of now, we will learn style as an attribute and see which basic styles we can add.

So, let's say,

I have taken a p tag & inside the paragraph, I am adding "I am fine", just like we added "how are you" above.

Now, when I run it, I can see "I am fine" in green color.

And the reason it is green is that inside the body tag we have given the color green.

That means all the content inside the body tag will be displayed in green.

Now, there's a conflict, the link here isn't shown in green color because the link is present inside the body tag under the tag.

There are a few properties of the "a" tag, and one of them is the color of the tag which is blue by default.

As it is a link,

As defined by the W3C,

The links should always be blue and underlined and due to this reason, even after all the text is green the anchor tag or the link is shown in blue.

And if you want you can change it by adding CSS or style according to your requirement.

Currently, the text inside the paragraph or the p tag appears green, but I don't want it,

I want the text to be of another color, let's say in black color.

So here in the p tag, I will write it as style=color: black, I will save this and reload.

The color of the paragraph tag became black.

Now here currently, we have taken style as an attribute and we have written CSS here.

We'll study CSS in detail further when we start the CSS tutorial.

We have taken basic CSS here so that we understand it easily, that style is the attribute & we can include style in any tag.

And in this style, we have used color CSS.

There's a proper method to write it that is color followed by a colon (:) and the name of the color.

So, this is CSS but currently,

We are taking it as an attribute & that is why we are explaining this in the attribute session.

So today we have seen different examples like,

We took the bg color inside the body tag, title inside the h1 tag, and href under the anchor tag.

In the image, we have used three attributes together, these are source, height, and width.

And used CSS inside the p tag, and added CSS as the style attribute.

So that's all about the attributes and how we use them.

We learned how to add attributes to the programs with the help of examples.

With this, our session for attributes is completed.

How to write attributes and add them is completed here.

The next session we will move to will be about elements, what are the elements in HTML, what are they, and their usage.

Thank you for watching this & I hope you'll go through all the attributes we learned today.

Go through all the attributes and all the examples we have learned today one by one.

And if you want to research more, you can find them and write them in your program.

If you face any difficulties or problems, while practicing you can let us know at forum.learnvern.com.

We will try to resolve your queries as soon as possible.

Thank you!