如何理解HTML语义化

rule

什么是语义化

其实说到语义化的问题，显而易见是有段不那么语义化的历史的。
最早的时候，前端并不是一个细分的岗位。通常由PHP后端来写HTML，但是他们并不会CSS，于是就用table来进行布局。但我们都知道，table其实是用来展示表格的，这一条就与语义化严重相悖。
后来前端慢慢分离成一个单独的岗位，他们会使用DIV+CSS布局，并且主要利用float和绝对定位进行布局，相比较使用table来布局，稍微符合了语义化。
前端发展到现在，对于整个页面各部分内容，都已经有相对应的标签去展示，比如会用h1展示标题，ul，ol等去展示列表，还有诸如p、ul、section、footer、nav等等标签。

所以语义化，其实就是用恰当的标签，去展示恰当的内容，而非table、div一把梭的方式。

为什么要尽量语义化

通过使用恰当语义的标签，可以让页面具有良好的结构和含义，因此好处也是显而易见的：

1. 更省代码：更少的HTML代码。如果技术的革新不是为了省代码，那将毫无意义；
2. 更清晰的DOM结构：你不再需要些一堆冗余且意义不明的标签，有利于书写css和js；
3. 更有利于SEO：可以提高搜索引擎的有效爬取，提高网站的流量；
4. 可读性：如果不幸网站的样式丢失，清晰的结构依然使你的页面可读性较高；
5. 互用性：没人喜欢维护一坨烂代码，语义化的HTML代码，让你的团队维护更轻松。

那些被滥用语义化标签

很多语义化标签有自带的样式，被用来做不正确的事情了：

• p：一些开发者用

   

  来为标签之间增加额外的空白，但其实应该用CSS的margin/padding来实现；
• ul：一些开发者向
  中添加文本来达到文本缩进的目的，这种做法严重违反语义化，
  中只应含有
  • 标签；

  • ~

    ：这个标签用于表示标题，而一些开发者利用该标签实现文字的加粗、字体放大等目的，实现方式应以CSS的font-weight和font-size为佳；

  • blockquote：该标签可以实现文本缩进，但该标签从语义上来说，应该用于展示应用内容。要实现缩进，请选择CSS的margin属性代替。
    
    

    一个没有使用div标签的页面（图片来源于网络）

  易混淆的语义化标签

  i和em：

  • i是italic（斜体）的缩写，它的出现不会改变语义。通常在一段普通文本中，因为某种原因，部分内容与正常文本不同（如专业术语、外语短语等），此时会用i来包裹特殊内容。
    一段文本中，如果插入了语言不同的专业术语，需要在i标签中加入lang属性作为注解。

  • em是emphasize（强调）的缩写，表达对文本内容的强调，在语义上来说，位于句子不同位置的强调，会对语义带来变化。

  由于i和em的表现都是斜体，因此会造成混淆，区分的关键在于语义是否被改变。
  但需要注意的是，并不适用于需要传达重要性的内容，传达重要性的语义应该使用。更具体一点则是，强调句子中的重要内容，强调在整个html中的重要内容。

  b和strong：

  • b是bold（粗体）的缩写，它的出现不会改变语义。

  • strong也是加粗的表现形式，但它用于强调被包裹的内容在整个html页面的重要性。

  无论从何种角度来说，违背语义化的标签，都应该让它消失在历史的长河之中。