HTML element attributes infinitely add to the power of your content. They permit you to customize each element or groups of elements. For this tutorial to remain simple, we will not cover the majority of attributes because they are quite numerous. A full list can be found on w3.org’s list of Attributes. We will only cover the 5 most common attributes that the vast majority of HTML elements allow. All attributes should be written in lowercase to be compatible with future versions of xhtml/html.
Common HTML Attributes
- id – gives each element a unique identifier to be selected with CSS or JavaScript
- name – gives each element the ability to have a special name or a “group” identifier to be selected with CSS or JavaScript
- class- assigns an element to a class to be selected with CSS or JavaScript
- style – assigns CSS styles to the element
- title – gives a cool hover feature that displays text over an element
We now have an element that we can select individually by its id attribute. Don’t use the same id for multiple elements (id’s are made to be unique). We also added a name attribute, which can be used like an id or like a group to help with handling things in forms like radio buttons. Our paragraph now has a class that we can use to reference it in our CSS, which we will learn in the CSS category tutorials. Then, we embedding a style attribute in our tag. Finally, we have the cool but not so frequently acknowledged title tag.
Now that you know a basic overview of the HTML attributes, you are well on your way to being able to understand and write quality HTML documents.
References
If anyone if interested, I worked out that you can make this into a hyperlink too which is useful. Below is my example 🙂
Hover for info
Very nice!
very nice but i need to extend the idea
I think there’s a typo here: "Then, we embedding a style attribute in our tag."
Nothing happens when I hover over my text. Did I do something wrong?
I wonder if I will get the commentator badge now?
This is all great but the Code Simulator seems very limited. Or I am just slow…:(
This is great
This is great
This tutorial does not clearly address the related quiz question.