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

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

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

    当然好处肯定是不仅仅如此,不然也不至于大家都说这个好了.由于我本人基本上参与开发的都是内部或者特定环境下使用的系统,所以对于SEO的优化平时基本上没有.所以平时对于Web语义化也不是很注重,在参考过一些资料以后才发现它的好处.

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

    之所以说语义化最大的用处在于SEO的优化,因为我们可以看代码比较一下:

    
             
      
                   
Student List
              
              
                   
Name
                   
Age
              
              
                   
Byron
                   
24
              
              
                   
Vincent
                   
25
              
              
                   
Casper
                   
27
              
         
    

    
             
      Student List
     
             
                  
                       
Name
                       
Age
                  
             
             
                  
                       
Byron
                       
24
                  
                  
                       
Vincent
                       
25
                  
                  
                       
Casper
                       
27
                  
             
        

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

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