Are there differences between `name` and `id`?

Are the “name” and “id” always the same? what is an example of when we would need them to be different?


Hello and welcome on the site :grinning:
They can be different, Id is to identify the element in CSS or in JS, name is to identify element in HTML and in PHP for form handling

Hope this helps :grinning:


This question has been asked many times in this HTML Forms unit, and the best answer I’ve seen so far is this: FAQ: Learn HTML: Forms - Adding a Label

1 Like

I’ve noticed that the instructions mention name but not id, however to pass the code you need to have both.


Use name attributes for form controls, as that’s the identifier used in the POST or GET call that happens on form submission.
Use id attributes whenever you need to address a particular HTML element with CSS, JavaScript or a fragment identifier.
It’s possible to look up elements by name too, but it’s simpler and more reliable to look them up by ID.
Name is used for form handling in PHP when a form is submitted via HTML, name doesn’t have to be unique on a page, as it can link other elements together.

Hope this helps :grinning:


I still don’t get it.
Why is the id attribute to identify the element in CSS/JS even though in the lesson whe saw that it’s related to the attribute “for” in the label element (which is html language or I am wrong?)?
Sorry for my bad english!


Id is used in CSS and in JS as you said:

document.getElementById("someId") // javascript

#someId {
  color: green; /* CSS */

For is used for labeling as you said, and name too.

But beacuse Id-s are unique it’s easier to handle them in JavaScript.
So that name’s aren’t unique they return an array even if there is only one name, just like classes:

document.getElementsByName("someName") // Names

document.getElementsByClassName("someClass") // Classes

As I said they return an array so we target one of them with:

document.getElementsByName("someName")[0] // Names

document.getElementsByClassName("someClass")[0] // Classes

We can even target all of them (or some of them) with a for loop:

for (let i = 0; i < document.getElementsByClassName.length; i++) {
  document.getElementsByClassName[i].style.color = "green";

And we use names to work with forms in PHP.

Hope this helps :grinning:

1 Like


Just wondering if “name” and “id” must be passed to the same string. Can anyone help with this?

1 Like

They’ve answered that question before. You can and is often see it on big companies as the moderator said in another FAQ.

Is there a way where Codecademy forum hightlights the code depending on the language?

For example python print("Hello World")

I don’t know I would like to have some colors in the text to differentiate the languages like Discord does.

Basically an ID isn’t going to have an effect on your actual html but it serves as a variable name in your CSS and Javascript, meanwhile a name is going to be the variable name to use in your html.

It makes sense, thank you :slight_smile:

If “name” is for identifying elements in HTML, then why don’t we pass the “name” in the for="", in a label tag. Why we pass “id”?? And I’ve also seen, we almost always keep the values of Ids and names, in an input tag, the same.

I never write in these forums but I had to this time because this really did help a lot thank you!!

Is the “<input id=” supposed to reference the “<section class=” or “<label for=”

The prompt says: Associate the <input> to the first <label> by assigning the correct value to id .

How do I know what the correct value is? Am I missing something?

It’s referencing the <label for="" section.

I read over this forum post and don’t fully understand all of the relationships but id and for are always the same and have a direct relationship to each other. From what I’ve read so far id and for are the direct links between <label> and <input>.