HTML Annotation Techniques

A survey of possible methods to annotation HTML elements with additional data. In this case populations values which Javascript code will read in order to draw a horizontal bar graph.

All the various contortions and trickeries in the first 10 examples are now obsolete, because the standard DOM dataset property used in the 11th example now works as advertised.

• "Obtrusive" Javascript (source)
• "Semi-Obtrusive" Javascript (source)
• "Unobtrusive" Javascript (source)
• Attributes (source)
• Namespace Attributes (not working) (source)
• "id" Attributes (source)
• "class" Attributes (source)
• Invisible Elements (source)
• HTML Comments (source)
• HTML5 Annotations using Data Attributes (source)
• HTML5 Annotations using Datasets (source)

Auxiliary files:

• DrawPopulationGraphBars.js
• PopulationData.js
• PopulationGraph.css

(Note: source code views were generated using Pygments.)