Don't Forget About Those HTML Elements

As much work as I do in HTML I often forget all the different elements we have at our disposal. I think the ones that are most often forgotten and also most useful are the inline elements. What's great about leveraging HTML elements is that you likely get a little browser default styling (which usually doesn't break anything) along with improved semantic meaning and more accessible code. That sounds like a pretty sweet deal. Let's check out some of my favorites.

Below you'll find a list of some of the available inline elements. This isn't an exhaustive list, but it's a subset that I find most useful and worth noting.

To make these examples a little more entertaining I'm pulling some example text from one of my favorite lorem ipsum generators, Bluth Ipsum.

<strong>, <b>, <em> and <i>

<p>Michael was having brunch with Sally Sitwell at a restaurant called
<b>Skip Church's Bistro</b>. In addition to brunch, the restaurant was
known for an item on the menu called the <i>Skip's Scramble</i>, an
omelet that contained <em>everything</em> on the menu. <strong>Do not
order the Skip's Scramble</strong>.</p>

The <strong> isn't one I typically forget, but it's good to call out. This element is used to give more importance to some bit of text. It'll typically be styled by the browser to look bold. This shouldn't be confused with the <b> tag which will likely look similar (without any custom styling), but its meaning is different. It's not meant to convey anything of elevated importance. It's meant to draw additional attention to bit of text without conveying additional importance. It feels like we're splitting hairs a bit here, I know.

The <em> element is used to give emphasis to some bit text. Similarly to the <strong>vs <b> relationship, the <i> tag is often confused to accomplish the same thing as <em>. This isn't true (at least not semantically). The <i> element is meant to show that some text is offset from the surrounding text for some reason. It's not about emphasis in this situation.

You should be reaching for more semantic elements before reaching for <b> and <i>. Honestly, their use-cases in the real world are going to be fairly rare, but it's good to know that they exist and do carry some semantic meaning, but most likely you should be reaching for <strong> and <em>in these situations.

<u>

Yes, he's like the steel man from <u>The Wizard From Oz</u>. Tobias
is <u>Queen Mary</u>.

Yep, the <u> element does in fact underlinetext. It's recommended by the HTML5 spec that there is almost always a more choice, but you may find it useful at some point. I find it kind of difficult to actually articulate a situation where it makes sense. One use could be in defining a proper noun for some reason (yeah…I know, it's tricky). I'm moreso noting this one to point out that you should probably not be using it. I suspect it gets used quite often when it doesn't make sense (semantically speaking).

<s>

<div>
  Original Price: <s>$30.00</s><br />
  Sale Price: $25.00
</div>

<s> is called the strikethrough element. It is used to denote that some particular textual information is no longer relevant. One of the more obvious example uses of this one is when defining a sale price of product. This way you can display the original price in a meaningful way (but longer relevant) and the new price.

<ins>

She's a contestant. It's sorta like an <ins>inner</ins> beauty pageant.

This one is interesting and I think potentially more useful in the web app development space. The <ins> is used to convey that some text has been newly inserted into the document. So consider the example above. Perhaps we were collaborating on some text with a document editing web app like Google Docs and someone decided to add the inner into the sentence. This new addition is now called out.

<sup and <sub>

What is the answer to 10<sup>4</sup>?

The chemical formula of water: H<sub>2</sub>O.

The <sup> and <sub>, superscript and subscript respectively, are used only for typographic display purposes. Though I'm sure there are some other use-cases, I most often think they're most valuable in displaying math and science related text like the examples above (displaying 10 to the fourth power and the chemical symbol for water).

<small>

<small>Side effects may include increased strength and increased ability
to see through things.</small>

The <small> is used to display small print. I know, obvious right? Some example use-cases would be a copyright statement or maybe some legal text.

<mark>

Sweet old thing. Only two of those words describe <mark>Mom</mark>, so
I know you're lying to me.

<mark> is used to mark rendered text for reference purposes. A great example here is that it can be used to highlight a search term on a search results page.

<code>

This is how we declare a Javascript variable: <code>var i = 0;</code>.

The MDN description of <code> sums it up quite succinctly, it "represents a fragment of computer code." Typically it will be displayed in the browser's default monospace font which definitely makes it feel much more code-y, right?.

<time>

The concert took place on <time datetime="2001-05-15T19:00">May 15</time>.

This one is pretty obvious, but it's one that I forget about all the time. The <time> is used to denote time on a 24 hour clock or you can even note a specific time by leveraging the optional datetime attribute noted in the example.

<cite>

Find a more detailed explanation in Darwin's <cite>On the Origins of
Species</cite>.

The <cite> element is used to call out a citation in a block of text. A good use would be a citation in a research paper. Nothing too tricky here.

<pre>

<pre>
.thing {
  color: #fff;
  background-color: #000;
}
</pre>

<pre> deonotes preformatted text. What's cool about this element is that any text wrapped in <pre> tags maintains its whitespace. What does that mean> In the example above I'm just displaying a bit of CSS and all of the spacing and line breaks are maintained exactly like originally typed them. Pretty handy in some situations.

<q>

You're a year older…and a year closer to death. <q>Oh yeah, I guess
that's kind of funny<q>, Buster said.

The <q> element denotes a short inline quote. Pretty straightforward I'd say, but this is one I forget about most of the time.

Like I said at the top, I'm certainly not going through all of the available inline elements here, but these are some that I find particularly useful or just worthy of defining. It's a good idea to keep these on your mind as you're writing markup. Having an idea of what the HTML spec provides you will only make your code more semantic and accessible and just flat out better. And hey, that's just what I want.