跳到主要内容

语义元素

语义元素解决了什么问题？​

  • 问题: 只用 div 时标签名不携带含义, 机器无法区分导航、正文、页脚;
  • 作用: 用标签名直接表达内容角色, 结构可读且可被辅助技术理解;
  • 边界: 语义元素不改变默认视觉, 版面仍由 CSS 决定;
  • header: 网页或区块的页眉, 常与 hx 标题配合使用;
  • footer: 网页或区块的页脚, 放作者信息、版权信息、友情链接等;
<header>
  <h1>Main Page Title</h1>
</header>
<footer>Some copyright info or perhaps some author info for an &lt;article&gt;?</footer>
  • 角色: 标记一组导航链接;
  • 结构: 通常内含一个列表, 列表项内放链接;
<nav class="menu">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

main、section、article 三个元素如何区分？​

  • main: 页面正文, 一个文档只出现一个;
  • section: 正文分段, 常以 hx 开头;
  • article: 强调独立完整的分段, 可脱离上下文单独使用, 可视为特殊的 section;
  • 共同点: section 与 article 都靠 hx 声明本段标题;
<main>
  <h1>Apples</h1>
  <p>The apple is the pomaceous fruit of the apple tree.</p>
  <article>
    <h2>Heading</h2>
    <p>Bunch of awesome content</p>
  </article>
</main>

aside 元素用于什么场景？​

  • 语义: 与主内容相关、但可独立阅读的旁支内容, 如侧边栏、补充数据;
  • 位置: 常嵌套在 article 内;
<article>
  <p>The Disney movie <cite>The Little Mermaid</cite> was first released in 1989.</p>
  <aside>
    <p>The movie earned $87 million during its initial release.</p>
  </aside>
  <p>More info about the movie...</p>
</article>