【八股系列】介绍下语义化，怎样保证代码符合语义化？说说HTML5语义化标签？

文章目录

• 1. 语义化简介
• 2. 语义化的 HTML 代码的重要性
• 3. 如何保证语义化的 HTML 代码
• 4. HTML5 语义化标签的示例

1. 语义化简介

语义化是指使用恰当的 HTML 元素来表示内容的含义，以便于机器理解和人类阅读。

2. 语义化的 HTML 代码的重要性

• 机器理解：语义化的 HTML 代码可以让搜索引擎更好地理解和索引网站的内容，从而提高网站在搜索引擎中的排名。
• 人类阅读：语义化的 HTML 代码可以让人类更容易理解和维护网站的内容，从而提高网站的可读性和可维护性。
• 辅助技术：语义化的 HTML 代码可以让辅助技术 (如屏幕阅读器) 正确地理解和导航网站的内容，从而提高网站的可访问性。

3. 如何保证语义化的 HTML 代码

• 正确使用 HTML5 语义化标签：如 <header>, <nav>, <main>, <article>, <section>, <aside>, <footer>, <figure>, <figcaption>, <time>, <mark>, <meter>, <progress>, <details>, <summary>, <data>, <ruby>, <rt>, <rp>, <bdi>, <wbr>, <cite>, <dfn>, <abbr>, <ins>, <del>, <s>, <small>, <strong>, <em>, <mark>, <code>, <samp>, <kbd>, <var>, <sub>, <sup>, <i>, <b>, <u>, <del>, <s>, <ins>, <q>, <cite>, <dfn>, <abbr>, <time>, <address>, <pre>, <code>, <var>, <samp>, <kbd>, <mark>, <strong>, <em>, <bdo>, <span>, <br>, <img>, <iframe>, <embed>, <object>, <param>, <video>, <audio>, <source>, <track>, <canvas>, <map>, <area>, <table>, <caption>, <colgroup>, <col>, <tbody>, <thead>, <tfoot>, <tr>, <td>, <th>, <form>, <label>, <input>, <textarea>, <button>, <select>, <optgroup>, <option>, <fieldset>, <legend>, <datalist>, <keygen>, <output>, <meter>, <progress>, <details>, <summary>, <menu>, <menuitem>, <dialog>, 等。
• 避免使用不恰当的 HTML 元素来表示内容的含义，如 <div> 和 <span> 等。
• 正确使用 ARIA (Accessible Rich Internet Applications) 属性来提供额外的语义信息，以便于辅助技术 (如屏幕阅读器) 理解内容。
• 遵循 Web Content Accessibility Guidelines (WCAG) 2.1 指南来保证语义化的 HTML 代码可以被辅助技术正确地理解和使用。

4. HTML5 语义化标签的示例

<header>
  <h1>我的文章</h1>
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/about">About</a></li>
      <li><a href="/contact">Contact</a></li>
    </ul>
  </nav>
</header>

<main>
  <article>
    <h2>文章标题</h2>
    <p>这是文章内容</p>
  </article>
  <aside>
    <h3>这是文章目录</h3>
    <ul>
      <li><a href="/related-article-1">目录1</a></li>
      <li><a href="/related-article-2">目录2</a></li>
    </ul>
  </aside>
</main>

<footer>
  <p>Copyright © 2024 My Website</p>
</footer>