列举你觉得HTML语意化用的最妙的HTML代码，并且备注为什么

[daybreakcold]

人的理想志向往往和他的能力成正比。
例子：在小红书工作的时候写的一个笔记的组件

<div class="note-item note">
  <a href="/discovery/item/5e9438d2000000000100517b" class="image-wrapper">
    <div class="note-cover cube-image normal-image">
      <img src="http://ci.xiaohongshu.com/dcf52aba-f7a1-528e-96ce-f991271e8f3e?imageView2/2/w/540/format/jpg">
    </div>
  </a>
  <div class="note-content">
    <h3 class="note-title">💯 简约型格剪裁La Nikar🖤**服🖤</h3>
  </div>
  <div class="note-info">
    <div class="note-author">
      <div class="note-author-avatar avatar avatar-XXS type-outline">
        <div class="avatar-img cube-image normal-image">
          <img alt="龎超妍_小红书" src="https://img.xiaohongshu.com/avatar/5e6c77bcbe443f0001127b75.jpg@80w_80h_90q_1e_1c_1x.jpg">
        </div>
      </div>
      <a href="/user/profile/5af4546011be10467046cf10" class="note-author-nickname">龎超妍</a>
    </div>
    <span class="note-likes">
      <svg width="15px" height="15px" class="cube-icon note-likes-icon">
        <use xlink:href="#likes"></use>
      </svg>
      4
    </span>
  </div>
</div>

1. a标签的使用,对SEO绝对优化，让蜘蛛爬到更深的层级，这样就会有更多的收录；
2. h3标签，h3的内容在笔记组件里面已经算正文的内容，为了便于增加权重，增加收录，这样写是绝对有益的；
   3.img alt标签的使用 鼠标移动到这个图片上面，会有对应的提示，而且同样对SEO友好，告诉蜘蛛这个图片大体的内容。
   https://www.xiaohongshu.com/

[Deleted user]

HTML的语义化个人不是太理解, 目前写HTML基本还停留在HTML<=4, SEO优化什么的没怎么涉及过, 主要从事的都是后台管理系统, 很少需要SEO, 希望老哥多多分享诸如此类的知识 👍

[daybreakcold]

HTML的语义化个人不是太理解, 目前写HTML基本还停留在HTML<=4, SEO优化什么的没怎么涉及过, 主要从事的都是后台管理系统, 很少需要SEO, 希望老哥多多分享诸如此类的知识 👍

分两个层面讲，语意化你可以这么理解。

1. 让机器读懂你的代码，（SEO即是一块，机器会解析你的代码，并按不同的权重收录，在百度搜索引擎里面就会有比较考前的推荐，个人理解权重层次清晰的话会更有利于机器读写，按不同的权重收录。
2. 让同事读懂你的代码，比如P是段落，H系列是标题，等。别人看你写的HTML代码的话，会根据标签之前才到你大体描述的是什么内容，后台管理系统也类似，表单嵌套的话，会让你更清楚页面的层次结构。