如何使用语义化 HTML 标签构建页面结构？-JavaScript中文网-JavaScript教程资源分享门户

推荐答案

语义化 HTML 标签是指使用 HTML 标签时，使其表达的含义与内容相符，而不是仅仅为了样式显示。构建页面结构时，应尽量使用以下标签：

<header>: 定义页面的头部，通常包含网站的标题、logo、导航等。
<nav>: 定义导航栏，用于包含链接列表，如主菜单、侧边栏菜单等。
<main>: 定义页面的主要内容，一个页面通常只有一个 <main> 标签。
<article>: 定义独立的内容，如博客文章、新闻报道等，通常包含标题和内容。
<section>: 定义文档中的节或段落，通常包含标题。
<aside>: 定义与页面主要内容相关的附加信息，如侧边栏、广告、相关链接等。
<footer>: 定义页面的页脚，通常包含版权信息、联系方式、备案信息等。

示例结构：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>示例页面</title>
</head>
<body>
    <header>
        <h1>网站标题</h1>
        <nav>
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">关于</a></li>
                <li><a href="#">服务</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <article>
           <h2>文章标题</h2>
           <p>文章内容...</p>
        </article>
        <section>
           <h2>相关内容</h2>
           <p>一些相关内容...</p>
        </section>
    </main>
    <aside>
        <h3>侧边栏</h3>
        <ul>
           <li><a href="#">链接1</a></li>
           <li><a href="#">链接2</a></li>
        </ul>
    </aside>
    <footer>
        <p>&copy; 2023 版权所有</p>
    </footer>
</body>
</html>

本题详细解读

为什么使用语义化 HTML？

使用语义化 HTML 的好处有很多：

提高可访问性（Accessibility）: 屏幕阅读器等辅助技术可以更好地解析页面结构，帮助残障人士理解内容。
改善搜索引擎优化（SEO）: 搜索引擎爬虫可以更准确地理解页面内容，提高网站排名。
提升代码可读性和可维护性: 语义化的标签使代码结构更清晰，方便开发者理解和维护。
更好的移动端适配性: 语义化标签有助于浏览器更好地渲染页面，提高移动端的用户体验。

常见语义化 HTML 标签

<header>: 通常包含网站的 logo、标题、导航菜单等，是页面的导览部分。
<nav>: 专门用于包含导航链接，用于主导航、侧边栏导航等。
<main>: 代表页面主要内容，一个页面只能有一个 <main> 标签，不应包含在 <header>、<footer> 或 <aside> 标签内。
<article>: 用于表示独立的内容，如文章、博客、新闻、评论等，可以有自己的标题。
<section>: 用于将文档划分为不同的部分，例如章节、栏目等，通常包含一个标题。
<aside>: 表示与页面主要内容相关的辅助信息，如侧边栏、广告、相关链接等。
<footer>: 通常包含版权信息、联系方式、社交链接等，是页面的底部信息。
<figure>: 用于包裹图片或图表等媒体内容。
<figcaption>: 为 <figure> 元素提供图注。

如何正确使用语义化标签？

根据内容选择标签: 不要为了样式而选择标签，要根据标签的语义来选择合适的标签。
正确嵌套标签: <article> 和 <section> 可以互相嵌套，但 <main> 只能有一个且不能嵌套在其他语义化标签中。
不要滥用标签: 不是所有内容都需要使用语义化标签包裹，对于一些简单的内容，可以使用 <div> 和 <span> 标签。
结合 ARIA 属性: 在必要时可以使用 ARIA (Accessible Rich Internet Applications) 属性来补充语义，进一步提高可访问性。

示例结构说明

在示例代码中：

header 包含了网站的标题和导航菜单。
main 包含了文章和相关内容的展示。
article 包含了一篇独立的文章。
section 展示了和文章相关的额外内容。
aside 展示了侧边栏的内容，例如一些链接。
footer 包含了版权信息。

这样的结构清晰地表达了页面的各个组成部分，使代码更易于理解和维护，同时也为用户和搜索引擎提供了更好的体验。