第5节课：HTML5 新标签——构建更智能的网页结构

学问小小谢

已于 2024-07-26 12:15:22 修改

阅读量1.2k

点赞数 16

分类专栏： HTML学习文章标签： html5 前端学习

于 2024-07-26 10:31:38 首次发布

本文链接：https://blog.csdn.net/XWXXX666/article/details/140709032

版权

HTML学习专栏收录该内容

20 篇文章 1 订阅

订阅专栏

随着HTML5的推出，网页开发者们获得了一套新的强大工具——语义标签。这些标签不仅帮助我们更好地组织内容，还使得网页更易于搜索引擎优化（SEO）和辅助技术访问。本节课将深入探讨HTML5中的新语义标签，包括<article>、<section>、<nav>、<aside>、<header>和<footer>，并强调使用这些标签进行语义化标记的重要性。

语义化标记的重要性

在HTML5之前，我们通常使用<div>和<span>这样的通用容器标签来布局网页，但这些标签没有传达任何关于它们所包含内容的信息。语义化标记的核心在于使用具有明确意义的标签，这样无论是浏览器、搜索引擎还是屏幕阅读器都能够更好地理解网页内容的结构和目的。

新标签详解

`<article>`

<article>标签用于表示一个独立的、完整的内容块，比如博客文章、新闻报道或论坛帖子。它通常包含<header>和<footer>。

<article>
    <header>
        <h2>文章标题</h2>
        <p>发布日期：xxxx-xx-xx</p>
    </header>
    <p>这里是文章的主要内容。</p>
    <footer>
        <p>作者：学问小小谢</p>
    </footer>
</article>

`<section>`

<section>标签表示文档中的一个区段，通常包含一个标题（如<h1>到<h6>）。它可以用于表示章节、页眉或页面的其他部分。

<section>
    <h2>章节标题</h2>
    <p>章节内容。</p>
</section>

`<nav>`

<nav>标签用于定义导航链接的容器。它通常包含一系列链接，帮助用户在网站的不同部分之间导航。

<nav>
    <ul>
        <li><a href="#home">首页</a></li>
        <li><a href="#about">关于我们</a></li>
        <li><a href="#contact">联系我们</a></li>
    </ul>
</nav>

`<aside>`

<aside>标签表示与页面主要内容稍微独立的侧边栏内容，如广告、链接列表或作者信息。

<aside>
    <h2>相关链接</h2>
    <ul>
        <li><a href="#">相关文章</a></li>
        <li><a href="#">资源下载</a></li>
    </ul>
</aside>

`<header>`

<header>标签表示一个页面或一个内容区块的页眉。它通常包含网站的名称、标志或导航菜单。

<header>
    <h1>我的网站</h1>
    <nav>
        <!-- 导航链接 -->
    </nav>
</header>

`<footer>`

<footer>标签表示一个页面或一个内容区块的页脚。它通常包含版权信息、联系方式或相关链接。

<footer>
    <p>&copy; 2024 我的网站. 版权所有。</p>
</footer>

实践：使用HTML5新标签构建网页

让我们通过一个示例来展示如何使用这些新标签来构建一个简单的博客页面。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>我的博客</title>
</head>
<body>
    <header>
        <h1>欢迎来到我的博客</h1>
        <nav>
            <!-- 导航链接 -->
        </nav>
    </header>
    
    <article>
        <header>
            <h2>博客文章标题</h2>
            <p>发布日期：xxxx-xx-xx</p>
        </header>
        <section>
            <h3>引言</h3>
            <p>文章引言内容。</p>
        </section>
        <section>
            <h3>正文</h3>
            <p>文章正文内容。</p>
        </section>
        <footer>
            <p>作者：学问小小谢</p>
        </footer>
    </article>
    
    <aside>
        <h2>相关链接</h2>
        <ul>
            <li><a href="#">相关文章</a></li>
            <li><a href="#">资源下载</a></li>
        </ul>
    </aside>
    
    <footer>
        <p>&copy; 2024 我的博客. 版权所有。</p>
    </footer>
</body>
</html>