HTML: Naming conventions for ID attributes

Question

Lately I've been doing a lot of front-end work. Some developers here have been naming their elements things like "divPhotoGalleryContainer" and sometimes I'll just see "galleryContainer."

Is there a good naming convention? Is adding "div" really useful?

Answer 1

The stupid thing is, Hungarian notation like divPhotoGalleryContainer is totally unnecessary with CSS. You can name the ID PhotoGalleryContainer and target it to a <div> element in the CSS:

div#PhotoGalleryContainer {
  /* rules */
}

Inside that rule you can usually assume certain properties like display: block, unless you're targeting generic divs somewhere else (kinda bad practice).

There aren't really any specific conventions for naming, just use names that are clear and simple.

Answer 2

I don't think it's particularly useful, but I don't think it's harmful either. Consistency is the most important convention.

Answer 3

The best naming convention is the one that makes sense to the developers/designers involved in the project. Given the two examples in your question, I'd be willing to bet that the "divPhotoGalleryContainer" contains "div" because either: it's referenced in a CSS selector, or some javascript code is looking at it and it's somehow helpful to know what type of element the id is referring to.

The "divPhotoGalleryContainer" convention seems like an HTML-ish flavor of Hungarian notation.