Ah, wait a minute, you don’t mean class as in OO class here, you mean class as in the HTML attribute class?
class is called that because that’s the right word to use: word comes from biology (a group of related plants or animals) but it’s commonly used outside of biology to refer to a [sub] group of related things.
id is called id because it’s an id, eg an element can have a single identifier/identity.
div, um, I think maybe it came from division or divider, as in you divide the page up. The word doesn’t really mean anything except itself, a div is a div. A
div is a generic element, a way to put a group of other elements in a block. The name deliberately doesn’t carry any meaning - anything more specific (like block or container maybe) will have a specific meaning in different contexts.
Note that there is an inline version of div, called
span - whereas a div is a block of content, a span is often a way to target some text inside a bigger bit of text -
<p>Some text <span>and some text I'd like to do something different with</span></p>.
span could be like a “span” of text, but really the word is also meaningless beyond a span is a span.
EDIT for example:
<div class="media-container image-container" id="media-item001">
<img src="https://path/to/some/img.png" alt="some image" />
So I have an an image, and to make it easier to style, I’ve wrapped it in a container. Maybe the container can contain various kinds of media - images, videos, text etc. It’s just a generic container I want to add styling to - it’s not a specific kind of thing, so I just use
It has a unique identifier (
It has two classes -
image-container. So I could have multiple elements on the page with those classes. That means I can style all the
media-containers and all the
image-containers at once using CSS, like
border: 2px solid grey;
/* ...and so on */
IDs are unique, classes are non-unique. You can use the same class name on any number of different elements, you can only use the ID once on a single element.