Ross Has a Great HTML Tasting Menu
HTML tasting menu - Yesterday in the Homebrew Website Club - IndieWeb, Ross A. Baker shared a gem, which is an HTML Testing Menu that is a naked (no CSS nor JavaScript) HTML listing of all HTML elements with an example of its use. I have long wanted something like this for two reasons: 1) Seeing HTML with no JavaScript nor CSS and how an element displays natively before anything is added; 2) Have a base HTML to then link to a CSS style sheet to test it to see how it reacts with bare HTML and see what is missed or what isn’t displaying as expected.
In the early 2000s I had a basic HTML file that was similar to this, but I don’t think it had all the elements and mostly used it for the second use case, to test CSS that I or the teams I was working on or with were designing and building out. In the early 2000s it was relatively common to run into sites that were mostly straight up HTML with no or little CSS. Some of these pages used HTML to its fullest extent and did it incredibly well. I have a deep appreciation of others who use <dl>, <dt>, and <dd> properly and well.
I’ve picked up Ross’s page for my use to throw my CSS into to test, I as I haven’t had that in a long while. A tool like this with all the elements is really helpful. The Tasting Menu is also a really good run through to test yourself on some of the newer and more obscure HTML elements.
In the last 10 to 15 years I’ve worked with designers and developers on projects that have been using JavaScript frameworks and a quick fix isn’t available as they don’t quite understand HTML, nor CSS, nor the DOM (document object model) as it is natively and the structures available to make a one line modification aren’t available as they only understand the framework and can’t add proper structure to make the fix that should be quick. Often the change that should be 5 minutes is many hours and rebuilding. The, “my framework doesn’t have a module for that” is really tiresome, but the answer isn’t switching frameworks to get the modules it it is actually understand the digital environment you are working on.
To learn HTML elements, Ross’s Tasting Menu is a great place to start, as he also links out to MDN Web Docs, which is the best resource for HTML and CSS documentation that I know of.