语义化标签

语义化是指根据内容的结构化（内容语义化），通俗讲就是选择指根据内容的结构化，选择合适的标签。使用语义类标签增强了可读性，结构更加清晰，便于开发者书写和阅读。HTML语义化：就是页面去掉样式或者加载失败的时候能够让页面呈现出清晰的结构。本文将分析一些实际网站的HTML结构，对比非语义化标签的差异。

1、语义化标签示例

以下介绍一些常用的语义化标签，比如：

<header>
  <h1>This is the header of my web page</h1>
</header>

其中 <header>标签就用于表示文档的页眉或页面的顶部部分，通常包含导航菜单、网站标志、搜索框、标题等与页面头部相关的内容。当然，如果用非语义化标签表示，也可写成：

<div class="header">
  <span class="title">This is the header of my web page</span>
</div>

可以看出<header>标签提供了一种语义化的方式来描述和识别页面或部分的头部内容。它有助于提高页面的可读性、可访问性和结构化，并可以与CSS样式表和JavaScript脚本进行样式和交互的定义。

另外，<main>标签用于准确描述页面的主要内容，并且标签中的内容在文档中是唯一的。

<main>
  <h1>Introduction of HTML</h1>
  <p>HTML is ...</p>
  <section>
    <h2>Section 1</h2>
    <p>...</p>
  </section>
  <section>
    <h2>Section 2</h2>
    <p>...</p>
  </section>
</main>

非语义化示例:

<div class="main">
  <h1>Introduction of HTML</h1>
  <p>HTML is ...</p>
  <div class="section">
    <h2 class="section_one">...</h3>
    <p>...</p>
  </div>
  <div class="section">
    <h2 class="section_two">...</h3>
    <p>...</p>
  </div>
</div>

其中还用到了<section>标签，用于表示文档中的一个区域或节，也是语义元素。

<footer>
  <p>Copyright 2023 My Website</p>
</footer>

<div class="footer">
  <div class="right">Copyright 2023 My Website</div>
</div>

从以上示例可以看出，<footer> 标签虽然仅仅起到语义化的作用，但是可以帮助网站提高可读性和可访问性，同时也可以提高网站的专业程度。

当然还有其他的一些语义化标签，比如:

nav标签：定义整个页面的主要导航部分。
aside标签：是特殊的section，可以独立于内容存在而不会使得整体受到影响，通常用作侧边栏，包含与内容相关各种链接。
article标签：定义一个文档，页面，或者网站中自成一体的内容。例如论坛的帖子，用户的评论等。

2、总结

语义化标签就是用特定的标签，去表达特定的含义。在实际开发中，语义是非常重要的，能够提高网站的可访问性，也有利于搜索引擎优化，方便设备解析（屏幕阅读器、盲人阅读器）等。但是也不能为了刻意追求语义化，而滥用语义化标签，应根据实际开发需求去使用。

HTML语义化 ｜ 青训营

语义化标签

1、语义化标签示例

2、总结

HTML语义化｜青训营