I am working on getting a blog setup for Dirty Suds Design and, once that happens, I’ll be posting a lot of technical stuff over there.
But it’s not ready yet and I need some input today, so I’m posting here.
I’m working on marking up a Nutrition Facts table in XHTML and I want it to be as semantic as possible. I found a few nice looking examples with CSS, but none of them were very microformat friendly.
At Dirty Suds, we design with Web 3.0 in mind, so I want to make sure I’m doing this in the smartest way possible.
- I’m not sure about the use of
<hr /> - I like to separate content from presentation, but I also like flexibility.
- I’m still working on the CSS, but if you’d like what I’ve got, I can post that too.
So here’s my code. Any input would be much appreciated.
<div class="nutrition">
<h3>Nutrition Facts</h3>
<dl>
<dt class="servingsize type">Serving Size</dt>
<dd class="servingsize thickline value">1 Meal</dd>
</dl>
<hr class="thick" />
<h4 class="amountperserving">Amount Per Serving</h4>
<dl>
<dt class="calories type">Calories</dt>
<dd class="calories value">200</dd>
<dt class="caloriesfromfat type">Calories from Fat</dt>
<dd class="caloriesfromfat value">70</dd>
</dl>
<hr />
<h4 class="dailyvalue">% Daily Value*</h4>
<dl>
<dt class="fat type">Total Fat</dt>
<dd class="fat value">8g <span class="percent">12%</span></dd>
<dt class="saturatedfat type">Saturated Fat</dt>
<dd class="saturatedfat value">1g <span class="percent">5%</span></dd>
<dt class="transfat type"><span>Trans</span> Fat</dt>
<dd class="transfat value">0g</dd>
<dt class="polyfat type">Polyunsaturated Fat</dt>
<dd class="polyfat value">5g</dd>
<dt class="monofat type">Monounsaturated Fat</dt>
<dd class="monofat value">1.5g</dd>
<dt class="cholesterol type">Cholesterol</dt>
<dd class="cholesterol value">0mg <span class="percent">0%</span></dd>
<dt class="sodium type">Sodium</dt>
<dd class="sodium value">640mg <span class="percent">27%</span></dd>
<dt class="potassium type">Potassium</dt>
<dd class="potassium value">410g <span class="percent">12%</span></dd>
<dt class="carbs type">Total Carbohydrate</dt>
<dd class="carbs value">20g <span class="percent">7%</span></dd>
<dt class="fiber type">Dietary Fiber</dt>
<dd class="fiber value">3g <span class="percent">12%</span></dd>
<dt class="sugars type">Sugars</dt>
<dd class="sugars value">2g</dd>
<dt class="protein type">Protein</dt>
<dd class="protein value">12g</dd>
</dl>
<hr class="thick" />
<p>* Percent Daily Values are based on a 2,000 calorie diet. Your daily calues may be
higher or lower depending on your calorie needs.</p>
</div>