HTML Tag Experiments

Template Element

The template tag holds content that won't render until cloned with JavaScript.

Template content is hidden above (view source to see it).

Picture Element

The picture element allows multiple image sources for responsive design:

Responsive image demonstration

Audio Element

Native HTML5 audio player:

Video Element

Native HTML5 video player with multiple formats:

Canvas Element

Drawing graphics with JavaScript and Canvas API:

Canvas not supported. This demonstrates drawing geometric shapes with the Canvas API.

Source Element

The source element is used within picture, audio, and video elements (see examples above).

MathML - Extra Credit

Einstein's famous equation using MathML:

E = m c 2

Why MathML wasn't widely used until recently:

Despite being part of the HTML specification for years, MathML had extremely limited browser support. Internet Explorer never supported it, Chrome dropped support from 2013-2023, and Safari's implementation was incomplete. According to caniuse.com, it wasn't until Chrome 109 (January 2023) that MathML Core gained support in Chromium browsers, finally making it viable for production use. Before this, developers had to rely on JavaScript libraries like MathJax or images for mathematical notation.

Custom Semantic Element (CSS-based)

This custom element is styled with CSS only:

Demo Card Title

This is a custom semantic element called "demo-card" that uses only CSS for styling (no JavaScript required).