一、语义化标签的实战意义
我先收集到一些观点,大家姑且先听上一听,
有人说:
“没必要考虑语义化,只要我写的代码浏览器运行后没问题就行,反正领导根本不关心这些”
“语义化是w3c推广的,我是很想语义化我的代码,但总是用不明白”
“这个不好说,语义化再好有啥用,关键是有好的项目,客户才是金主!”
“除了专业人士,谁会去看我们的代码是不是语义化的”
不仅仅有页面重构人员的声音,也听一听工程师、设计师、还有项目管理人员,他们是怎么看“语义化”这件事的
Php工程师:“无所谓什么语义化,只要逻辑正确,不影响我循环数据”
项目管理人员:“我更看重在最短的时间,实现我的需求,至于语义化不是我们关心的,只要别耽误项目时间,你们怎么优化都行 ”
设计师:“什么是语义化?”
市场销售人员:“客户满意就行,客户满意我们才能赢利”
这些声音时常充斥在我们的耳边,虽有些片面,但似乎还是挺有道理的,可站在自己的立场上(一个页面重构人员),基于这些现实条件,我们要如何权衡,语义化和现实工作之间的关系?我们该怎么做呢?
先解释几个名词,我们再来讨论在实际工作中如何处理这些问题。
首先解释一下什么是语义化?
根据内容的结构化(内容语义化),选择合适的标签(代码语义化)便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。
二、语义化存在的意义
为了在没有CSS的情况下,页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看;
用户体验:例如title、alt用于解释名词或解释图片信息、label标签的活用;
有利于SEO:和搜索引擎建立良好沟通,有助于爬虫抓取更多的有效信息:爬虫依赖于标签来确定上下文和各个关键字的权重;
方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义的方式来渲染网页;
便于团队开发和维护,语义化更具可读性,是下一步吧网页的重要动向,遵循W3C标准的团队都遵循
事实上SEO最有效的一种办法,就是对网页的HTML结构进行重构,实质上就是语义化。”
三 html5 语义化标签
在HTML 5出来之前,我们用p
来表示页面章节,但是这些p
都没有实际意义。(即使我们用css样式的id和class形容这块内容的意义)。这些标签只是我们提供给浏览器的指令,只是定义一个网页的某些部分。但现在,那些之前没“意义”的标签因为因为html5的出现消失了,这就是我们平时说的“语义”。
看下图没有用p标签来布局
html5的布局
嗯,如上图那个页面结构没有一个p,都是采用html5语义标签(用哪些标签,关键取决于你的设计目标)。
但是也不要因为html5新标签的出现,而随意用之,错误的使用肯定会事与愿违。所以有些地方还是要用p的,就是因为p没有任何意义的元素,他只是一个标签,仅仅是用来构建外观和结构。因此是最适合做容器的标签。
W3C定义了这些语义标签,不可能完全符合我们有时的设计目标,就像制定出来的法律不可能流传100年都不改变,更何况它才制定没多久,不可能这些语义标签对所以设计目标的适应。只是一定程度上的“通用”,我们的目标是让爬虫读懂重要的东西就够了。
结论:不能因为有了HTML 5标签就弃用了p,每个事物都有它的独有作用的。
节点元素标签因使用的地方不同,我将他们分为:节元素标签、文本元素标签、分组元素标签分开来讲解HTML5中新增加的语义化标签和使用总结。
header元素
header 元素代表“网页”或“section”的页眉。
通常包含