Understanding Nuanced Semantic Elements

The next set of theory lessons in the Semantic HTML section of the freeCodeCamp Responsive Web Design certification explores nuanced semantic elements.

First up, we’re asked when to use the emphasis element instead of the idiomatic text element. While the idiomatic text element was once purely presentational, it now conveys alternative voice or mood, foreign idioms, technical terms, and thoughts.

The official HTML specification provides an example that uses the i element to mark an idiomatic phrase in French, as shown below:

<p>There is a certain <i lang="fr">je ne sais quoi</i> in the air.</p>

The i tag's lang attribute sets the text's language to French. The element marks text as different, not as important.

If you want to highlight the importance of text, use the em (emphasis) element. The following example demonstrates its use inside a paragraph:

<p>
  Never give up on <em>your</em> dreams.
</p>

These elements aren't for visual styling alone. If italics don't add semantic meaning, use CSS instead.

The next lesson explains when to use the strong element instead of the b element to highlight important content. As a semantic HTML element, strong emphasizes text that is significant or urgent. The example below illustrates this usage:

<p>
  <strong>Warning:</strong> This product may cause allergic reactions.
</p>

Covering what description lists are and when to use them, the final lesson in the set highlighted their role in presenting terms and definitions in an organized, easy-to-read format - much like the following example:

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>

  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>

  <dt>JS</dt>
  <dd>JavaScript</dd>
</dl>

Description lists are useful for product specifications, FAQs, contact information, and metadata. Whenever you have related information in a key-value format - one item as the label and the other as the value - a description list is ideal.

This concludes this series of theory lessons from freeCodeCamp, as outlined in this post and the previous one. It’s the first time I’ve emphasised the theory lessons in the curriculum in this way. I hope you found it interesting!