每天一个前端小知识 Day 1 - 语义化 HTML

📘 语义化 HTML（Semantic HTML）

1. 什么是语义化 HTML？

语义化 HTML 指的是使用符合内容含义的标签，而不仅仅为了布局或样式。例如：

<article>...</article>
<nav>...</nav>
<header>...</header>

这些标签本身就能表达内容的结构和用途，有助于语义表达、可读性、SEO 和无障碍能力 。

---

2. 为什么面试官关注语义化 HTML？

• 可访问性（Accessibility）：屏幕阅读器基于标签结构提供导航，使用正确语义标签更友好。
• SEO：搜索引擎抓取结构化页面更高效。
• 可维护性：可读、易理解，团队协作效率更高 。
• 标准兼容：现代浏览器更倾向于支持语义标签，减少兼容问题。

---

3. 常见语义标签及用途

标签	描述
<header>	文档或内容的头部区域，通常包含 logo、导航或标题
<nav>	导航链接区域
<main>	页面主要内容区域，每页只应包含一个
<section>	分区模块，用于主题内容分组
<article>	独立、可分发或重用的内容，如新闻、博客贴子 (geeksforgeeks.org1)
<aside>	侧边栏内容，如广告、相关文章
<footer>	底部信息，如作者、版权、联系方式
<figure> + <figcaption>	图文块，如图片配上说明
<time>	时间/日期信息，支持 datetime 属性以格式化日期

---

4. 示例：用语义标签构建文章结构

<article>
  <header>
    <h1>理解语义化 HTML</h1>
    <time datetime="2025-06-14">2025‑06‑14</time>
  </header>
  <section>
    <h2>为何使用语义标签？</h2>
    <p>提高 SEO、无障碍、可维护性。</p>
  </section>
  <figure>
    <img src="diagram.png" alt="示意图">
    <figcaption>页面结构示意图</figcaption>
  </figure>
  <aside>
    <h3>相关阅读</h3>
    <ul>
      <li><a href="...">HTML5 新特性</a></li>
    </ul>
  </aside>
  <footer>
    <p>作者：前端达人</p>
  </footer>
</article>

---

5. 面试常见考题 & 回答建议

1. 问：什么是语义化 HTML？它的作用是什么？

   答：语义化 HTML 是使用与内容意义相符的标签，便于阅读、SEO、可访问性和维护。

2. 问：HTML5 里新增了哪些语义标签？

   答：如 <article>, <section>, <header>, <footer>, <nav>, <aside>, <figure> 等 (owlcoders.com2, interviewbit.com3)。

3. 问：<div> 和语义标签相比，有什么区别？

   答：<div> 仅用于布局，无语义；语义标签表明其用途，对机器、无障碍工具更友好。

4. 问：何时使用 <section> vs <article>？

   答：<article> 用于可以独立发布的内容，如新闻贴；<section> 用于内容内的组织分组 。

5. 问：讲一下 <time> 的用法？

   答：用于标记时间/日期，datetime 属性支持 ISO 8601，方便解析和索引 (climbtheladder.com4)。

---

6. 实战建议

• 从最基础的布局结构开始 ：先用 <header>, <nav>, <main>, <footer>，再逐步拆分细节模块。
• 语义先于样式：HTML 不要为了样式滥用标签，用 CSS 控制展示。
• 结合无障碍检测工具：例如 Lighthouse 或 axe-core，检测和优化结构。
• 阅读 WCAG 和 ARIA 指南：提升面试中对可访问性的认识。

---

✅ 总结

语义化 HTML 是前端工程师必备的基础技能。从面试角度来看，面试官会关注你对标签结构、可访问性、SEO 以及技术选型的意识。掌握这些知识有助于你在面试中脱颖而出。