I'm so confused about ID and classes? (building my tribute page)

[Tsmithcode]

During the lessons I was told that you should only have ONE id per page. I’ve also watched multiple videos that state you should only contain one id per page. I’ve been told that you should always use the class selector (sorry if my terminology is wrong, I’m still learning) over the id because you can only have one per page.

Now I’m going over the “build a tribute page” project and it’s having me put id’s in multiple tags? I’m so confused on this. Could someone please clarify why they are having me do this?

Here is an example with the first three sets of directions.

1. Your tribute page should have an element with a corresponding id="main", which contains all other elements
2. You should see an element with an id of title, which contains a string (i.e. text), that describes the subject of the tribute page (e.g. “Dr. Norman Borlaug”)
3. You should see either a figure or a div element with an id of img-div

I don’t understand why it’s having me do this when I was told you should only have one id per page, I really need some clarification, why id and not class???

Like I’m doing this and I’m getting the checkmarks saying the code passes but I don’t understand it. I don’t want to move on without understanding what I’m actually doing here.

[jwilkins.oboe]

HI @Tsmithcode !

Welcome to the forum!

@Tsmithcode

During the lessons I was told that you should only have ONE id per page.

To be clear, you can’t have multiple ids with the same name in the same html document.

For example, this is bad HTML

<p id="para">Here is a sample paragraph</p>
<p id="para">Here is another sample paragraph</p>

I used the same id name of para.
But id names need to be unique.

This would be valid HTML

<p id="para1">Here is a sample paragraph</p>
<p id="para2">Here is another sample paragraph</p>

Since the id names are different that is valid HTML

@Tsmithcode

I’ve been told that you should always use the class selector

When it comes to styling, using class selectors makes it easy to apply the same styles to multiple elements.

For example:

<img class="card-img" src="url-img-1" alt="some description goes here">
<img class="card-img" src="url-img-2" alt="some description goes here">
<img class="card-img" src="url-img-3" alt="some description goes here">

Now I can go into my css and target the img class selector to apply the same styles for all of those images.

.card-img {
/*styles goe here*/
}

@Tsmithcode

Now I’m going over the “build a tribute page” project and it’s having me put id’s in multiple tags? I’m so confused on this. Could someone please clarify why they are having me do this?

Using ids for these projects makes it easier to write tests and check if the user has met the condition for each test case.
Since id names have to be unique, the test is look for that unique id name applied to that element.

Hope that helps!

[Tsmithcode]

@jwilkins.oboe

Using ids for these projects makes it easier to write tests and check if the user has met the condition for each test case.
Since id names have to be unique, the test is look for that unique id name applied to that element.

So these id’s used during the test are simply to make it easier to see if you did something correctly? If I were actually building a tribute page and not being tested would it be normal to use all of these id’s? Or is this strictly for testing purposes so the “machine” can find my answer. I think I understand what you’re saying but I’m still a little confused.

Also, thank you so much for the help. You’ve already made things a thousand times clearer than they were.!

[ChrisTheCoder]

I know for a fact you can have multiple ID’s in an HTML document as long as they are not the same ID… However, you cannot have more than one element with the same ID.

I am curious about your second part of the question being is this normal or are we only being asked to include multiple ID’s for test purposes??? Id like to know as well

[lasjorg]

Mainly for testing. They are easier to deal with, at least as long as people remember to only use one of each id (i.e. ids with unique values). If you add the same id more times the test will just grab the one that comes first in the document.

It is fairly well established that using ids for styling is a bad idea. You don’t need them and they just cause issues in the long run. I personally see absolutely no reason to use them for CSS.

CSS Guidelines (2.2.5) – High-level advice and guidelines for writing sane,...

[Tsmithcode]

Man, that had me so confused lol!

thank you for clarifying!!!
I was sitting there scratching my head like “I don’t understand why it’s only testing me on id’s!!” I didn’t realize it’s just so the “machine” could see that you were giving the correct code.

rookie mistake but now it all makes sense and I’m not longer confused.

you guys are awesome, and I appreciate the help! I passed my tribute page