Question

I’m wondering about standards or commonalities for various common elements on webpages that have no specific element already associated with them. I often struggle to name certain elements of a page.

I know about the ones included in html 5 for sure:

• Header
• Nav
• Section
• Article
• Aside
• Footer

But what should I call:

• A highlighted block of text like a blockquote, but not actually quoting anything–basically like a block emphasis. Or should I just use blockquote?
• a section on a homepage where there are distinct blocks for, say, listing different features.
• a pop-up text description of another element (that might appear on hover, but for structure/style division should probably not require that)
• the introductory description on the homepage (intro?)

I know these aren’t technical considerations per se, and I can just come up with my own names for them using my brain, but I wonder if there are industry conventions/best practices that have become standard for different parts of pages just to make my code more legible. I’ve tried searching for a rundown, but haven’t found much of use.

Answer 1

Well, you see “column” and “row” used a lot, to name two.

Regarding your other questions:

Highlighted block of text like a blockquote: well you could use a blockquote, as a rule of thumb, you should always try and use an appropriate standard html element when you can, to keep things clean. Otherwise, you could use a class “highlight” and alter your css accordingly, so you’ll know exactly what it means if you come back to it in two years.

A section on a homepage where there are distinct blocks for, say, listing different features: you’ve kind of answered your own question here. Lists are very popular for this sort of thing, with maybe a class or id on the <ul> element. Name it in a descriptive yet concise way. Doing that, you don’t need to come up with a new term.

A pop-up text description of another element: you see popup used a lot, for example <div class=popup”>..content..` . This works well when the popup is a child of the hovered element, for easy DOM traversal.

The introductory description on the homepage: this one I don’t have any suggestions for. Your suggestion of intro is fine. You could just have it as a standard <p> and style it based on it’s parents. A definition like #content p:first-child would be a nicer solution for a first paragraph of many than a special class, in my opinion.