html语义化的案例分析|青训营

39 阅读1分钟

1、什么是HTML语义化?

“语义化”指的是在需要更少的人类干预的情况下,让网页能够被机器理解,起到了强调的作用。至于列表和表格很明显的告诉你他们是做什么的。

2、好处是什么?

语义化的网页的好处,最主要的就是对搜索引擎友好,有了良好的结构和语义你的网页内容自然容易被搜索引擎抓取,你网站的推广便可以省下不少的功夫。

3、为什么要HTML语义化?

  • 用户体验较好:例如:label标签的活用、title、alt用于解释名词或解释图片。
  • 方便其他设备解析(阅读器、移动设备)以意义的方式来渲染网页。
  • 便于团队维护:语义化的HTML更具可读性,团队遵循W3C标准。
  • 有利于SEO:和搜索引擎建立友好的交流,有利于爬虫抓取更多的有效信息。

之前的文章里了解过这一方面的知识,滥用语义化是一件有问题的事情。

4.具体分析 这是b站的个人主页

image.png

页面可以分为导航区、内容区,和两边的侧边栏。

导航主要包括热门资源,搜索栏,和用户的一些信息。

中间导航包括用户喜欢的UP主最近的动态,热门,频道,还有一些资源的分类选项。

image.png HTML结构:

<body>
    <div>
      <nav>导航</nav>
    </div>
        <aside>
        左侧边栏
    </aside>
    <main>
        内容区
    </main>
    <aside>
        右侧边栏
    </aside>
  </body>