Understanding Nuanced Semantic Elements

Source: Dev.to

Emphasis vs Idiomatic Text

The idiomatic text element (“) is used for text that is set apart from the surrounding prose but does not carry importance. It is appropriate for:

• Alternative voice or mood
• Foreign idioms
• Technical terms
• Thoughts or internal dialogue

The HTML specification example marks a French phrase as idiomatic:

There is a certain *je ne sais quoi* in the air.

The lang attribute indicates the language of the enclosed text. The “ element signals that the text is different, not that it is important.

If you need to convey importance, use the emphasis element (“). Example:

Never give up on *your* dreams.

When italics are purely decorative and add no semantic meaning, apply visual styling with CSS instead of using or.

---

Strong vs Bold

The strong element () conveys that its contents are of significant importance or urgency. It is a semantic alternative to the presentational **bold** element ().

Example of proper usage:

**Warning:** This product may cause allergic reactions.

Use when the text should be understood as important by assistive technologies and search engines. Reserve for purely visual styling when no semantic emphasis is intended.

---

Description Lists

Description lists (“) are ideal for presenting pairs of terms and definitions, or any key‑value information. They consist of:

• “ – the term (definition title)
• “ – the description (definition data)

Typical use cases include product specifications, FAQs, contact details, and metadata.

Example:

HTML
HyperText Markup Language

CSS
Cascading Style Sheets

JS
JavaScript

Whenever related information can be expressed as a label and its corresponding value, a description list provides a clear, semantic structure.

---

These lessons are part of the freeCodeCamp Responsive Web Design certification’s Semantic HTML module. They illustrate how to choose the appropriate semantic elements for meaning, accessibility, and maintainability.