cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv headernumbered-list123split-screen

HTML Buddies

Some HTML elements go together like peanut butter and jelly. Some functionally tied together, semantically symbiotic, or even polar opposites. This month we'll focus on some of those pairings, handing them off to you to consider and do something unique with, beyond what browsers do with them by default!

To participate: Create a Pen → and tag it codepenchallenge and the weekly tag. We'll be watching and sharing the best stuff on our blog, Twitter, and Instagram (Use the #CodePenChallenge tag on Twitter and Instagram as well).

An event apart seattle 2013 banner
This challenge's tag: cpc-sub-sup

<sub> and <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!

Ideas

  1. The spec tells us these elements aren't for moving text around for presentational-only reasons. Say you completely ignore that. How weird could you get with these elements alone?
  2. These elements are notorious for screwing up the vertical rhythm of paragraphs. Add one, and the space above or below the line is wider than lines that don't have one. What would you do to prevent that?
  3. A big use case for sub is representing chemical formulas like H2O. Try having some fun with styling those!

Resources

Is this kind of exploration of HTML appealing to you? You'd have a great time at An Event Apart, a conference for people who make websites. Here's some resources they recommend:

Sub sup
This challenge's tag: cpc-del-ins

<del> and <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!

Ideas

  1. Strikethrough and underline are a bit boring default styles and, it could be argued, don't communicate removals and additions. Can you style it better and more clearly?
  2. A common usecase for del/ins is showing difs in code, as in, the change from one version to another. How might you style a code dif? How would you style in a code block on a blog post?
  3. Could animation be helpful somehow?
  4. This begs for a deeper semantic exploration of changes to documents. How about a JavaScript-powered timeline of changes?

Resources

Is this kind of exploration of HTML appealing to you? You'd have a great time at An Event Apart, a conference for people who make websites. Here's some resources they recommend:

Del ins
This challenge's tag: cpc-details

<details> and <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!

Ideas

  1. 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?
  2. Can you progressively enhance Details & Summary to add custom styling and animation?
  3. 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

Is this kind of exploration of HTML appealing to you? You'd have a great time at An Event Apart, a conference for people who make websites. Here's some resources they recommend:

Details