google chrome devtools - What do you call input class="gLFyf" vs input.gLFyF (vocabulary help needed)

Question

In Chrome DevTools, the element tab shows the constructed DOM and I can click on elements in the DOM which also highlights the element on the page. Image of both versions shown in DevTools

If the DOM shows:

<input class="gLFyf">

Then the page highlight will show:

input.gLFyF

I realise these are two ways of writing the same thing, I also realise the former is HTML style and the latter follows CSS conventions. However, I lack the vocabulary to properly refer to either.

What do I call each format?

Eg. would it make sense to refer to <input class="gLFyf"> as HTML syntax and input.gLFyF as CSS syntax? Is there a more widely accepted way to differentiate and name them?

question from:https://stackoverflow.com/questions/66046074/what-do-you-call-input-class-glfyf-vs-input-glfyf-vocabulary-help-needed

Answer 1

gLFyf is the name of the class which is an attribute that can be referred to in the stylesheet to match styles with elements of that class on the page.

A class leads with a period (.) - whereas an ID would lead with a hash (#).

So .gLFyf is a class.

And #gLFyf would be an ID.

It is a class, whether viewing HTML markup or the DOM inspector. They both refer to the same thing as you already state.

This may be of some use/reference.