8/2/2025 - HTML Day 2025

Happy HTML Day! This is my first year celebrating. For the occasion, I'm playing with specialized HTML tags I've never used or heard of. Of course, I'm using mdn web docs as reference.

<map> and <area>

Functions that map a clickable area on the object (usually an image) it's assigned to. Areas can be defined as a rectangle, circle, or polygon. This makes for more precise shapes over slapping a link on an image.

My example: Look above! Manila and the HTML energy are mapped to hyperlinks (on desktop). I used a rectangle for Manila and a circle for the energy. Because I reduced the image's width in code, I had to account for the changed dimensions when plotting coordinates. A little tricky but a very cool function.

<article>

Functions as a more specific and independent container for info than <section>.

My example:

7/25/2024

Finished ChäoS;HEAd with Tip, and it was so ass. The "chaos head is a masterpiece" vid on YouTube is just one of those summary "essays" so we can say we played the game too. I enjoy the original game's UI and high-quality presentation though.

Began another PEI painting at the park but packed up early due to the cold breeze. Sbubby for dinner. Read some of Novas Aventuras de Megaman which, for some odd reason, was translated into English... not that it answered any questions I had about it when I was 14.


7/24/2024

Today's new treat was an Avalanche Beavertail: cheesecake icing, caramel syrup, and SKOR™ on a Beavertail, which is like an elongated funnelcake. Airy and sweet, though the SKOR™ bits were overpowered by the other condiments. One $8.95 tail easily serves two.

Listened to Asakusa Light while doodling Pokemon stuff. I've been sitting on a painting of a defeated Pecha and Tera for two weeks ha.

...oh, it doesn't look different at all. This is probably more useful with different styling or a script. Better for screen readers too.

<blockquote> and <cite>

An indented quote for passages over a certain line or word count. Can be used with <cite> which italicizes the cited source.

My example:

The death of such an artist means that the author is gone in a legal sense. But even so, echoes of the artist’s life may still reverberate, as knowledge of their system of production does not necessarily just disappear. And these echoes have implications for the conservation studio. The expertise of individuals intimately involved in the how and why of an artist’s creative process can help conservators make decisions which have a greater claim to authenticity— by virtue of tapping into a source straight from the “original” context in which the work was made—than the decisions that will someday be made about those same works thousands of years from now.

—Annika Svensden Finne, "When Does a Painting Truly End?" The Brooklyn Rail, July/August 2025 issue.

Feels pretty straightforward.

<kbd>

Function that signifies keys on the keyboard.

My example:

I'm left-handed, so when drawing digitally, I find Ctrl + Z or R to be inconvenient. I map these tools in art software to , and . instead.

I added CSS borders around the keys and used Courier New to separate them from the plain text. The font style may be overriden by your PC/phone's default font.

Back