The and elements in HTML

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.