🎉 博客主页:【剑九 六千里-CSDN博客】
🎨 上一篇文章:【react-router里的Link标签和a标签有什么区别?】
🎠 系列专栏:【面试题-八股系列】
💖 感谢大家点赞👍收藏⭐评论✍
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>