naming conventions for html elements

Question

I have a general query regarding name of html elements.

I have seen in the past developers placing an prefixes before the id of their html elements eg for a div element -> dvMyDiv

I have seen a mix of casing when naming elements. Similar to that of assigning name to element classes.

So I am wondering is there any standard or convention to what html elements should be named? What casing? Should they have prefixes etc?

I am working with asp.net web forms, html5, css3 and jquery so would like some form of standard for naming conventions that I can share with other developers.

Answer 1

I agree with consistency - if you already have a convention, then stick to it.

However, if your making a new convention, this kind of Hungarian notation can be a really bad idea because it's not at all DRY. For example, the name of the tag is <div> and then the name of your class again says that it's a div. If you change from using <div>s to <section>s, either your code will be out of date or you'll have to change all the class names as well (possibly in HTML, CSS and JavaScript). Since you can target classes using code like div.classname, it adds absolutely no value.

A better idea is to name things after the type of content they include. For example, in a blog, you might use HTML like this:

<section class="posts">
  <article id="post-1" class="post">
    <h1>Post Title</h1>
    <div class="post-content">
      <p>Blah blah blah</p>
      <p>Blah blah blah</p>
    </div>
    <time class="timestamp">17th January 2012</time>
  </article>
  <article id="post-2" class="post">
    <h1>Post Title</h1>
    <div class="post-content">
      <p>Blah blah blah</p>
      <p>Blah blah blah</p>
    </div>
    <time class="timestamp">18th January 2012</time>
  </article>
</section>
<aside class="top-posts block"></aside>
<aside class="contact-form block"></aside>

Answer 2

There is no standard you and your colleagues should decide what format you want to use and stick with it. The prefixes thing is kind of Hungarian notation. But I don't really like it. Just make sure the names are clear and descriptive.