Attributes

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
Example

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

Result

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.

References

If you enjoyed this resource, support me by sharing this page with others.
Share on Facebook
Facebook
Share on Google+
Google+
Share on StumbleUpon
StumbleUpon
Digg this
Digg
Tweet about this on Twitter
Twitter
Share on Reddit
Reddit

Leave a Comment

Leave a Reply

Your email address will not be published. Required fields are marked *

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