Heads up! This blog post hasn't been updated in over 2 years. CodePen is an ever changing place, so if this post references features, you're probably better off checking the docs. Get in touch with support if you have further questions.

We have a brand new theme for May’s CodePen Challenges. Some HTML elements are just made to come in pairs, so let’s celebrate them by coming up with some clever demos showcasing these HTML buddies.

In week one we looked at <del> and <ins>.

The community took this humble pair in both playful and practical directions. Here are just a few of our favorites from week one.

Mindy recreates Maurice Moss’ emergency email in “<del> and <ins>”

<del&rt; and by Mindy (@minbarrs) on CodePen.

Jonas Linn went the code dif route in “ins & del Diff”

See the Pen ins & del Diff by Jonas Linn (@segg) on CodePen.

Adrian Roselli demonstrates styles to make <del> and <ins> more usable for screen readers, other languages, Windows High Contrast Mode, and print in “HTML Buddies: del & ins”

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

Mark Ostrander marks it up with red ink in “<del> and <ins>”

#codepenchallenge <del&rt; & by Mark Ostrander (@ostranme) on CodePen.

We’ve gathered up all of these and more from the <del> and <ins> challenge in our collection #CodePenChallenge – Del & Ins.

Let’s do up <details> and <summary> for week two!

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!

Ideas

  • Details & Summary behave a lot like the accordion design pattern, only just the basics. Could you layer on functionality, like a group of details elements in which only one can be open at once?
  • Can you progressively enhance Details & Summary to add custom styling and animation?
  • These elements don’t work in Edge. You could have a look at the polyfills out there and perhaps build your own if you’d like to have a go at it.

Resources

Thanks to An Event Apart for sponsoring!

It’s a perfect match this week. An Event Apart‘s speakers aren’t merely industry leaders with years of experience and deep insight. They’re also engaging, inspiring thinkers who are passionate about sharing what they’ve learned and helping you level up your skills.