你真的熟悉那随处可见的 HTML 吗？

因为昨晚的投票结果是“前端基础-你真的熟悉那到处可见的 html 吗” 得票最高，所以我们今天就更新这一篇啦。

有很多程序员可能就要说了，HTML这特么还要说吗，初级工程师的菜鸟才要去学的东西，这我还能不会不成？在我看来，HTML其实并不是你所想的这么简单，它入门容易不过想要玩的6是挺难的，要在现实场景中灵活把控，那就更加难上加难。

我们都知道，HTML的标签种类繁多，比如说媒体类，比如img，video，audio，又比方说head里面的元信息类，可我们的重点不在这个，我们先来说说被广泛使用在模块划分的语义类标签

此时我们可以反思一下，我们日常写HTML的时候，是不是差不多一直在使用 div 和 span 这两个玩意？大部分情况下，我们都不使用复杂的语义标签，而靠着这两个容器就可以吃遍天了，这样做是否可行，那当然可行了，毕竟你们的项目不是都做出来了么。这样做好不好，如果我说好这篇文章我就没法更下去了，可是实际情况下还真的是挺好的。

我们现在做的大部分项目，HTML都是充当了描述软件界面的角色，但是软件的这个界面我们其实想怎么去实现都是可以的，比如说我们的购物车，我就一定要给购物车的商品套上一个ul吗，它们的按钮，我一定要用button吗，所以这是没有必要根据语义来判断的，按钮就一定要用button这个观点明显是错的，所以，使用div和span来适应各种业务场景是没有毛病的

但是仍然不可否认，语义类标签有很多div和span无法替代的优点，试想一下，在没有css的前提下，语义化标签是否也能清晰明了地看出网页的结构，方便大家开发维护，而且不仅是对人阅读友好，对机器阅读也一样，让搜索引擎能更加方便获取到信息，就是我们日常提及的SEO，此外读屏软件生成目录的逻辑，也是根据语义化标签来进行自动生成的。
那为什么不强制性地要求大家都要规范使用语义化标签，其实还是因为不正确的使用会造成很多不必要的麻烦。比如：我们都知道ul是无序列表，ol是有序列表，所以很多知道了前端语义化但是没学的很精细的工程师就特别喜欢给这些存在同级并列关系的元素，都套上一个 ul

ul 是个啥样子？比如：
I have lived in the following countries：
· Switzerland
· Norway
· United Kingdom
· United States
ul 多数出现行文中间，它的上文多数在提示，要列举某些项，但是如果所有并列关系都用ul，会造成大量冗余标签，给机器阅读造成混淆，增加嵌套，给css编写加重负担。所以，用对比不用好，不用比用错好，但是我们大家还是应该争取用对它

因为HTML的语义标签的使用更接近我们平常说话用的自然语言，可是我们说话是没有一个标准的，所以只能是挑选几个场景来介绍一下：

在日语中有一个语法叫做：ルビ，它的读音是 ruby（著名的 ruby 语言就是据此命名的），它中文的意思大约类似于注解，它的形式可以看下图：

这张图选自某科学的超电磁炮的第二季第一话，图中的 teleport 放在空间移动上方的用法，就是日文中的 ruby 的用法，空间移动是动画中的一个角色白井黑子的skill，这里动画字幕上写的是空间移动，动画里的台词也用了英文发音 teleport ，这里就是形成了ruby的场景

此时会联想我们日常使用的表情包

在微信中我们一般也不能使用这种表情包的方式，我们也懒得收集这么多的表情包，所以我们一般用括号，比如宠（bi）溺（shi）的眼神。

在HTML5中 ruby 的思想就被引入，它由 ruby，rt，rp 三个标签实现。所以说我们很多时候根本无法用纯文字来表达。并且HTML有些标签也是必不可少的，比如请大家好好阅读以下三句话（使用em标签加重）：

今天我吃了一只鸡
今天我吃了一只鸡
今天我吃了一只鸡

你们是不是发现了，你们读的时候的停顿，语气是压根不一样的，而且在不同情况下的强调，也造成了语义的问题，比如第一句，我是今天吃的，不是昨天不是前天，第二句，我只是吃了一只，没吃多，第三句，我吃的是鸡，不是猪鸭鹅。这种意思，我们就可以轻松通过一个em标签来进行表明，当然也可以是strong和b那些。

再比如我们的 hgroup（HTML5.1似乎不能再使用了）和 section 标签，因为section可能用的稍微多一点我们就拿section来说吧，HTML5后我们引入了section，它不仅仅是一个有语义的div，它甚至会改变整个h1~h6的语义，因为在section中嵌套h1~h6，会使得h1~h6往下降级，所以HTML5过后我们使用section加h1的组合就可以形成简单的树形结构。

[/code][code] HTML 语义

复制代码

···

复制代码

弱语义

复制代码

···

复制代码

结构性元素

复制代码

···

复制代码

......

复制代码

[/code]
应用语义化标签也能更为明确地展示页面的信息，能让浏览器更好支持阅读视图功能，还有关于seo的问题，比如以下结构：
[list][*][*][*][*][*][*][*][*][*][*][*][*][*][*][*][*][*][*][/list][code]

复制代码

……

复制代码

……

复制代码

……

复制代码

……

复制代码

……

复制代码

……

复制代码

[code][/code]

简单阐述下，body下面是一个header，header如其名，通常出现于前部，表示导航或者介绍类的内容，和其同级的有一个aside，aside里面也有一个nav，文章整体是一个个的section，section里面可能存在嵌套，参考上一段代码也可以知道，最后是一个footer，通常出现于尾部，包含可能是相关链接，版权，作者等，aside表示和文章主体不太相关，可是又有必要出现的元素，比如侧边的导航，还有随处可见的小广告等，这个标签很容易被理解为侧边栏，实际上aside不一定为侧边栏，但是侧边栏就一定是aside。aside和header中都存在nav，它们也是有区别的，比如header的导航多数是链接到自己的文章，而aside很有可能是跨页面的形式。

我们这篇文章主要还是提出了一个观点，语义化标签是必要的，但是最好在自己了解清楚的前提下使用。

本篇文章是否有帮助或者存在需要指正修改的地方，可以在公众号上给我留言。之后可能更新的主题都由投票决定，详情请关注公众号的投票哦 !