In the first article of this series, we talked about what tags are. You can access it by clicking the link below:
https://www.hcode.com.br/blog/html5-guia-completo-01-o-que-sao-tags
In this article, we will talk about attributes. It is very common to use them, and they are very necessary for development in HTML5. But after all, what is an attribute?
What is an attribute?
An attribute involves additional information that we communicate to our tag so that it can fulfill its role or function effectively. To understand this better, think of this example: imagine that you need to go to the doctor because you're feeling a sharp pain. What is the doctor's goal? It is to help you get rid of the pain. But for that, what do you have to inform him? You need to say where the pain is occurring, right? Only with this information can the doctor know what to prescribe or what treatment to perform. In other words, only with this information can he fulfill his role.
Tags are the same way. For example: what is the function of an image tag? It is to display the image. But for that, what does it need to know? The path of the image to be displayed, and for that, we use the src attribute.
How to define an attribute
Attributes will always be specified in the opening tag of the elements. We can define an attribute in two ways:
1 - By providing its name and a value. Example:
<h2 class="subtitle">Hcode Trainings</h2>
In the code above, we specified for the tag an attribute class (responsible for applying a CSS class to the element), then an equal sign, and in quotes the name of the class. This is the standard followed in all attributes that have a value.
2 - By providing only its name. Example:
<input type="checkbox" checked>
In the code above, we created a tag of type checkbox and specified for it the attribute checked (responsible for defining whether the element will be checked or not). However, notice that we only provided its name, without any value.
Types of Attributes
We can divide attributes into two groups: 1) global attributes and 2) specific attributes.
Global Attributes
These are attributes that all tags have access to. Thus, they can be defined in any element. Example:
<p title="This sentence is amazing">May the Force be with you</p>
Specific Attributes
These are attributes that only one or a few tags have access to; they are specific to them. Example:
<form action="register.php">
...
</form>
In the code above, we see the action attribute, which can only be defined by the tag; no other tag (so far) has access to this attribute.
In conclusion, we can say that just as a pilot needs GPS coordinates to reach their destination, tags need attributes to function well and thus reach the “destination” we all want: to produce professional websites and systems that are pleasant to navigate.
You can also access this content in video format:
Additionally, you can take advantage and enroll today in our Complete HTML5 Course, where we teach all the tags and all the attributes of the HTML language :).
Until the next article!