This blog was written in 2022, HTML examples given might not exist in the wild anymore. That's certainly the case for the examples from my own layout.

Title, subtitle and chapeau

The page you’re working on probably has a title (don’t forget, that’s usually your h1), but that’s usually not the only heading you have on a page. If you have a heading below your title that explains a bit more about it or your site, you can call that your subtitle. So far, so good, right? No difficulty in naming these headings.

What if you don’t have a subtitle, but a more descriptive heading placed above your title? Let’s look at a journalistic article. In journalism this is actually called a chapeau. If you look in the inspector at my website you can see that I used that here.

<h1 class="chapeau">lead front-end developer</h1>

Note: when designing this website in 2018, I made this my h1 because I wanted to rank on my job title and not on my name.

Intros and leads

Most of the time when you’re creating the HTML for a blog or an article, you will probably call a first paragraph the intro. But it could also be that you need intro for another element. Then what will you call the first paragraph when it needs to have a class different from the other paragraphs?

Again, let’s look here at a journalist article. The intro is usually not really a part of the article, but it explains a bit more about it and what you can expect to read there. Both the websites of De Volkskrant and NRC make use of this.

<p class="artstyle__intro">
  Dagelijks worden er coronacijfers gepubliceerd door gezondheidsautoriteiten
  wereldwijd. Op deze pagina vindt u de nieuwste gegevens over
  ziekenhuisopnamen, besmettingen en sterfte door corona, en het verloop van de
  vaccinatiecampagnes, in Nederland, Europa en de rest van de wereld.
</p>

Source: De Volkskrant

<div class="intro article__intro">
  <p>
    <span class="keyword">Ongewenst intiem?</span>
    Hoe gaan acteurs en makers om met intimiteit op het podium? „De zoen was
    essentieel voor de impact van de voorstelling.” Maar: „Een kus kan voor een
    acteur heel kwetsbaar zijn.”
  </p>
</div>

Source: NRC

The first paragraph of an article is meant to drag you into it, it’s here where the reader decides if they are going to read on. It’s catchy, in styling it usually stands out a bit more than the other paragraph. It is also a part of the article, where an intro isn’t. It is called a lead. De Correspondent makes use of this, although in their design the lead is placed first, apart from the title, image and the rest of the content. I can imagine that for the developers this wasn’t an easy thing to name!

<div class="article-lead">
  <p>
    De toeslagenaffaire ontstond doordat gezinnen voor de kleinste foutjes
    genadeloos werden afgestraft en al hun kinderopvangtoeslagen moesten
    terugbetalen. Nu is de pendule volledig de andere kant op geslagen: bij de
    minste aanleiding heb je al recht op riante compensatie, zelfs als je wel
    degelijk de boel bedonderd hebt. De kosten lopen inmiddels op tot 5,5
    miljard euro, elf keer zo veel als vorig jaar nog was begroot.
  </p>
</div>

Source: De Correspondent

Quote and streamers

I don’t think a quote needs a lot of explanation. You are probably familiar with the HTML element of blockquote and giving this a class of quote is only logical.

A more interesting element from a journalist article and one we can certainly use as developers: a streamer. A streamer can be a couple of things. It’s not so much a technical term, as it is a design term. It can be a heading in your article or it can be a sentence from the article that needs to stand out. You could even use it on another page to attract attention for a page or blog in particular. I bet this comes in handy!

Interestingly enough, De Correspondent uses a blockquote with a class name of streamer.

<blockquote class="Streamer">
  Zo lijkt de geschiedenis van de toeslagenaffaire zich langzaamaan in
  spiegelbeeld te herhalen
</blockquote>

And NRC even uses both.

<blockquote class="streamer quote">
  <p class="bq">
    Je ziet ook vaak dat vooral jongens wegkijken of hun tas voor hun hoofd
    houden als het gebeurt
  </p>
  <p class="qsource">Denzel Goudmijn <span class="qttl">acteur</span></p>
</blockquote>

Naming things is hard!

Particularly these last two examples prove that naming things is hard. Even more so when you want to keep it simple. Sometimes I even joke that naming my kids was easier.

As I showed you here with these naming conventions from journalism, we can make our job as developer a bit more simple sometimes. Just take a look at other disciplines. We don't have to reinvent the wheel.