Over a million developers have joined DZone.

Two Periodic Tables: HTML5 of (Chemical) Elements, and Of HTML5 Elements

DZone's Guide to

Two Periodic Tables: HTML5 of (Chemical) Elements, and Of HTML5 Elements

· Web Dev Zone
Free Resource

Learn how to build modern digital experience apps with Crafter CMS. Download this eBook now. Brought to you in partnership with Crafter Software

Okay, so 'elements' here is a pun. Unless you see some analogy between interoperability and ionization potential, because what determines kind and degree of interaction is sort and strength of affinity, and..well, no, probably not.

But one thing these two tables do share is that people interested in HTML5 might be interested in both of them.

The first -- more practical and less technically impressive -- simply displays all elements in the latest HTML5 working draft (including elements previous to HTML5), grouped together:

You might also detect a joke or two -- table-related elements, for example, are located in the group corresponding to the noble gases, because, I guess, tables don't do anything, haha -- and <html> takes hydrogen's place, because, perhaps, <html> is the basis of everything else. Or maybe <html> fuels the stars(=web developers).

The second -- an actual periodic table of chemical elements -- is much more impressive, chiefly because it uses HTML5 as extensively and effectively as Flash. (And because it's an actual periodic table.)

All the facts are there, as they are in a dozen other websites, but this site adds: zoom to element on click, visual dynamic model of nucleus and electron shells, and really cool scrolling transitions between different kinds of information (general, physical, atomic, etc.):

The electrons rotate in different directions and at different speeds, by the way, depending on distance from the nucleus (in a 2d projection of Bohr's model), using JavaScript like this:

	for (var xi = 0; xi < this.electrons[i]; xi++)
	{ // Draw each electron on this shell
		angle += spacing;
		var x = Math.cos(angle * Math.PI / 180) * distanceFromCenter;
		var y = Math.sin(angle * Math.PI / 180) * distanceFromCenter;
		ctx.lineWidth = 1;
		ctx.fillStyle = '#333';
		ctx.arc(200 + x, 200 + y, 9, 0, Math.PI*2, true);
		// Draw the electron
		var radgrad = ctx.createRadialGradient(190 + x + 6, 190 + y + 6, 2, 190 + x + 10,  190 + y + 10, 9);
		radgrad.addColorStop(0, '#67a4d7');
		radgrad.addColorStop(0.9, '#183f9f');
		radgrad.addColorStop(1, 'rgba(0,0,0,0)');
		ctx.fillStyle = radgrad;
		ctx.fillRect(190 + x, 190 + y, 20, 20);
	this.angleStep += 1;

Check out the full site (and view the source) for more.


Crafter is a modern CMS platform for building modern websites and content-rich digital experiences. Download this eBook now. Brought to you in partnership with Crafter Software.


Opinions expressed by DZone contributors are their own.


Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.


{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}