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’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

<p id=”p1Id” name=”example” class=”pFirstClass” style=”color:#900;” title=”I am a title”>
Hover over me to see the title


Hover over me to see the title

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.


10 thoughts on “Attributes”

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.