In Design Studio, our one hour drop in to hack on anything you want, Lilly had a question about adding an h-card to her website.
So we used the metaphor of a business card. Anything contained in the div with the metadata h-card assigned to to it's class attribute is a part of Lily's h-card. Not only can people read it on her website and source code, but websites can use the metadata to learn about Lily.
In HTML every element (commonly referred to as tags) can carry the class attribute. We use this to assign CSS selectors and metadata. Calling the class attribute CSS is wrong (Learn More).
In the h-card example we use the class attribute to identify Lily's "business card" on her website.
Lily decided she wanted her name so she made a pargraph contained in the div. In that paragtaph she added a span with p-name. She added u-url to the anchor element to say this website is "me." In the Image element (img) Lily has both "avatar" and "u-photo."
Avatar is a CSS selector. It has rules in her stylesheet saying, "Make this image X size and make it round."
She also has metadata in the class attribute of the img element. This u-photo tells other websites and people, "This is a picture of Lily."
Remember life is often a hunt trying to find the missing divisions that divide us. If you search for patterns in life you can often close issues and problems.