web语意化,事实上就是使用恰当的语意的html标签和css class等内容,让页面具有良好的语义和结构,从而方便人类和机器都能快速理解网页内容。

  • 用正确的标签做正确的事情
  • 页面内容结构化
  • 无CSS时也能进行网页的阅读

  • 方便浏览器 搜索引擎解析 利于SEO。

    HTML语义化

    反对大篇幅使用无语义化的 div + css + span, 而鼓励使用 html定义好的语义化标签。

    header

    hgroup

    footer

    nav

    article

    section

    aside

    css语义化

    css命名首先要满足W3C的命名规范和团队命名规范，其次是高效和可重用性。

    拓展:ARIA

    ARIA 即 Accessible Rich Internet Application，中文译为无障碍富互联网应用。其主要目的是为一些有功能障碍（如听力，视力）的人群通过屏幕阅读器例如 voiceover 等，提供无障碍访问动态、可交互Web内容。
    其中应用于 HTML 的有两个关键属性：

  • role：标识了一个元素的作用

  • aria-*：描述了与之有关的事物特征及其状态

    总结

    你可以尽量只用自己熟悉的语义标签，并且只在有把握的场景引入语义标签。
    语义化标签的一些点可能会降低开发者的使用欲望
  1. 有些标签可能还不知道就已经过时了
  2. 很多语义标签自带样式，而这些样式我们并不需要，所以还要先取消默认样式。
  3. 现代网页已经不再是按照书籍排版的结构来的，很多页面元素并不容易明确应该使用哪个语义标签。