常见的 HTML5 语义化标签

前言

什么是 HTML 语义化标签？相信大家都知道，它是通过 HTML 标签的方式，非常直观地表明每个小块具体的具体作用。比如头部 head、标题 title、导航 nav、侧边栏 aside、标题 h1 - h6、文章 article、底部 footer 等。这些语义化标签，不仅方便我们阅读代码，更能方便搜索引擎抓取页面内容，提高 网站SEO 以及 网站性能。

开发了许久的前端，都已经习惯了 div + css 的布局模式。但这样非常不利于 SEO 以及阅读、性能优化等。合理的使用 HTML5 语义化标签，不仅能带来一些额外的收益，也是对自己代码能力和质量的一个硬性要求。

下面是我将常用的 HTML5 标签整理成的一个伪代码例子。

例子

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="keywords" content="关键字1,关键字2,关键字3">
  <meta name="description" content="网站的描述">
  <title>语义化标签</title>
  <style>
    img {
      width: 50px;
    }
    blockquote {
      margin: 0;
    }
    blockquote p {
      padding: 15px;
      background: #eee;
      border-radius: 5px;
    }
    blockquote p::before {
      content: '201C';
    }
    blockquote p::after {
      content: '201D';
    }
  </style>
</head>
<body>
  <!-- 整个文件内容包裹 -->
  <main>
    <!-- 头部区域 -->
    <header>
      <!-- 导航区域 -->
      <nav>
        <!-- 菜单区域 -->
        <menu></menu>
      </nav>
    </header>

    <!-- 左侧菜单栏 -->
    <aside>
      <!-- 菜单栏列表 -->
      <ul>
        <li>一级菜单栏</li>
      </ul>
    </aside>

    <!-- 右边内容区域 -->
    <div>
      <article>
        <h1>一级标题，一页只有一个</h1>

        <blockquote cite="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/blockquote">
          <p>这里是引用内容</p>
        </blockquote>

        <h2>二级标题</h2>

        <section>
          <h3>三级标题</h3>
          <p>一行内容<del>删除文字1</del><ins>新增文字2</ins></p>
          <p><strong>加粗的内容</strong></p>
          <p><small>字体减小的内容</small></p>
          <p><mark>标记的内容</mark></p>
          <p><span style="color: #666;">简单的内容</span></p>

          <figure>
            <img src="https://xiangming.tech/_nuxt/img/logo.3f98e20.webp" alt="">
            <!-- 对图片的描述 -->
            <figcaption>对图片的描述</figcaption>
          </figure>

          <!-- 用于不同屏幕的图片适配 -->
          <picture>
            <source srcset="https://xiangming.tech/_nuxt/img/logo.3f98e20.webp" type="image/webp">
            <img src="https://xiangming.tech/_nuxt/img/logo.68a165c.jpg" alt="">
          </picture>
        </section>

        <table>
          <!-- 表格的标题 -->
          <caption>表格的标题</caption>
          <!-- 表格的头部 -->
          <thead>
            <th>
              <td></td>
            </th>
          </thead>
          <!-- 表格的内容部分 -->
          <tbody>
            <tr>
              <td></td>
            </tr>
          </tbody>
          <!-- 表格的底部 -->
          <tfoot>
            <p>表格footer</p>
          </tfoot>
        </table>

        <!-- 切换为展开状态时,内容才展示.村https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/details -->
        <details>
          <summary>展开的标题</summary>
          <p>待展开的具体内容</p>
        </details>
      
        <!-- 缩写 -->
        <abbr>CSS</abbr> (Cascading Style Sheets) 
      </article>

      <!-- 对一个内容的解释 -->
      <dl>
        <!-- 需要解释的 title -->
        <dt>需要解释的 title</dt>
        <dd>需要解释的具体内容</dd>
        <dt>需要解释的 title2</dt>
        <dd>需要解释的具体内容2</dd>
      </dl>

      <!-- 显示一行代码 -->
      <code>const a = 1;</code>

      <!-- 显示多行代码，有空格 & 换行符 -->
      <pre>
        const a = 2;
        function func() {
          console.log(a);
        }
        func();
      </pre>

      <!-- 表单 -->
      <form>
        <fieldset>
          <!-- 父元素 <fieldset> 的内容标题 -->
          <legend>父元素 fieldset 的内容标题</legend>
      
          <input type="radio" id="input" name="input" value="input">
          <label for="input">input</label><br>

          <textarea>多行输入框</textarea>
          <button type="button">按钮</button>
        </fieldset>
      </form>

      <form oninput="result1.value=parseInt(a.value)+parseInt(b.value)">
        <input type="range" name="b" value="50" /> +
        <input type="number" name="a" value="10" /> =
        <!-- 输出的结果 -->
        <output name="result1"></output>
    </form>

      <footer>
        <time>时间：2022-10-10 17:20:88</time>

        <address>
          <a href="mailto:xiangming25@163.com">xiangming25@163.com</a><br>
          <a href="tel:+135********">135********</a>
        </address>
      </footer>
    </div>
  </main>

  参考链接：<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element">https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element</a>
</body>
</html>