Here’s a nice semantic way to markup and style a star rating. In this case, it represents the designer’s skills in different areas, but it could be used for a dynamic star rating system, as you’ll only need to update the value attribute of the meter tag.

semantic star rating with HTML

here is the markup:

<section id="skills">
<h3>skillset</h3>
<p><abbr title="HyperText Markup Language">HTML</abbr>/<abbr title="cascading stylesheets">CSS</abbr>: <meter class="ir" min="0" max="5" value="4">4 out of 5</meter></p>
<p>adobe photoshop: <meter class="ir" min="0" max="5" value="3">3 out of 5</meter></p>
<p>javascript: <meter class="ir" min="0" max="5" value="3">3 out of 5</meter></p>
<p>web standards: <meter class="ir" min="0" max="5" value="4">4 out of 5</meter></p>
<p>mobile development: <meter class="ir" min="0" max="5" value="3">3 out of 5</meter></p>
</section>

and the CSS:

  #skills meter{
	float: right;
	background-image: url(../images/skillstars.gif);
	background-position: 0 0;
	height: 20px;
	overflow:hidden;
	width: 114px;
  }

  #skills meter[value="0"] {
	background-position: 0 0;
  }
    #skills meter[value="1"] {
	background-position: 0 -22px;
  }
    #skills meter[value="2"] {
	background-position: 0 -44px;
  }
    #skills meter[value="3"] {
	background-position: 0 -66px;
  }
    #skills meter[value="4"] {
	background-position: 0 -88px;
  }
    #skills meter[value="5"] {
	background-position: 0 -110px;
  }

To see a demo : demo

The original design is from Design Kindle