1. HTML语义化或者说Web语义化

    所谓语义化这个概念,对于我本人来说最先的出处是招聘信息...好吧,我知道这有点伤,不过事实真的是我在招聘信息上看到对Web前端工程师的基本要求中就有"深入理解HTML语义化"这样的字眼.这以后这个词就被我丢到脑后了,直到若干年后的如今才打算拿出来晒晒,看看本身到底知道些什么.

    对于Web的语义化,百度百科和维基百科都有一些基础的解释,包括设计的背景和初衷以及对将来的美好展望.但我这里只想说,这个所谓的语义化的东西对咱们到底有什么用?工做中怎么用?

    好了,问题简单了,咱们站在一个至关务实的角度去看所谓的语义化,那么我认为最大的用处在于SEO的优化.

    固然好处确定是不只仅如此,否则也不至于你们都说这个好了.因为我本人基本上参与开发的都是内部或者特定环境下使用的系统,因此对于SEO的优化平时基本上没有.因此平时对于Web语义化也不是很注重,在参考过一些资料之后才发现它的好处.

    我最先开始学习页面编程的时候,那个时候你们很推从div+css,我本人也写的很顺手,就是无论什么内容,无论你要展现什么.全都是各类div,各类嵌套,而后配合一大堆css样式.按照web语义化的观点,这样的代码是很糟糕的,结构上没有含义,一旦css丢失就根本看不出一点结构了.网上说明语义化的时候也有不少人这么举例.好比明明能够用p标签或者span标签的地方也通通使用div.这种状况并很多见.

    之因此说语义化最大的用处在于SEO的优化,由于咱们能够看代码比较一下:

<table>
        <tr>
            <td colspan="2">Student List</td>
        </tr>
        <tr>
            <td>Name</td>
            <td>Age</td>
        </tr>
        <tr>
            <td>Byron</td>
            <td>24</td>
        </tr>
        <tr>
            <td>Vincent</td>
            <td>25</td>
        </tr>
        <tr>
            <td>Casper</td>
            <td>27</td>
        </tr>
    </table>

<table>
        <caption>Student List</caption>
        <thead>
            <tr>
                <th>Name</th>
                <th>Age</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Byron</td>
                <td>24</td>
            </tr>
            <tr>
                <td>Vincent</td>
                <td>25</td>
            </tr>
            <tr>
                <td>Casper</td>
                <td>27</td>
            </tr>
        </tbody>
    </table>

    这两段的代码你们能够很容易看出内容是同样的,显示效果也没有什么区别.可是在第2个里面,咱们经过代码结构就能够知道name和age是表头,剩下的tr是表内容.这是由于th,tbody这些标签告诉了咱们它们承载内容的含义.所谓语义化就是使用有含义的标签去作它该作的事.换句话说,人可以看明白这样的代码,可是机器解读的时候是否是能看明白,语义化就是为了让机器也能明白这样的含义.

    Web语义化是指使用语义恰当的标签，使页面有良好的结构，页面元素有含义，可以让人和搜索引擎都容易理解