1 Thing A Week 1 Thing
A Week

The <var> and <samp> elements in HTML

Week 206.0 — 4th October '21

I’ve posted a fair bit of content around html and css this year and each time I have a code example I have resorted to using a code block which I have styled as a literal block.

I will eventually change the CSS to allow for inline code examples but I have a few other things I’d prefer to improve over that across a few of my various projects.

Markdown let’s you specify keywords or phrases that should be highlighted as code by wrapping them in back ticks and it works really well.

The <var> element

This past week I somehow stumbled across the <var> element in HTML which covers my use case for most of the time.

The <var> tag is used to defines a variable in programming or in a mathematical expression.

The use case is pretty clear, but there are times where I'd consider using it for specific values too. Should I do this? According to the spec, no. I usually want to highlight the name of a property (variable) rather than what that property’s value is so it's not a deal breaker and still brings a lot of value to my markup.

The <samp> element

As <var> was something fairly new to me, it meant reading some of the spec which brought me to the <samp> element.

Define some text as sample output from a computer program in a document

It's not often I render the output of an API call or computer program, but it's great to see that there's an element that is exactly for those use cases. When it comes to documentation, this is really handy. Given the description, it's not limited to API calls either. Wrap it around the error messages you're writing about in a blog post or in your documentation and you know have a more explicit description of the content within the tags.

More from 1 Thing A Week
« Why I can't wait for the :has() pseudo-class in CSS Apple Maps update introduces 'Look Around' feature to the UK The CSS max() function »

Advertisement

Notable

Quick links and commentary on interesting articles, videos and more throughout the week.

  1. 206.1 – Monday
    1. Create amazing wallpapers using iPhone 13 Pro's Macro feature iPhonedo on youtube.com
  2. 206.4 – Thursday
    1. LEGO x DC Batman Batmobile Tumbler: Scarecrow Showdown   £34.99 lego.com
  3. 206.5 – Friday
    1. iOS 15 features, tips and tricks you probably don't know macrumors.com
  4. 206.7 – Sunday
    1. Ford 021C concept by Marc Newson marc-newson.com

Jump to notable items for Week #205, Week #207 , view the notable archive or my favourites.

About 1 Thing A Week

A website curated by @cchana bringing you 1 Thing A Week, delivered every Monday morning.

You can find a list of all articles in the archive, or read the most popular.

Find out more about 1 Thing A Week or read the privacy policy.

Market

Visit the market and support 1 Thing A Week.

You can find 1 Thing A Week on Twitter, Facebook, Instagram & Reddit