HTML attributes are special phrases used within the opening tag to govern the behaviour of an element. An attribute either alters an elements default functionality or adds capability to particular elements that would otherwise be unable to operate properly.
Now I know that the “definition” above can sound intimidating as a beginner, but not to worry, I will break that down for you. The first step is to understand the different types of HTML attributes.
There are three different types of HTML attributes:
- standard attributes,
- required attributes and
- event attributes
The different types of HTML attributes explained
Particular elements require required attributes to function correctly. Standard attributes are supported by many element types and are also referred to as global attributes. Finally, event attributes are used to cause specific scripts to run under specific circumstances
Required HTML attributes explained
Some elements created in HTML require additional attributes to be added to make them functional. The best example of an element with a required attribute is the <img> element.
When you create an <img> element, you must insert the src attribute that points to the location of the image in your folder structure.
A similar example is when you use the anchor <a> tag, and you are required to insert a href attribute to point to the location of the anchor text
Standard HTML attributes explained
Standard or global attributes are attributes that can be used on most HTML elements.
When you start learning HTML, you may have been exposed to the style attribute, which is used to do what is referred to as inline styling. While style is an example of a global attribute, just because it is a global attribute doesn’t mean it must or should be used. Inline styling is considered bad practice for a host of reasons – you can find our top 6 reasons why you should style inline here.
I hear you ask how you can style an HTML document without the style attribute? The answer is simple, and it brings us to one of the most common global attributes, the class attribute.
The class attribute identifies HTML elements and is often confused with the id attribute, but there is one major difference between the two. The id attribute must be unique to the HTML document, and the class attribute does not have to be.
Where do you use the class attribute
The class attribute is what is mainly used when writing your CSS file. When styling in CSS, the standard CSS syntax is to call the element and then apply styling to the element. The class attribute connects your CSS styling to your HTML.
If you haven’t started styling in CSS as yet, a great place to start is to find out how to connect your HTML file to your CSS file – you can read our article on that exact top here
Event attributes explained
Event attributes were added in HTML version 4 and allow you to add functionality to your site by allowing a script to run specified situations.
I am going to be honest here. When writing this article, I have only covered HTML and CSS. Event attributes require an understanding of Javascript, so for that reason, I am not going to go into more detail on this until I can explain these fully and with confidence.
Most common HTML attributes for beginners
As someone learning to code, I can understand if you took a look at the HTML docs and saw all of the attributes available to you and freaked out (I know I did). The good news is you don’t need to learn all of these.
Firstly the HTML docs are always only one Google search away, and secondly, as a beginner, you will notice that you only really use a handful of these to start. Below is a list of the most common HTML attributes that beginners would use.
| Attribute | Value | Description |
| class | Class =”class name” | Assigns a class name to an element. |
| id | Id =” name” | Specifies a unique identifier (ID) for an element that must be unique in the whole document. |
| lang | language-code – click here for a full list | Defines the language for an element’s text content. Most often used in the <html> tag. |
| style | style | Allows you to use inline styling. Read our 6 reasons why this is not recommended |
Conclusion
While there are different types of HTML attributes, in reality, you will only use a handful of these as you are learning HTML. In my (limited) experience, I have found that the attribute I use the most is the class attribute, which helps with CSS styling. By simply understanding the CSS syntax and applying the class attribute to HTML elements, you can learn two programming languages at once.
Remember, you don’t need to learn every attribute – Google and the HTML docs are your friends.
What attributes do you use the most?
I hope this article inspired you to take that leap and start learning to code. Click Here to meet other new coders like you and join our community.
