Design & UX

The Periodic Table of the HTML 5 Elements

By Jennifer Farley

If you’re interested in learning HTML or already know HTML but want to find out which elements are in use in HTML 5, then you might find Josh Duck’s Periodic Table of the Elements to be a useful resource. The colorful table is laid out in a similar style to the scientific periodic table of elements. This table of tags includes 104 elements in HTML5 working draft and two proposed elements which are highlighted with an asterisk.

Each section of the table is color coded, breaking the elements into groups such as tabular data, interactive elements, forms and metadata, and scripting.


Clicking on any element reveals a pop-up label with a short explanation of what each tag does, as well as links to W3 Schools and the W3C Developer’s Guide.


Another handy feature is the “how are they used” section which lets you type in the URL of a web site and the table changes to highlight which tags are used on that site. You can see in the example below which elements are used on the BBC web site.


The periodic table layout used here is a clear and concise way to view all of the elements together. This is a simple but useful learning tool and one that I will be recommending to the students in my web design class. Josh Duck is a LAMP developer working in Brisbane, Australia.

If you’re learning HTML or figuring out HTML 5, what other resources have you been using?

  • Purushottam Kushwaha

    Very helpful for quick revision. Thanx for sharing this table

  • Jerry

    Great idea, quick way to check out the elements that you rarely use but need from time to time. This should be referenced in every HTML class as many people learn visually.

  • Music Critic

    Everyone things that HTML5 is a new replacement for Flash. This cool exercise in the Periodic Table shows that there is no Flash replacement. The only cool thing is that you can embed straight video without plugins but unfortunately that’s not standardized either. Anyway, thanks for bring attention to this table. It makes perfect sense.

    • carakas

      I’s more than just the video and audio tag, with canvas and webgl you can create more that flash can. Adobe evenbrought out a program that converts your .flv file into pure html5. so it realy can and will replace flash on the web. I’ve seen games in html5

  • Eoin

    Cool idea. It brings me back…. ah sweet science class :)

  • Nic

    I’ll definitely be using this for my web design class. Thank you.

  • Hemal Shah

    this one helps understand where we can optimize and to learn how others are using the code.

  • Pingback: 20 Best HTML5 Tips, Tricks And Tutorials From 2011()

  • Pingback: 20 Best HTML5 Tips, Tricks And Tutorials From 2011 | Joomla Magento Wordpress Prestashop blog posts from around the web()



Because We Like You
Free Ebooks!

Grab SitePoint's top 10 web dev and design ebooks, completely free!

Get the latest in Design, once a week, for free.