垦荒学园
  • 中文

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

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

      示例代码

      <!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>