Id and Class in HTML programming

Apologies for this newbie question, but I really want to wrap my mind around this concept.

It is my understanding that:

1.) ID is used to define unique items in an element. The ID name can only be used one time only, otherwise conflicts can occur later down the line (i.e certain Javascript/JQ commands not executing etc).
ID can be used with any element.

2.Class can be used to define multiple elements at the same time, therefore you can apply Class and use the same name class multiple times. Class can also be used with any element.

So, here is my question:

Within HTML, both ID and Class are used to define style and behavior with CSS and Javascript which will be applied after the html is written.

But as I am writing my HTML code, how am I supposed to know that I’m going to need to define a certain element with “ID” and a certain element as “Class”? This would require me to know exactly how I want my CSS and my Javascript to interact with my HTML code i.e particular elements, and sections long before I even write my first line of HTML, right? (maybe prototyping is the answer here)


Perhaps my order of operations is wrong?

Maybe best practices for work flow would be to
A.) Write a section of html B.) Style said section, C.) Add behavior to section, D) Repeat . ??

Thank you so much for the opportunity to ask this question.
Any insight is greatly appreciated.

I am not entirely sure myself, as I am only about half way through the HTML5 course, however, I would think when writing code, you would build the site using raw HTML only, then, once you saw what it looked like, you would then start to have an idea of where to puts classes and/or ids, in order to make it look better/behave the way you want it to. I hope that helps.

Hey @ajax7383493197!

Not necessarily, I usually write out my HTML code with ID’s according to what each section contains. Even though I don’t know what I’m going to with the JavaScript & CSS yet, I do it anyway just because I know that I’ll probably use that section in JS or CSS in some way. Now, I don’t usually use classes just yet cause I like to write out my complete page before starting on the styling, but that’s just my preference.