HTML语义化标签

语义化的含义就是用正确的标签做正确的事情，html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；在没有样式CCS情况下也以一种文档格式显示，并且是容易阅读的。搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重。使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

非语义化的HTML页面

示例

<html>
    <body>
        <div class="article">
            <div class="header">
                <h1>h1 - WEB 语义化</h1>
            </div>
            <div class="nav">
                <ul>
                    <li>nav1 - HTML语义化</li>
                    <li>nav2 - CSS语义化</li>
                </ul>
            </div>
            <div class="section">
                section1 - HTML语义化
            </div>
            <div class="section">
                section2 - CSS语义化
            </div>
            <div class="time">time - 2022年03月23日</div>
            <div class="footer"> footer</div>
        </div>
    </body>
</html>

可以看出使用div做了所有的事情，如果id或者class命名不好的话，很难快速的了解页面内容。

语义化的HTML页面

示例

<html>
    <body>
        <article>
            <header>
                <h1>h1 - WEB 语义化</h1>
            </header>
            <nav>
                <ul>
                    <li>nav1 - HTML语义化</li>
                    <li>nav2 - CSS语义化</li>
                </ul>
            </nav>
            <section>
                section1 - HTML语义化
            </section>
            <section>
                section2 - CSS语义化
            </section>
            <time datetime="2018-03-23" pubdate>time - 2018年03月23日</time>
            <footer> footer</footer>
        </article>
    </body>
</html>

这就是一个语义化的页面，通过语义化标签我们不仅仅能快速了解内容，还能让搜索引擎等爬虫程序精准分析对内容进行提取。

什么是语义元素？

语义元素清楚地向浏览器和开发人员描述了它的含义。

非语义元素的例子：<div>和<span>- 没有说明它的内容。
语义元素示例： <form>、<table>和<article>- 明确定义其内容。

<section> 元素

<section>元素定义文档中的一个部分。

根据 W3C 的 HTML 文档：“部分是内容的主题分组，通常带有标题。”

<section>可以使用场景：

章节
介绍
新闻项目
联系信息

网页通常可以分为介绍、内容和联系信息的部分。

示例

<section>
<h2>非语义化</h2>
<p>使用div</p>
</section>

<section>
<h1>语义化</h1>
<p>使用语义化标签</p>
</section>

<article> 元素

<article>元素指定独立的、自包含的内容。一篇文章本身应该有意义，并且应该可以独立于网站的其余部分进行传播。

<article>可以使用场景：

论坛帖子
博客文章
用户评论
产品卡片
报纸文章

示例

<article>
<h2>Google Chrome</h2>
<p>Google Chrome是由Google开发的网络浏览器，于2008年发布。Chrome是当今世界上最受欢迎的网络浏览器!</p>
</article>

<article>
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox是Mozilla开发的开源网络浏览器。Firefox是自2018年1月以来第二受欢迎的网络浏览器.</p>
</article>

<article>
<h2>Microsoft Edge</h2>
<p>Microsoft Edge是由Microsoft开发的Web浏览器，于2015年发布。Microsoft Edge更换了Internet Explorer。</p>
</article>

<header> 元素

<header>元素表示介绍性内容或一组导航链接的容器。

一个<header>元素通常包含：

一个或多个标题元素 (<h1> - <h6>)
标志或图标
作者信息

注意：您可以<header>在一个 HTML 文档中包含多个元素。但是不能<header>放置在<footer> <address>等

示例

<article>
  <header>
    <h1>xiaobai.wang是干什么的</h1>
    <p>小白教程的愿景:</p>
  </header>
  <p>让知识获取更加简单快捷。</p>
</article>

<footer> 元素

<footer>元素定义文档或部分的页脚。

一个<footer>元素通常包含：

作者信息
版权信息
联系信息
网站地图
回到顶部链接
相关文件

您可以<footer>在一个文档中包含多个元素。

示例

<footer>
  <p>作者:xiaobai.wang</p>
  <p>邮箱:<a href="mailto:[email protected]">[email protected]</a></p>
</footer>

<nav> 元素

<nav>元素定义了一组导航链接。

请注意，并非文档的所有链接都应该在<nav>元素内。该 <nav>元素仅用于主要的导航链接块。

示例

<nav>
  <a href="/html/">HTML教程</a> |
  <a href="/css/">CSS教程</a> |
  <a href="/js/">JavaScript教程</a> |
  <a href="/jquery/">jQuery教程</a>
</nav>

<aside> 元素

<aside>除了放置它的内容（如侧边栏）之外，该元素还定义了一些内容。

<aside>内容应该与周围的内容间接相关。

示例

<!DOCTYPE html>
<html>
<head>
<style>
aside {
  width: 30%;
  padding-left: 15px;
  margin-left: 15px;
  float: right;
  font-style: italic;
  background-color: lightgray;
}
</style>
</head>
<body>

<p>
   语义标签就是工作中经常会用到的一类标签，它们的特点是视觉表现上交互都差不多，主要的区别在于它们表示了不同的语义，比如大家会经常见到的section，nav。

语义是我们说话表达的意思，多数的语义实际上都是由文字来承载的，语义类标签则是纯文字的补充，比如：标题，自然段，章节，列表，这些内容都是纯文字无法表达的，我们需要依靠语义标签代为表达。
    
</p>

<aside>
<p>
    语义化标签的使用场景,自然语言表达能力的补充,文章标题摘要,适合机器阅读的整体结构
</p>
</aside>
</body>
</html>

<figure> 和 <figcaption> 元素

<figure>标签指定独立的内容，如插图、图表、照片、代码列表等。 <figcaption>标签定义<figure>元素的标题。<figcaption>元素可以作为元素的第一个或最后一个子元素放置<figure>。

示例

<figure>
  <img src="/favicon.ico" alt="Trulli">
  <figcaption>这是xiaobai.wang的favicon</figcaption>
</figure>