Naming via Class, ID, and Name

by kirupa   |   30 January 2012

  Have questions? Discuss this HTML tutorial with others on the forums.

One of the main reasons why people name things is so that they can refer to those things easily later. This applies to the real world. This applies to HTML as well where you have not one, not two, but THREE different ways of naming elements.

 In this tutorial, you will learn all about them...and then some! Let's get started!

Basics of Naming

In HTML, you can name your elements via the id attribute, class attribute, or the name attribute. In the following sections, you'll learn how to specify them and any special tricks you need to be aware of when using them.

Naming by ID

If you want to uniquely identify your element, you can do that by setting the id attribute:

<div>
<p id=logoText>My Logo!</p>
<div>

In the above example, notice I give my p tag an id value of logoText. Once you have done this, you can always reference this tag by simply looking for the element whose id value is logoText.

Things to note about ID values:

To properly set the id value, keep the following tips in mind:

  1. You can only specify one id value per element.
  2. The id value must be unique to your loaded document. If the name isn't unique, your browser will forgive you and move on. That forgiveness comes at the cost of unpredictable behavior when using CSS or JavaScript to target elements by their id value, though.
  3. In HTML5, you cannot start an id value with a space character, but pretty much anything else goes.

Note: HTML5 vs. HTML4 Naming

HTML5 is much more loose than HTML4 when it comes to what makes a valid ID name. In HTML4, your id values have to start with a letter followed by any combination of letters, hypens, numbers, underscores, and periods. (source)

Naming by Class

If the uniqueness and restrictions of id values aren't your cup of tea, you can choose to name elements by setting the class attribute instead:

<div>
<ul id=names>
<li class=firstName>Antonio</li>
<li class=lastName>Vivaldi</li>
<li class=firstName>Richard</li>
<li class=lastName>Wagner</li>
<ul>
<div>

Names set via the class attribute do not have the same restrictions as they would if set via id. You can reuse the same class value as many times as you want, and you can specify multiple names per class as well.

Take a look at the following example:

<div>
<p class="new unread">Happy Birthday!!!</p>
<p class="old unread important">What movie doyou want to watch?</p>
<p class="old read">Trip Details</p>
<div>

Notice that all of the p tags have their class value specified, and each of them have multiple values for class. Also, notice that the unread and old class values are used twice as well.

Naming by Name

The last approach you have for naming your elements is by setting the name attribute:

<form action="mailer.php" method="POST">
<div>
<p>Name</p>
<input name="name" type="text"> <br> </div>
<div>
<p>E-Mail (Optional)</p>
<input name="email" type="text">
<br>
</div>
<div>
<input name="submit" type="submit" value="Send!"> </div>
</form>

The name attribute is commonly used with form elements. When you submit your form, you can use the name value to identify the form data. You can see this in action by looking at the Creating an E-mail Contact Form article.

Accessing Named Elements

One of the main reasons for naming elements is so that you can access them easier using either CSS or JavaScript. For a deeper look at this, you should look at the CSS Selectors: Type, Class, and ID tutorial and the Referencing HTML Elements via JavaScript tutorial.

Because the tutorials I listed in the previous line cover this in great detail, I won't rehash that information here.

Which to use - Class or ID?

The answer to this is more straightforward than it seems. When naming elements in HTML, ask yourself whether you want to apply this name to many items or just a single item. The answer to that will determine whether you end up specifying a class value for the name, an id value for the name, or both class and id!

Let's look at the real world example that helps explain how to use id values and class values. Let's say that you have a group of people:

just a bunch of people

The HTML for this could look as follows:

<div>
<img src=wolfgang.png/>
<img src=ludwig.png/>
<img src=robert.png/>
<img src=maurice.png/>
<img src=johann.png/>
    .
    .
    .
<img src=antonio.png/>
</div>

Right now, there is nothing that differentiates the people from each other. If you wanted to target a specific person, you would probably call this person by his/her name:

proper names

The HTML equivalent would be setting the id for those elements:

<div>
<img id='wolfgang' src=wolfgang.png/>
<img id='ludwig' src=ludwig.png/>
<img id='robert' src=robert.png/>
<img src=maurice.png/>
<img id='johann' src=johann.png/>
    .
    .
    .
<img id='antonio' src=antonio.png/>
</div>

Notice that the names are unique. For this crowd, there are no duplicate first names. Therefore, when you call someone by their name, only that person will answer. This is great for getting just a single person's attention.

There will be times when you want to communicate to everyone. In that case, calling each person by their specific name would be inefficient. Instead, you can choose to use a more generic name that can be applied to everyone:

a more generic name

To have a name apply to more than one element, you will specify the name as a class value:

<div>
<img class='composers' id='wolfgang' src=wolfgang.png/>
<img class='composers' id='ludwig' src=ludwig.png/>
<img class='composers' id='robert' src=robert.png/>
<img class='composers' src=maurice.png/>
<img class='composers' id='johann' src=johann.png/>
    .
    .
    .
<img class='composers' id='antonio' src=antonio.png/>
</div>

When you are no longer bound by having to use a specific name, you can choose to use multiple generic names to further classify the people in our example. Composers is just one classification you can use. A subset of the people could also be German:

german

With class values, you can specify more than one name, so let's tag a few of them as German as well.

<div>
<img class='composers' id='wolfgang' src=wolfgang.png/>
<img class='composers german' id='ludwig' src=ludwig.png/>
<img class='composers' id='robert' src=robert.png/>
<img class='composers' src=maurice.png/>
<img class='composers german' id='johann' src=johann.png/>
    .
    .
    .
<img class='composers' id='antonio' src=antonio.png/>
</div>

Remember, there is nothing that prevents you from combining specific names and generic names. Just because Ludwig has a proper name does not mean that he cannot be both a Composer and a German.

So, to bring the example full circle and to summarize, if you want to go with a name to apply to multiple elements, specify the class value. If you want to go with a name to apply to only a single instance, set the id. Oftentimes, you will need to set both the class and id value as well, so be prepared to do that as well if needed.

Note that I am not going to talk about the name attribute here, for its scope is too limited to be of any use in this discussion.

Getting Help

If you have questions, need some assistance on this topic, or just want to chat - post in the comments below or drop by our friendly forums (where you have a lot more formatting options) and post your question. There are a lot of knowledgeable and witty people who would be happy to help you out

Share

Did you enjoy reading this and found it useful? If so, please share it with your friends:

If you didn't like it, I always like to hear how I can do better next time. Please feel free to contact me directly via e-mail, facebook, or twitter.

Kirupa Chinnathambi
I like to talk a lot - A WHOLE LOT. When I'm not talking, I've been known to write the occasional English word. You can learn more about me by going here.

Add Your Comment (or post on the Forums)

blog comments powered by Disqus

Awesome and high-performance web hosting!
BACK TO TOP
new books - yay!!!