web语义化

本文详细介绍了Web语义化的概念,包括HTML标签语义化和CSS类名语义化,并通过实例展示了如何提高搜索引擎查找效率及网页结构清晰度。文章还提供了推荐资源供深入学习。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

web语义化是指能够让机器读懂语言。

我所了解的web语义化包含两个方面:html标签语义化合css类名语义化。

html标签语义化化很明显,就是html的标签代表的含义,比如:

    h语义: header(标题)

     div 语义:Division(分隔)

     span 语义:Span(范围)

     ol 语义:Ordered List(排序列表)

     ul 语义:Unordered List(不排序列表)

     li 语义:List Item(列表项目)

     …………

为什么要强调html的语义化?为了更快地让搜索引擎搜到查找的内容。比如以下代码:

    <div id='title'>我是标题1</div> 

    <h1>我是标题2</h1> 

如果搜索引擎在查找标题,那它就会更快更准确地找到“我是标题2”,因为搜索引擎很容易读懂h标签的含义

 

css类名语义化

   我们常见的css类名有 left-content   right-bar等通过方位来命名的,如果我想把right-bar的样式用到页面的left,就意味着要改一下类名;这种命名方式是结构化;那如何使用语义化?常见的css语义有:

            头:header

            内容:content

            页脚:footer

            导航:nav

            子导航: subnav

            侧栏:sidebar

            菜单:menu

            ……

    如果把right-bar直接改成sidebar,我就不用纠结这个样式用的位置了 ,sidebar就是css类名的语义化

 

 

举了两个很简单的例子,不知道说明问题了没有

 

推荐文章:  http://studio.ewe.com.cn/?p=455  

                     http://ued.ctrip.com/blog/?p=2735     

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值