0

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.

Improve this question
1
  • If its just legibility that you are worried about then I'd say as long as your names are sensible and descriptive (eg not "s12p3" or somethign equally cryptic) then you should be alright. Commented Jun 23, 2011 at 15:27

1 Answer 1

Reset to default
0

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.