重学基础和原理 1 - 如何理解 HTML 语义化

返璞归真，重学基础和原理 - 第1篇

每日一记，重新梳理下对前端基础知识的理解

做业务开发时间久了，很多基础的知识慢慢被遗忘，但往往这些基础和原理性的知识才是最重要的，丢不得。

其实这个问题在我们开发的时候根本不会遇到，只会出现在面试中。

那如果是你，你怎么回答呢？

语义化可以这样理解，对比下我们生活中人和人沟通交流，要想更高效的将信息传达出去或者解决问题，就需要想办法表达清楚，要语义明确，有逻辑性。

同样 html 语义化也是为了让计算机和人能更好的读懂和理解。

语义化可以大大的提高代码的可读性，我们平时写的js css 代码肯定不是随意定义变量，而是会取一些有意义的名称，让自己和其他人能更快的读懂，比如 num,size,width,height等。

另外对于搜索引擎也是有好处的，有利于搜索引擎更好的分析网页的内容给你，通过读取内容，分析这些特殊标签，可以判断这段内容的类型和重要性,比如 h1表示的就是页面标题，p 就是段落内容。

当然你可以只使用 div 一个标签来实现整个页面的布局，但是不推荐这样做，这样就完全失去了语义化的意义。另外使用语义化的标签后，即便网页没有样式，依然能保持页面呈现清晰的主次结构，使你的页面可读性较高，如果全用 div，这是完全做不到的。

html 也属于 xml，符合 xml 标准，但html不能自定义标签，而是提供了一些固定的标签,这些固定标签都是有特殊意义的，目的就是为了语义化。

xml

<list>
    <item></item>
<list>

html

<title> 页面标题
<h1> 标题
<p> 段落
<a> 链接
<ul> 无序列表
<ol> 有序列表

到了html5，又增加了很多新标签，语义化更强。

<article>文章
<header>页头
<footer>页脚
<address>	地址
<code>	代码
<menu>	菜单
<nav>	导航
<canvas> 画布
...

比如 b和strong, b 就是表示这段内容加粗，无语义化，一个样式上的处理，，而 strong 虽然也是表示加粗，但它用于强调被包裹的内容在整个html页面的重要性，更具语义化和人性化。

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

W3C 给我们制定了很好的标准，如果在团队开发中大家都遵循这个标准，就可以大大减少差异化内容，从而方便开发和维护，提高开发效率。

读者必看：既然读到了这里，就别这么快离开，奔着学习和交流的目的，可以思考下我说的对不对，有没有问题，和你的理解有什么不同。所以请思考片刻，留下你的足迹，交流是进步最快的途径。