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.

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:

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:

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:

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:

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.

Just a final word before we wrap up. If you have a question and/or want to be part of a friendly, collaborative community of over 220k other developers like yourself, post on the forums for a quick response!