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 2 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 (apart from SitePoint of course) have you been using?

Tags: html, Web Design Tutorials & Articles
Jennifer Farley is a designer, illustrator and design instructor based in Ireland. She writes about design and illustration on her blog at Laughing Lion Design.

Free Guide:

How to Choose the Right Charting Library for Your Application

How do you make sure that the charting library you choose has everything you need? Sign up to receive this detailed guide from FusionCharts, which explores all the factors you need to consider before making the decision.

  • tiggsy

    This looked great, but when I tried it out, the popups just didn’t happen. Is it only for Internet Explorer? I use Firefox, of course

    • http://www.laughingliondesign.net Jennifer Farley

      Hi Tiggsy. I used Chrome and the popups were fine, not sure about Firefox but I would have thought it would work ok.

  • http://www.iraqtimeline.com/maxdesign Black Max

    This is a nifty resource. Thanks for sharing it, Jennifer.

    • http://www.laughingliondesign.net Jennifer Farley

      My pleasure BM.

  • memomeshmovies

    it’s a very easy steps to learn about the HTML 5 Elements and happy you share it with us , very nice post for knowledge.

Special Offer
Free course!

Git into it! Bonus course Introduction to Git is yours when you take up a free 14 day SitePoint Premium trial.