HTML语义化的案例分析 ｜ 青训营

Jin_0v0
74 阅读4分钟

HTML语义化

HTML语义化是指在编写HTML代码时，选择合适的标签来正确表示文档的结构和内容，并使用符合元素本身含义的标签，从而增强文档的可读性、可访问性和SEO（搜索引擎优化）效果。使用语义化标签能够使HTML文档更具有意义和结构，让开发者和机器能够更好地理解文档的内容和关系。

举例来说，假设你有一个博客网站，使用<article>来表示每篇文章，<nav>来表示导航菜单，<header>和<footer>来表示页面的头部和底部，这样的标签选择和结构就更加符合语义化的原则，从而使得网站更易于理解、维护和使用。

使用语义化标签能够使HTML文档更具有意义和结构，让开发者和机器能够更好理解文档的内容和关系。

网站案例分析

本来想霍霍B站的，刚刚同事给我丢了一个产品的网站vanta.com，那就这个吧👇

非语义化标签示例

非语义化标签是指在HTML中使用的标签，其名称并不直接表达其所包含内容的含义，或者其用途与其名称不符。这些标签通常是用于样式化、布局或其他目的，而不是为了表达文档结构和语义。

  1. <div>： <div> 是最常见的非语义化标签之一，它本身没有特定的语义，通常用于创建一个块级容器，用于布局和样式化

image.png

可以看出，虽然中间用到了一个<nav>标签，但<div>的使用还是非常多的，这种情况下class的描述就显得非常重要

  1. <span>： <span> 是另一个常见的非语义化标签，它本身没有语义，用于在行内文本中应用样式。这个网页中用到的<span>不多，实现的效果就是改变字体样式👇

image.png

  1. <br>： <br> 标签用于换行，但不表示任何语义，通常用于调整布局

image.png

  1. <div> 作为按钮： 在一些情况下，开发者可能将<div>元素添加事件处理程序以模拟按钮行为，而实际上应该使用<button>标签来表示按钮，belike👇

image.png

  1. <b> 和 <i>： <b> 用于加粗文本，<i> 用于斜体文本。虽然它们表达了样式，但没有表达内容的语义

这个网页中没用到这类标签

  1. <font>： <font> 标签用于设置字体、大小和颜色，但不表达任何语义，也已被废弃

示例中没有出现

  1. <table> 和 <tr>： <table>、<tr>、<td>等表格标签也可能被滥用，用于布局而非表示表格数据

示例中没有出现

语义化标签示例

语义化标签是指在HTML中使用的具有明确语义和含义的标签，这些标签能够直观地传达其所包含内容的意义和作用。

  1. <header>： 用于表示文档或页面的头部部分，通常包含网站的标志、标题、导航等

如前文所示，这个网站的header部分用的是<div>标签😶

  1. <nav>： 表示导航菜单，通常包含链接到其他页面的导航选项，但这里没有，这里实现的是几个下拉框，只有一层一层的<div>，头疼

image.png

  1. <section>： 用于划分文档的主题内容区块，通常包含一组相关的内容

image.png

很气哦，这个网站真的用到的语义化标签真就支离破碎，里面比如黄框的<div>其实就可以用<figure>

  1. <figure> 和 <figcaption>： 用于包裹媒体内容（如图片、音频、视频）及其相关说明
<figure> 
    <img src="image.jpg" alt="A beautiful landscape"> 
    <figcaption>A beautiful landscape</figcaption>
</figure>

  1. <iframe>：：自定义的小框架，这里是一个客服对话的小组件👇 image.png

  2. <article>： 表示独立、完整的内容单元，如博客文章

<article>
    <h2>Article Title</h2>
    <p>Article content...</p>
</article>
  1. <aside>： 表示页面的侧边栏内容，通常用于放置附加信息、广告、相关链接等
<aside>
    <h2>Related Links</h2>
    <ul> 
        <li><a href="#">More articles</a></li>
        <li><a href="#">Related resources</a></li> 
    </ul>
</aside>

有些没找到的标签，给了一些代码示例👆

对比和总结

对比

看到这里应该就可以感受到：

语义化标签的使用，使得HTML代码有具更强的可读性，能够更清晰地表达网页的结构和内容，对搜索引擎和辅助技术更友好，从而有助于提高可访问性。

相对于语义化标签，非语义化标签往往不具备清晰的文档结构，也不利于可读性、可访问性和SEO优化。

总结

通过这次对案例网站的分析和对以往网页检查经历的回顾，确实感受到大家在开发过程中有尝试去尽量多的使用语义化标签，但是无可避免的，通用的<div>标签还是占据了大部分的篇幅。这也提醒了我在实际项目中要注重HTML的组织结构和语义化标签的重要性，并进一步了解HTML语义化。

avatar
文章
阅读
粉丝