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.

(Hide)

Larry on November 21st, 2007 – 10:40 am

I started to build something like this for a client's web site, and (after a while) thought, "Isn't there something already out there?"

Thanks for providing a basic template; I truly appreciate it!

el chivo on November 22nd, 2007 – 7:09 pm

demasiado bacan!

JT on April 16th, 2008 – 5:48 pm

I too started to build something like this for a web site, and (after a while) thought, "Isn't there something already out there?" Thanks for providing a basic template; I _really_ appreciate it!

i noticed the caption Nutritional information
does not appear - why is that?

Ed Knittel on May 8th, 2008 – 1:08 pm

Instead of using IDs I would recommend using classes. This way you could use the code multiple times on a page without causing issues with IDs being used more than once. Otherwise, this is fantastic!

Brian on May 8th, 2008 – 1:55 pm

I agree that a table makes sense semantically. But:

* The top and bottom boxes should not be in the table, because they are not tabular.

* The amount per serving column should separate column from the label of the row. Putting the amount per serving in the same column is purely a presentation aspect (the FDA allows, but does not require them to be merged, to save space.)

* You have no table headings on the tabular data.

* Calories from fat doesn't look like it is in the right place on the line.

Mike on May 8th, 2008 – 4:14 pm

If we really want to be semantically correct than in theory the quantity (i.e. 2g) should be in its own column.

If we think of it in terms of columns, the first column is the heading for that row, the second is the quantity and the third is the percentage.

The problem with this approach is that it be impossible to make that kind of a table look like the one you have with using javascript to adjust each column's width.

SDK on May 8th, 2008 – 5:00 pm

very, very cool

Rob on May 8th, 2008 – 6:53 pm

I'm so glad I found this. I've been looking around for someone who has already done this so that I didn't have to do it myself for a project I am working on :) Thanks!

Damien on May 9th, 2008 – 2:02 am

Very nice. Next step would a be MicroFormat for it. :)

tim on May 9th, 2008 – 2:02 pm

what about a definition list?

Scarf*oo on May 12th, 2008 – 3:08 am

Nice work Dan :)

SL on May 12th, 2008 – 11:26 pm

Nice Job

Ian on May 15th, 2008 – 7:23 am

I second the definition list suggestion.

Argus on May 25th, 2008 – 3:24 pm

Thanks, Jonathon. That's really generous of you. However, I've no idea how to calculate the nutrition content of anything I bake or cook. Any further ideas?

Rebecca on June 3rd, 2008 – 10:56 am

Thanks for the template! I'm using it to write a high school test!

Alex on October 22nd, 2008 – 4:16 pm

Thanks so much! I'm so glad I don't live in a vacuum and thank you for sharing.

Diggo on October 29th, 2008 – 1:57 am

Thanks a lot, dude :)

Merci! on November 22nd, 2008 – 11:27 am

Merci beaucoup!

Jesse Proulx on November 30th, 2008 – 9:03 pm

Wow very nice. exactly what i was looking for.

fafhrd on December 2nd, 2008 – 11:01 pm

Thanks! This is a sincere gift to those of us that needed it!

jason on December 16th, 2008 – 4:54 pm

Good Job, It gives me a place to start.

google on January 18th, 2009 – 6:08 am

Here is google. He is nice. Thanks.

google on January 18th, 2009 – 6:28 am

Here is google. He is nice. Thanks.

Kelley on February 24th, 2009 – 6:30 pm

Thank you, thank you, thank you. I have been looking for this for a long while!!!

Barbie on March 4th, 2009 – 4:09 pm

I am just looking for the "form" to plug in numbers. How can I pull this up and just put in numbers?

j on July 2nd, 2009 – 2:34 pm

Thanks this is a big help as I was about to make my own :D

m on August 25th, 2010 – 12:18 pm

your a true hero!!!

Post a comment

I appreciate your comments. Please be aware that the system will simply reject any comments containing links back to other pages. This measure is to combat comment spammers.

Name
Comment