Skip to main content

/ Treasa Ní Chonchúir

Markup patterns

Here are markup patterns I use on this site. You may also be interested in the site colophon and in the custom elements I use here.

Table of Contents

  1. Asides, examples, notes, and warnings
  2. Carousels
  3. Embeds
  4. Feed-only content
  5. Galleries
  6. <hr> variants
  7. Hero images
  8. Inset text
  9. Snug captions
  10. Tombstones
  11. Mentions
  12. Postnominals
  13. Quotes
  14. Slides
  15. Stealth links

Asides, examples, notes, and warnings

<aside>
  <p>Something distinct from the main content…
</aside>
<aside class=example>
  <p>For instance, …
</aside>
<aside class=note>
  <p>What’s particularly interesting here is…
</aside>
<aside class=warning>
  <p>This page will self-destruct in 10 seconds.
</aside>

Instagram-style multiple-image carousels: the tess-carousel element

This custom element uses CSS Scroll Snap to do its thing. It even works with JavaScript disabled.

Making third party embeds behave: div.embed-container

Third party embeds often don’t behave well when dropped onto a page. I’ve found I can work around the vast majority of cases by sticking them in a flex container.

<div class=embed-container>
  … embed goes here …
</div>

Feed-only content: the feed-only class

Sometimes I post content that is unlikely to render in full fidelity or interactivity in feed readers. For instance, the colored table cells in this post. I put a warning in the post content that gets included by my Atom feed generator, which I display: none on my site.

<aside class=feed-only>
  <p>This post contains content that your feed reader may ignore.
</aside>

Grids of images: the gallery class

When I have a bunch of figures grouped together, I often want them to make a pretty grid of images in larger browser windows. I use a gallery class and a bunch of @media blocks plus CSS Grid to achieve this.

<section class=gallery>
  <figure>…</figure>
  <figure>…</figure>
  <figure>…</figure>
  <figure>…</figure>
</section>

<hr> variants: hr.dinkus, hr.fleuron, hr[title]

A dinkus is a series of three asterisks used as a section break. So I type <hr class=dinkus> and this is what comes out:

Sometimes I use a fleuron for a more stylized section break. Typing <hr class=fleuron> produces:

I’ve also made it possible to customize the text used for the separator with the title attribute. For instance, <hr title="⁂"> looks like this:

I used to use a dinkus for my default <hr> styling, but recently decided to embrace <hr>’s default styling. I think that’s a better fit for this site’s minimalist vibe.

Hero images

For the most part, I keep content constrained within a centered colum on the page, including images. They look like this:

A transformer on a sidewalk in San Francisco’s Mission District. It’s been painted with a styleized depiction of a woman standing in front of the Lexington Club, an iconic lesbian bar that unfortunately closed several years ago.
The Lex

Sometimes I like to have “hero” images that are full-bleed. I mark them with a hero class, like so:

<figure class=hero>
  …
</figure>

They look like this:

A transformer on a sidewalk in San Francisco’s Mission District. It’s been painted with a styleized depiction of a woman standing in front of the Lexington Club, an iconic lesbian bar that unfortunately closed several years ago.
The Lex

Inset text

Sometimes I like to scoot the caption of an image up into the image itself, like I did for the image right above this section. To do this I mark the <figcaption> element with an inset class.

<figure>
  …
  <figcaption class=inset>…</figcaption>
</figure>

Snug captions

Sometimes I want figure captions to be much closer to the figure itself, and stylistically offset from the regular text. I use <figcaption class=snug> for this:

A transformer on a sidewalk in San Francisco’s Mission District. It’s been painted with a styleized depiction of a woman standing in front of the Lexington Club, an iconic lesbian bar that unfortunately closed several years ago.
The Lex

End of article tombstone: .halmos

I sometimes end articles with the U+220E ∎ END OF PROOF character. When I do so, I surround the character with an element that has class=halmos. Sometimes that’s just a span:

<span class=halmos>∎</span>

Sometimes I use the tombstone to carry the article’s permalink. In those cases, I use <a rel=bookmark>.

<a href="" class=halmos rel=bookmark>∎</span>

Mentions: a.mention

This is how I at-mention a user from some other site:

<a href=​https://​cohost.​org/​hober class=mention>hober</a>

I prepend an at sign to mentions by default with a ::before pseudo-element: hober. Depending on the site, however, I sometimes style mentions in more interesting ways. Here are some examples:

I wonder if it would be better to use XFN’s rel=contact instead of class=mention. I asked tantek.

Postnominals: abbr.postnominal

Fr. Daniel Berrigan, SJ is written like so: <abbr title=​Father>​Fr.​</abbr> <a href=​https://​danielberrigan.​org/>​Daniel Berrigan</a>, <a href=​https://​en.​wikipedia.​org/​wiki/​Jesuits​><abbr title="Society of Jesus" class=postnominal>SJ</abbr></a>

Quotes with attribution: figure > blockquote

<figure>
  <blockquote cite=​https://​en.​wikipedia.​org/​wiki/​Occam's_​razor lang=la>
    <p>Entia non sunt multiplicanda praeter necessitatem.
  </blockquote>
  <figcaption>— <a href=​https://​en.​wikipedia.​org/​wiki/​Occam's_​razor​>William of Ockham</a></figcaption>
</figure>

Slide decks: article.deck

When I mark up slides I use an <article> element for the deck itself and <section> children to represent each slide. I mark the current slide with the aria-current attribute.

<article class=deck>
  <section>slide one</section>
  <section aria-current=true>slide two is the current slide</section>
  …
  <section>slide N</section>
</article>

Stealth links: a.stealth

Sometimes I want a link to just look like regular text. This class does that. The link still works—you can click on it, and AT announces it to users—it just doesn’t look like a link visually. The first AT in this paragraph is such a link.