垦荒学园

简体中文

English

简体中文

English

切换主题

HTML5 语义元素 ​

语义化 (Semantic) 是指使用具有明确含义的标签来构建文档结构。HTML5 引入了一系列新的语义化元素，旨在让网页的结构更加清晰、易于理解。

使用语义化标签取代无处不在的 <div>，能让浏览器、搜索引擎和屏幕阅读器等辅助技术更好地解析你的页面内容。

什么是语义化元素？ ​

一个语义化元素能清晰地向浏览器和开发者描述其内容的含义。

  • 非语义化元素: <div>, <span> - 它们没有告诉我们关于内容的任何信息。
  • 语义化元素: <form>, <table>, <article> - 它们清晰地定义了其内容。

HTML5 主要语义化布局元素 ​

下图展示了如何使用 HTML5 语义化元素来组织一个典型的网页布局：

HTML5 Semantic Layout

<header> 元素定义了文档或一个区域的页眉。它通常包含：

  • 网站 Logo 或标志
  • 主标题 (<h1> - <h6>)
  • 导航链接 (<nav>)

一个页面可以有多个 <header>。

<footer> 元素定义了文档或一个区域的页脚。它通常包含：

  • 版权信息
  • 作者信息
  • 联系方式
  • 返回顶部链接

<nav> 元素专门用于包裹主要的导航链接。并非所有链接都应该放在 <nav> 中，只有那些构成主要导航区块的链接（如主导航栏、侧边栏导航）才需要。

<main> ​

<main> 元素定义了文档的核心和主体内容。一个页面应该只包含一个 <main> 元素，并且它不应该被放置在 <article>, <aside>, <footer>, <header> 或 <nav> 内部。

<section> ​

<section> 元素定义了文档中的一个独立部分或主题区域。它通常会包含一个标题。例如，一个主页可以被划分为介绍、新闻、联系信息等几个 <section>。

<article> ​

<article> 元素定义了一个独立的、自成一体的内容单元。它应该是在逻辑上可以独立分发或重用的内容。例如：

  • 一篇论坛帖子
  • 一篇博客文章
  • 一则新闻报道
  • 一条用户评论

<aside> ​

<aside> 元素定义了与周围内容有间接关系但可以独立存在的内容。它通常被呈现为侧边栏，用于放置：

  • 相关文章链接
  • 广告
  • 作者简介

示例代码 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>语义化 HTML5 页面</title>
</head>
<body>

<header>
  <h1>我的个人博客</h1>
  <nav>
    <a href="/index">首页</a>
    <a href="/about">关于</a>
  </nav>
</header>

<main>
  <article>
    <h2>学习 HTML5 的重要性</h2>
    <p>HTML5 引入了许多新特性，让 Web 开发变得更加强大...</p>
  </article>

  <article>
    <h2>CSS Grid 布局指南</h2>
    <p>CSS Grid 是一个强大的二维布局系统...</p>
  </article>
</main>

<aside>
  <h3>热门文章</h3>
  <ul>
    <li><a href="#">Flexbox vs. Grid</a></li>
    <li><a href="#">JavaScript 异步编程</a></li>
  </ul>
</aside>

<footer>
  <p>&copy; 2024 我的博客. 保留所有权利。</p>
</footer>

</body>
</html>