CodePen HTML Buddies Challenge

CodePen created an interesting challenge for May, asking users to come up with styles and ideas for HTML elements that typically come in pairs. It has called this series HTML Buddies and ran a different challenge each week in May for different paired elements.

I participated by calling out accessibility features that can be added or used for each challenge. Instead of creating some novel interaction, I opted to create styles, functions, or tips for using the paired elements, with the hope that some of those completing the challenge might copy and paste them into their own code and their own designs.

Week 1: <del> & <ins>

These two elements are used to semantically indicate content that has been removed or added from a document. If you’re removing text, for example, you could wrap it in <del> tags which leaves it visible but, by default, striked through. The <ins> tag indicates new content, and styles it, by default, with an underline. This is gonna be a tough one good time!

You can browse every <del> & <ins> pen submitted or you can check the collection of their favorite <del> & <ins> examples.

The wrap-up blog post for week 1 featured my <del> & <ins> pen (also embedded below).

See the Pen HTML Buddies: del & ins by Adrian Roselli (@aardrian) on CodePen.

Week 2: <details> & <summary>

Aside from some form elements, you don’t often think about HTML elements as having much functionality. They largely exist to apply meaning and style. But the <details> element has some very useful functionality! It’s a hide/show toggle that you get entirely for free, no JavaScript required. What do you click to do the toggling? Why its partner in crime the <summary> element, of course!

You can browse all the submitted <details> & <summary> pens or you can check the collection of their highlighted <details> & <summary> examples.

The wrap-up blog post for week 2 did not include my submission, but all I posted was a polyfill to allow Edge to support <details> & <summary>, thereby making it accessible for Edge users. You can go to my <details> & <summary> pen and steal the polyfill, which I have also embedded below.

See the Pen HTML Buddies: details & summary by Adrian Roselli (@aardrian) on CodePen.

Week 3: <sub> & <sup>

The sub in <sub> is short for Subscript and the sup in <sup> is short for Superscript. They both alter the size and baseline position of the text they contain. User agent stylesheets set up this styling, but of course you can take control!

Browse all the <sub> & <sup> submissions or visit the curated collection of <sup> & <sub> examples (which also asked for microphone permission, oddly).

The wrap-up blog post for week 3 has some nifty experiments. My experiment noted how to expose the elements to screen readers (using code from week 1), as well as where on the vertical axis each should live based on content type. You can see my <sub> & <sup> submission, also embedded below.

See the Pen HTML Buddies: sub & sup by Adrian Roselli (@aardrian) on CodePen.

Week 4: <dt> & <dd>

You might think of the <dl> element as the definition list element, but as of HTML5 it’s actually called a “Description List”. Apparently it’s good for more than just definitions! But the real HTML buddies here are <dt> (Description Term) and <dd> (Description Details). They can be very satisfying HTML elements to use, as so few HTML elements have such a strong semantic pairing.

Check out all the <dt> & <dd> submissions or just surf the chosen <dt> & <dd> pens.

The wrap-up blog post for week 4 included my pen (yay, I bookended the challenge for May!). For this challenge I opted to share how screen readers deal with description lists, because they aren’t like other lists. You can see my <dt> & <dd> submission, also embedded below.

See the Pen HTML Buddies: dt & dd by Adrian Roselli (@aardrian) on CodePen.

Wrap-up

My entries weren’t exactly exciting, but hopefully they provided a little bit of extra context for those who might not think about how styling all these elements can enhance the experience for those with differing needs.