语义化

Tue, 24 Sep 2024 00:00:00 +0800

HTML 语义化是什么？

HTML 语义化是指使用 HTML 标签来正确地表示文档的结构和内容的方式。通过使用正确的标签和元素，可以使网页的结构更加清晰、易于理解，并且对搜索引擎和辅助技术（如屏幕阅读器）更友好。
CSS 命名的语义化指的是在给 CSS 类名、选择器和 ID 命名时，使用具有语义的名称来描述元素的用途和功能。这样的命名方式可以使代码更具可读性、可维护性和可拓展性。

为什么需要语义化？

有利于搜索引擎优化（SEO）：搜索引擎依赖于网页的结构和语义来识别和理解网页内容。使用语义化的 HTML 标签可以提高网页在搜索引擎结果的排名，从而提高页面的 SEO（搜索引擎优化）。
可读性和可维护性：使用语义化的代码可以增强代码的可读性和可维护性，有利于开发人员理解和维护代码。同时，遵循 W3C 标准的团队可以遵循相同的标准，减少差异化，提高团队的效率和协调能力。
提高可访问性：语义化可以提高网页的可访问性，让页面更容易被搜索引擎、辅助技术（如屏幕阅读器）解析和理解，让更多的人能访问和理解网页。
可间接提升网页的性能：在传统的 HTML 代码中，有时候会存在一些重复的标签和属性，导致代码冗余。使用语义化的 HTML 代码，可以减少这种冗余，让代码更加简洁和高效。
面向未来的 HTML ，浏览器在未来可能提供更丰富的支持。

一些常用的语义化标签及使用场景

布局相关的语义化标签：

<header> 标签：用于定义文档或一个节的头部区域。通常包含网页的标题、导航栏、logo 或其他相关信息；作用是为页面提供附加的信息或功能，以帮助用户更好地理解或导航网页内容。适用于表示网页或一个节的顶部区域。
<aside> 标签：用于定义与页面内容相关但可以被视为独立于主要内容的部分。它通常用于侧边栏、广告、导航链接、附加信息或其他类似的内容。
<section> 标签：用于表页面中的一个独立部分，具有明确的主题或目的。例如文章、评论、产品列表、产品规格及描述等。一个页面可以包含多个不同主题的 section ；并且这个标签可以包含标题、段落、列表、表格等其他HTML元素。
<nav> 标签：用于表示导航菜单，包括主导航、子导航、面包屑导航等。这个标签通常包含链接（<a> 标签）来指向其他页面或网站的部分。
<footer> 标签：用于表示文档的页脚，通常包含版权信息、联系方式、法律声明等内容。它通常出现在页面的底部，并且只应该出现一次。
<main> 标签：用于表示页面中的主要内容区域，是所有主要内容（包括头部、尾部和侧边栏）的容器。每个<main>元素都应该包含独特的内容，这部分内容在页面上是唯一的，且对整个页面来说是重要的。<main>标签不能包含在页面其它区块元素中，通常是<body>的子标签，或者是全局<div>的子标签。
<address> 标签：用于表示联系信息，通常包含地址、电子邮件地址、电话号码等。这个标签通常用于定义页面或其部分内容的作者或拥有者的联系信息。

举个栗子🌰：

<body>
 <!-- 页面的头部 -->
 <header>
 <h1>欢迎来到我的网站</h1>
 <p>这是网站的标题，用于展示网站的核心信息。</p>
 </header>
 <!-- 导航菜单 -->
 <nav>
 <ul>
 <li><a href="#">首页</a></li>
 <li><a href="#">关于我们</a></li>
 <li><a href="#">产品</a></li>
 <li><a href="#">联系我们</a></li>
 </ul>
 </nav>
 <!-- 主要内容区域 -->
 <main>
 <!-- 第一个内容区块 -->
 <section></section>
 <!-- 第二个内容区块 -->
 <section>
 <aside></aside>
 <aside></aside>
 </section>
 </main>
 <!-- 联系信息 -->
 <address>
 <p><strong>联系信息：</strong></p>
 <p>电话：(123) 456-7890</p>
 <p><a href="mailto:example@email.com">example@email.com</a></p>
 </address>
 <!-- 页面的底部 -->
 <footer>
 &copy; 2023 My Website. All rights reserved. | 设计：北冥有锅
 </footer>
</body>

文本相关语义化标签：

figure 和 figcaption、del 和 ins

<figure> 标签：用于处理带有某些嵌入式内容的一组图，照片，代码清单等。表示独立的内容单元，它可以包含任何与主内容相关的附加内容，包括但不限于：文本内容、媒体文件、交互式内容等。使用<figure>标签时应当注意内容的独立性和相关性，确保它与主内容是相关的，并且不依赖于主内容而存在。
<figcaption> 标签：<figcaption>标签是<figure>元素的一部分，并且它是可选的。它应该包含在<figure>标签内部，作为其第一个或最后一个子元素。一个<figure>标签中只能有一个<figcaption>标签。
<del> & <ins> 标签：
<del> 用作已删除内容的标签。浏览器通常通过在已删除的文本上打一行删除线来呈现它。
<ins> 用于表示HTML文档中新添加的文本。它通常在文本上带有下划线。
<ins> 与<del> 一起使用时更有用，他们都可以使用CSS属性进行更改。
<ins> 与<del> 的特定属性：
cite:URL => 它指定资源的URL，该URL解释更改或删除文本的原因。
datetime:YYYYMMDD || HH:MM:SS => 它指定更改或删除文本的日期和时间。

举个栗子🌰：

语义化 on Last Stand

语义化

HTML 语义化是什么？

为什么需要语义化？

一些常用的语义化标签及使用场景

布局相关的语义化标签：

文本相关语义化标签：

figure 和 figcaption、del 和 ins