什么是语义 UI 标签类型？

语义 UI 标签类型是指 HTML 标签中的一种分类，它与标签的语义相关，可以明确地表达标签所包含的内容。例如，<p> 标签表示段落，<h1> 标签表示一级标题，<ul>、<ol> 和 <li> 标签则分别表示无序列表、有序列表和列表项等。

在 Web 开发中，选择正确的语义 UI 标签类型可以让页面的结构更加清晰，方便页面的维护和 SEO 优化。

常见的语义 UI 标签类型

以下是常用的语义 UI 标签类型：

• <header>：定义页面或区域的页眉，通常包含网站或应用的名称、导航菜单和搜索框等元素。

• <nav>：定义导航菜单，通常包含链接列表或图标，用于跳转到网站或应用的其他页面或功能。

• <main>：定义页面或应用的主体内容，通常包含文章、产品介绍、表格、图表等元素。

• <article>：定义独立的文章或内容块，通常包括标题、作者、发布时间等元素。

• <section>：定义文档或页面的一个区域，通常包含一组相关的文章、内容块或功能模块等元素。

• <aside>：定义文档或页面的侧边栏，通常包含广告、相关链接、推荐内容等元素。

• <footer>：定义页面或区域的页脚，通常包含版权信息、联系方式、社交媒体链接等元素。

• <figure>：定义一组相关的媒体元素（如图像、视频、音频），通常用于文章中的插图或媒体播放器。

• <figcaption>：定义 <figure> 元素的标题或说明，通常出现在媒体元素下方或右侧。

如何正确使用语义 UI 标签类型？

在使用语义 UI 标签类型时，应该根据页面的结构和内容选择合适的标签，避免滥用 <div> 标签或其他没有语义的标签。

例如，在设计一个新闻网站的页面时，可以使用以下标签来表达页面的结构：

<header>
  <h1>新闻网站</h1>
  <nav>
    <ul>
      <li><a href="#">首页</a></li>
      <li><a href="#">国内新闻</a></li>
      <li><a href="#">国际新闻</a></li>
      <li><a href="#">体育新闻</a></li>
      <li><a href="#">科技新闻</a></li>
    </ul>
  </nav>
</header>

<main>
  <h2>国内新闻</h2>

  <section>
    <article>
      <h3>认真贯彻落实习近平总书记重要讲话精神 让初心使命在实践中焕发出新的光芒</h3>
      <p>新华社北京11月27日电 11月26日，中共中央政治局常委、国务院总理李克强主持召开国务院常务会议，研究部署大数据发展等工作。会议听取了国家发展和改革委员会关于2021年度发展和改革重点工作和用好大数据，推进制造业高质量发展等方面的汇报，审议通过了《国务院关于加强粤港澳大湾区科技创新和产业合作的指导意见》等文件。</p>
    </article>

    <article>
      <h3>四川通报“你吃饱了吗？给别人留条路” 事件处理进展</h3>
      <p>新华社成都11月27日电（记者张晓松）四川省交通运输厅27日通报称，加强交通安全宣传教育，是最基础、最重要的工作之一。为加强对交通安全宣传教育工作的管理和引导，以调查核实处理成果为依据，结合具体情况，依法依规对处理的人员做出处理决定，对社会形成警示和约束。</p>
    </article>
  </section>

  <aside>
    <h3>热门新闻</h3>
    <ul>
      <li><a href="#">新冠疫苗</a></li>
      <li><a href="#">脱贫攻坚</a></li>
      <li><a href="#">美国大选</a></li>
    </ul>
  </aside>
</main>

<footer>
  <p>&copy; 2021 新闻网站 版权所有</p>
</footer>

在上述示例中，使用了语义 UI 标签类型来明确表达网站的结构和内容，使页面更易于理解和维护。