1)- What is an HTML attribute ?

An HTML attribute is a key word that is added to an HTML tag and that brings more information about this tag.

For example the tag <a></a> is the tag that we use to open a certain website.

Let’s say that we want to open Google website : https://www.google.com/ .

So we, as human being, know that we want to open Google website, but what about the browser ? How will the browser know that it is Google website that should be opened ?

Here comes the role of the attribute href. href stands for hyperlink reference, and it is through the href that the tag <a></a> will let the browser know that the website we want to open is Google.

The code becomes :

Now let’s see more attributes that we can add. Let’s say that we want to tell the browser to open Google website in a different tab. So the attribute that we’ll use for this purpose is target. The value that the attribute target will take in this case is “_blank”. The code becomes:

Once clicked on the link, Google website will open in a different tab like below:

Now let’s say that we want to tell the browser to show what the link is about once the user hovers over the link. The attribute responsible for that is title.

We can give our attribute title any title we want. For example we can give it “Google link” or “Towards Google” or anythink. For the purpose of this example let’s give it “Google link”. The code is:

Now when hovering over the link in the browser, we will see “Google link” that appears.

Let’s discover more attributes for more tags.

Image Attributes:

To add an image to an HTML page we use the <img/> tag.

However the tag alone is not enough for the browser to know which image should be displayed.

To help the browser know which image should be shown and where is the exact location of this image the attribute src is what we need.

src stands for source, and by using src we will indicate to the browser the source of this image. Let’s say that we want to display a random image of a cat that is on google.

All we have to do is to copy the link of this image and paste it in the src attribute like below:

As you can see, VS code didn’t like the <img/> tag. The image can be displayed in the browser just fine but VS code doesn’t like this line of code and underlined the <img/> tag in red and that is because we have to add another attribute to tell the browser in case if the image doesn’t exist, or in case if there is any error, display instead a small text that describes what this image is supposed to be about.

and that attribute is alt, which means alternative. So the code becomes :

And so for example if the link of the image is wrong or if the image does not exist anymore 5 years from now the alternative text “Cat’s image” will be displayed instead, this way the user will know that in this location it is supposed to be an image that is displayed. So the results will be like this:

With the <img/> we can also use the attribute title we talked about a little bit above, so that when the user hovers over the image, they can have more information about the image.

Below is what will be displayed on the browser:

Dropdown list Attributes:

A dropdown list element in HTML is created through the <select></select> tag.

Let’s create quickly a dropdown list of 6 elements:

A dropdown list of 6 options will look like this:

The attribute that we can start with is name.

The name attribute is needed to reference the dropdown list data after it is submitted. If no name is specified, the data will not be submitted.

So let’s give the dropdown list a name.

Note here that the name given to the dropdown list will not appear anywhere in the browser, and that is because the name is needed for the backend when the data will be submitted and not for the frontend, to know which dropdown list is submitted especially when there are many.

Now if we want to select elements from the dropdown list we’ll notice that we can select only one element at a time. What about if we want to select 2 or 3 or 4 elements, or all of them?

For that we’ll use the attribute multiple.

multiple attribute can be added alone like in the image above or as it accepts a boolean value we can write: multiple =”true”.

In both cases we’ll have the results below:

You can see that we have now a scroll bar at the right of the dropdown list. So now we can scroll down and select multiple choices if we want to.

2)- How many attributes are there in HTML ?

There are many attributes in HTML. Attributes can differ from one tag to another depending on the tag and what we want the tag to do.

One tag can include many attributes allowing it to execute many actions at the same time.

3)- Summary:

• Attributes are used to bring more information about the HTML tag.
• Here is a table of the attributes that we have seen in this tutorial and their use.