HTML语义化有多重要？

HTML语义化在Web开发中非常重要。它涉及将网页内容按照其真实含义和结构合理地标记和组织，以使浏览器、搜索引擎和其他自动化工具能够更好地理解和处理网页内容。以下是一些HTML语义化的重要性：

搜索引擎优化（SEO）：使用语义化的HTML可以帮助搜索引擎更好地理解页面内容，从而提高网站在搜索结果中的排名。搜索引擎倾向于将有意义的标签和内容更高效地索引和展示。
无障碍性（Accessibility）：语义化的HTML可以提供更好的无障碍性体验，使屏幕阅读器、语音识别软件等辅助技术能够更准确地解释和呈现页面内容，让残障人士也能够轻松地访问网站。

举个关于无障碍性的例子，加深印象：

在前端开发中，通过为元素添加描述性标签，如aria-label属性，可以帮助屏幕阅读器正确地传达页面元素的功能和用途。aria-label属性允许开发人员为元素提供自定义的文本标签，这在没有可见文本内容的情况下，如图标按钮或图像链接，能够为屏幕阅读器用户提供更多的上下文信息。

<button id="submit-button" aria-label="提交订单"></button>

维护和可读性：使用有意义的标签和结构可以使代码更具可读性和可维护性。开发人员可以更轻松地理解和修改代码，而不需要过多地依赖于CSS类名和其他标记。

HTML语义化元素有哪些？

以下是一些重要的HTML语义化元素和它们的作用：

<header>：用于定义页面或区块的页眉，通常包括标题、标志、导航等。
<nav>：表示页面的导航部分，包含导航链接、菜单等。
<main>：定义页面的主要内容，每个页面应该只有一个<main>。
<article>：表示一篇独立的文章或内容块，应有自包含的意义。
<section>：表示文档的一个独立部分，可以包含相关内容，比如章节、章节的子内容等。
<aside>：表示页面的侧边栏内容，通常是与主内容相关但不是核心的信息。
<footer>：用于定义页面或区块的页脚，包括版权信息、联系方式等。
<figure> 和 <figcaption>：<figure> 用于包含与主内容相关的图像、图表等，而 <figcaption> 用于为 <figure> 元素提供描述性文本。
<time>：表示日期和时间，有助于标记文章发布日期等信息。
<mark>：用于标记文本中的高亮部分，比如搜索结果中的匹配关键词。
<abbr>：用于表示缩写或首字母缩写，可以通过 title 属性提供全称。
<blockquote> 和 <q>：<blockquote> 用于引用较长的文本块，而 <q> 用于引用短文本，通常会添加引号样式。
<em> 和 <strong>：<em> 表示强调的文本，通常以斜体显示，而 <strong> 表示更强烈的强调，通常以粗体显示。
<a>：用于创建链接，通过 href 属性指定目标链接。
<img>：用于嵌入图像，通过 alt 属性提供图像的替代文本，有助于可访问性。

HTML无语义化元素有哪些？

无语义化元素指的是在HTML中使用了没有明确语义或含义的标签，这些标签通常仅仅用于样式或布局目的，而没有传达内容的真实含义。以下是一些常见的无语义化元素：

<div>：最常见的无语义化元素之一，用于创建一个块级容器，通常用于样式和布局目的。
<span>：类似于<div>，但用于创建内联容器，也常用于样式和布局。
<i> 和 <b>：在HTML5之前，用于斜体和粗体文本，但它们缺乏明确的语义，现在更推荐使用更有语义的标签如 <em>（强调文本）和 <strong>（更强烈的强调）。
<br>：用于换行，但没有传达段落或内容结构。
<hr>：用于创建水平线，但没有传达明确的语义。
<span class="icon">：当将一个<span>标签用作图标的容器，并使用class来添加图标样式时，它通常被视为无语义化元素。
<div class="container">：类似于上面的例子，将<div>标签用作容器，并使用class来应用样式，但没有传达内容的实际含义。

举个例子

假设我们正在构建一个简单的网站页脚，其中包含版权信息和联系方式。

语义化的写法

<!DOCTYPE html>
<html>
<head>
    <title>网站页脚</title>
</head>
<body>
    <footer>
        <section>
            <h2>版权信息</h2>
            <p>&copy; 2023 Company Name. All rights reserved.</p>
        </section>
        <section>
            <h2>联系方式</h2>
            <address>
                <p>Email: <a href="mailto:info@example.com">info@example.com</a></p>
                <p>电话：123-456-7890</p>
            </address>
        </section>
    </footer>
</body>
</html>

无语义化的写法

<!DOCTYPE html>
<html>
<head>
    <title>网站页脚</title>
</head>
<body>
    <div>
        <div>
            <h3>版权信息</h3>
            <span>&copy; 2023 Company Name. All rights reserved.</span>
        </div>
        <div>
            <h3>联系方式</h3>
            <div>
                <p>Email: <a href="mailto:info@example.com">info@example.com</a></p>
                <p>电话：123-456-7890</p>
            </div>
        </div>
    </div>
</body>
</html>

总结

我们应该尽量少使用无语义化元素如div、span等，以防止HTML失去语义化，影响可访问性和SEO。在设计和开发中，应该尽量优先选择具有明确语义的HTML元素如header、p等，来构建页面结构，以便提高页面的可读性、可访问性和搜索引擎优化。在逼不得已之下，才使用无语义化元素以达到样式或布局的目的。

HTML语义化 ｜ 青训营