HTML ATTRIBUTES

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 ?

Ezoic - wp_longest_content - longest_content -->

Here comes the role of the attribute

underline;">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 :

ntent_8 - incontent_8 -->
href Attribute

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:

target attribute

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

Google tab

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:

title attribute

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

hovering over the link

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:

src attribute

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 :

alt attribute

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:

alt attribute

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.

title attribute

Below is what will be displayed on the browser:

Cat image with title

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:

Dropdown List Code

A dropdown list of 6 options will look like this:

Dropdown list

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.

name attribute

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

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:

Multiple choices

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.

Multiple selections

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.
AttributesUSE
titleThe title attribute specifies extra information about an element. The information is most often shown as a tooltip text when the mouse moves over the element.
srcThe src attribute specifies the source of the element. Or in other words, the link to this element.
altThe alt attribute provides alternative information for an image for example if a user for some reason cannot view it (because of slow connection, an error…)
hrefhref attribute specifies the URL of the page the link should go to.
targettarget attribute allows to open a page in a new tab.
nameThe name attribute is used to reference elements in a JavaScript, or to reference form data after a form is submitted.
Different attributes

Get new content delivered directly to your inbox

Leave a Reply

%d bloggers like this: