Vegan Bicyclinguist Logo

Vegan Bicyclinguist

An occasional thought from a vegan bicyclist language-lover

XHTML + CSS Template for Nutrition

Posted: Saturday, January 6th, 2007 – 11:23 pm

Revised: Wednesday, June 6th, 2007 – 7:11 pm

Since I'm planning on posting a number of recipes on this blog, I also wanted to provide nutritional information in an easy-to-read, clean format. Surprisingly, there are no (X)HTML templates out there for the Nutrition Facts label that that FDA requires on many food items. I decided to develop my own as part of my contribution to the world in general. I hope someone finds it useful.

The following code is a template that validates XHTML 1.1. You may notice that I use a table to markup the label rather than a series of div tags. I argue that a table is in fact the most appropriate semantic representation for this data, and as such I've used the table while styling it with a stylesheet.

The style sheet that I use contains three <tr> tag ids, which delimit three general boundaries of the label: the servings, calories, and minerals. The stylesheet adds a thicker line to mark these rows. The <td> tags have a dv class, which is used to indicate the Daily Value information. They also have a sub class, which indicates that particular nutrients are subordinate to the last unmarked <td>. The style sheet will indent these cells slightly. Finally, the <td> id disclaimer is reserved for the cell that contains disclaimer information about the data presented.

This code is completely free, and I consider it in the public domain. Use it as you will.

Download the Code

Template

The following table is an example of the final look and feel of the label.

Nutritional information
Nutrition Facts
Serving Size 1 cupcake (67g)
Servings Per Batch 12
Amount Per Serving
Calories 194 Calories from Fat 81
% Daily Value *
Total Fat 9g 14%
Saturated Fat 2g 10%
Monounsaturated Fat 2g
Polyunsaturated Fat 2g
Trans Fat 0g
Cholesterol 0g 0%
Sodium 160mg 7%
Potassium 80mg 2%
Total Carbohydrate 29g 10%
Dietary Fiber 2g 8%
Sugars 18g
Protein 2g 4%
Vitamin A 1%
Vitamin C 0%
Calcium 4%
Iron 7%
* The Percent Daily Values are based on a 2,000 calorie diet, so your values may change depending on your calorie needs. The values here may not be 100% accurate because the recipes have not been professionally evaluated nor have they been evaluated by the U.S. FDA.

Comments (26)