In the course of writing about my experiences and projects, I often find I need to present different forms of information—things like photos, videos, maps, 3-D models, and charts. Unfortunately, for all its power, modern HTML provides very little built-in support for ‘multimedia’ types, leaving users to rely on JavaScript libraries like Three.js, Chart.js, and Mapbox. These all require some amount of coding, making them hard to use and integrate, forcing content authors to lean on heavyweight publishing platforms.

Defining Custom Elements

Despite the code-heavy approach of most of these libraries, it’s actually incredibly easy to define custom HTML elements and there’s nothing to stop us writing tags that give authors a clean declarative way to express their content. That’s how I approach things on this site, and it lets me easily add rich media as inline HTML to my Markdown posts.

For example, with the inclusion of a single JavaScript file, I’m able to extend HTML to support maps,

<x-map>
    <x-location latitude="35.671336"
                longitude="139.702941">
        Harajuku Station
    </x-location>
    <x-location latitude="37.766655"
                longitude="-122.418129">
        1515 15th St
    </x-location>
</x-map>

Harajuku Station 1515 15th St

STL files,

<x-model src="model.stl" />

and charts,

<x-chart type="pie" legend="bottom">
    <x-chart-labels
        data-values="January, February, March, April, May, June, July">
    </x-chart-labels>
    <x-chart-dataset
        data-values="12,19,3,3,5,2,3">
    </x-chart-dataset>
</x-chart>

Your browser doesn’t support x-chart tags.

all with relative ease.

None of these represent perfection in their HTML tag design (they’re very much a first-cut), but they allow me to author this website quickly and easily, and demonstrate that we don’t need overly complex platforms or editing tools.

I would love to see library authors offer HTML extensions as part of their frameworks to really reduce the barrier-to-entry. It would also provide a wonderful oportunity to explore the possibility of future HTML tags—I don’t closely follow the HTML standards bodies, so I don’t know this to be true, but I have a sense that we’ve all-but given up on simple user-editable markup at a time when it is perhaps easiest to achieve.

If you’d like to use the chart support in your own sites, you’re welcome to check it out on GitHub. It’s very much a first draft, so your mileage may vary, but I’d love input and help developing it.