SEO:(Search Engine Optimization)意为搜索引擎优化。搜索引擎优化是一种利用搜索引擎的搜索规则来提高目的网站的自然排名的方式。说白了就是对品牌的自我宣传,从而获取收益。
HTML语义化:根据内容的结构的语义化,选择合适的标签(代码语义化)便于开发者阅读和写出更优雅的代码的同时利于SEO优化。
前面也做了基本的阐述:
SEO就是为了对品牌的自我宣传,从而获得收益;
语义化的目的:
在没有css的情况下,页面也能呈现出很好的内容结构,代码结构;
提升用户体验:例如title、alt用于解释名词和解释图片信息;
有利于SEO优化:和搜索引擎建立良好的沟通,有助于爬虫抓取更多的有效信息,爬虫依赖于标签来确定上下文和各个关键字的权重;
方便其他设备解析如屏幕阅读器、盲人阅读器、移动设备;
语义化更据有可读性,便于团队开发和维护。
Google、Yahoo、Bing 约定,对 http://schema.org 所列出来的标签进行解析。
原因其实很简单,因为schema标签对搜索引擎很重要。目前,搜索引擎的发展趋势是全能化,简单化,让用户在最短的时间里获取到想要的信息,让用户在点击搜索结果之前就获取到足够的信息进行判断。
比如Google general search,Google会根据你搜索的关键词推荐网页、新闻、图片、视频、音乐、商品、地图、本地结果、实时结果等等。
比如Google onebox,Google会根据某些特定的指令,直接给出针对性的结果,现在在搜索引擎可以直接查天气,查航班。
还有前段时间Google推出的网站截图预览,snippets lists等等。
Google的目标是要整合所有资源,让用户能方便获取到。资源有很多种,文字目前搜索引擎可以完全识别到,但是图片、flash、音乐、视频搜索引擎不能识别或只能识别一小部分,所以以目前的技术,尚不能整合网站上所有呈现出来的资源,所以需要用户进行配合。
我觉得这就是语义化标签出现的意义吧。
搜索引擎希望每个网站都把不同的资源标记出来,并打上搜索引擎容易识别的标签,利于搜索引擎进行判断归类,并在搜索结果中更好的呈现出来。
从SEO角度来看,对搜索引擎重要的就是对SEO重要的。
网站如果按照schema上的规则进行重写代码,方便了搜索引擎对信息的抓取,对网站内容在搜索结果中的呈现会有很好的帮助,能够适应搜索引擎的发展趋势。也许对某些关键词排名不会有明显的效果,但是从长远来看,对于从搜索引擎获取流量应该有不小的帮助。
W3C定义了这些语义标签,不可能完全符合我们有时的设计目标,就像制定出来的法律不可能流传100年都不改变,更何况它才制定没多久,不可能这些语义标签对所以设计目标的适应。只是一定程度上的“通用”,我们的目标是让爬虫读懂重要的东西就够了。
结论:不能因为有了HTML 5标签就弃用了div,每个事物都有它的独有作用的。
节课介绍HTML常用的标签以及什么是HTML语义化。
案例和由此案例重点讲解的知识点介绍
案例代码实现
html标签语义化知识点详解
此案例是页面,效果如下:
此页面的技术实现解析:
使用语义化标签header实现登录头部分,使用section来书写登录部分,让页面更加整洁易懂。
此案例中主要用到了header和section,基于此,我们会系统的将如下知识点全部讲解:
标签语义化
语义化注意事项
第一步:使用语义化标签header和section编写登录页面html
第二步:全局css样式声明
第三步:登录头headercss样式
第四步:登录主体section及用户名密码输入框css样式
第五步:登录按钮css样式
标签语义化
-标签语义化概念:根据内容的结构化(内容语义化),选择合适的标签(代码语义化)
-标签语义化意义:
1:网页结构合理
2:有利于seo:和搜索引擎建立良好沟通,有了良好的结构和语义你的网页内容自然容易被搜索引擎抓取;
3:方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)
4:便于团队开发和维护
标签语义化(注意事项)
1:尽可能少的使用无语义的标签div和span;
2:在语义不明显时,既可以使用div或者p时,尽量用p, 因为p在默认情况下有上下间距,对兼容特殊终端有利;
3:不要使用纯样式标签,如:b、font、u等,改用css设置。
4:需要强调的文本,可以包含在strong或者em标签中strong默认样式是加粗(不要用b),em是斜体(不用i);
*请认真填写需求信息,我们会在24小时内与您取得联系。