理解细微的语义元素

Source: Dev.to

Emphasis vs Idiomatic Text

idiomatic text 元素（“）用于将文本与周围的正文区分开来，但并不表示其重要性。适用于：

• 替代的语气或情绪
• 外语成语
• 专业术语
• 思考或内部对话

HTML 规范示例将法语短语标记为 idiomatic：

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

lang 属性指示所包裹文本的语言。“ 元素表示文本不同，而不是重要。

如果需要表达 重要性，请使用 emphasis 元素（“）。示例：

Never give up on *your* dreams.

当斜体仅用于装饰且不具语义意义时，请使用 CSS 进行视觉样式，而不是使用 或。

---

Strong vs Bold

strong 元素（）表示其内容具有显著的重要性或紧迫性。它是呈现性 **bold** 元素（）的语义替代。

正确使用示例：

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

在需要让辅助技术和搜索引擎将文本视为重要时使用 。当仅需视觉加粗且无语义强调时，使用 进行纯视觉样式。

---

Description Lists

描述列表（“）非常适合呈现术语‑定义对，或任何键‑值信息。它们由以下部分组成：

• “ – 术语（定义标题）
• “ – 描述（定义数据）

常见使用场景包括产品规格、常见问题、联系信息以及元数据。

示例：

HTML
HyperText Markup Language

CSS
Cascading Style Sheets

JS
JavaScript

只要相关信息可以表达为标签及其对应的值，描述列表就能提供清晰、语义化的结构。

---

这些课程是 freeCodeCamp 响应式网页设计认证的 Semantic HTML 模块的一部分。它们展示了如何为意义、可访问性和可维护性选择合适的语义元素。