内容提要语义标签的应用，在SEO优化中是最为基础的内容，语义标签的发展与进化，是随着HTML和CSS版本的升级而不断进化来的，随着HTML5的普及，SEO语义化的发展也向前大大的迈进了一步。这主要体现在语义标签和微数据的应用上。一个使用语义标签+微数据编写前端代码的网站，在搜索排名与搜索样式展现的丰富性上具有无与伦比的优势。HTML4.0：表格布局时代记得刚上大学的时候，学习网页设计这门课程就是从html4.0开始的，当时用到最多的语义标签就是h1-h6、p、table、当时的css还没有真正的得到普及，所有样式属性都是写在html代码中的，而且标签是否闭合，也没有严格要求，网格布局系统更是遥不可及的梦想。当时为了实现两栏或多栏布局只能使用表格套表格的模式进行操作。编写出来的页面代码层级繁多，且不易修改。表格布局的唯一优势是：在不同浏览器中都能得到很好的兼容。时至今日表格布局依然在EDM营销中发挥着不可替代的作用。div+css：病态的极简风随着CSS技术的发展成熟，div+css布局逐渐成为了潮流，各种DUV+CSS主题QQ群数不胜数，大家都在一起研究CSS，以及如何用div+css布局取代传统的table布局。典型的例子是利用css的display属性模拟table。display模拟表格时常用属性值display属性值功能描述table指定元素会作为块级表格来显示。类似于table，表格前后带有换行符。inline-table指定元素会作为内联表格来显示。类似于table，表格前后没有换行符。table-caption指定元素作为表格标题来显示。类似于captiontable-row指定元素作为表格行来显示。类似于trtable-cell指定元素作为表格单元格来显示。类似于td、thtable-column指定元素作为表格列来显示。类似于coltable-column-group指定元素作为表格列组显示。类似于colgroup
table-row-group
指定元素作为表格行组来显示。类似于tbodytable-header-group指定元素作为表格标题组显示。类似于theadtable-footer-group指定元素作为表格脚注组显示。类似于tfoot使用这种div+css布局的优势是：从传统的表格布局过度到DIV布局思路转换清晰，且在浏览器大战的年代可以少写很多csshack，大大提升了前端代码编写速度。但不知从何时起，出现了div+span两个标签走天下的病态极简风。甚至连表格布局时代常用的h标签和p标签都被div所取代了，大家都去研究css了，而忽略了html标签的本质。这其实是一种倒退。XHTML与web标准：语义标签的萌芽随着XHTML和web标准的兴起，以及对seo的重视，div+span走天下的局面得到了有效遏制，大家不仅开始研究html标签的语义与应用场景，CSS的命名规范也朝着语义化的方向发展。这主要是因为语义化可以带来如下好处：代码结构呈现优势:使页面没有css的情况下，也能够呈现出很好的内容结构有利于SEO:爬虫依赖标签来确定关键字的权重，因此可以和搜索引擎建立良好的沟通，帮助爬虫抓取更多的有效信息提升用户体验：例如title、alt可以用于解释名称或者解释图片信息，以及label标签的灵活运用。便于团队开发和维护:语义化使得代码更具有可读性，让其他开发人员更加理解你的html结构，减少差异化。方便其他设备解析:如屏幕阅读器、盲人阅读器、移动设备等，以有意义的方式来渲染网页。XHTML标签语义化举例说明标签英文说明h1-h6head定义标题pparagraph定义段落ulunorderedlist定义无序列表olorderedlist定义有序列表lilistitem定义列表项dldefinitionlist定义列表dtdefinitionterm定义列表标题dddefinitiondescription定义列表描述tabletable定义表格thtableheadcell定义表头单元格trtablerow定义表格行tdtabledatacell定义表格单元格aanchor定义描文本imgimage定义图像随着语义标签的出现，olli布局，ulli布局，dldtdd布局逐渐兴起，替代了div这个毫无语义的块儿级元素的布局方法，css也发展出了面向对象OOPCSS的编写模式，为了顺应了语义化发展的大趋势，css的文件名及class、id属性命名也开始了其规范化、语义化的进程。CSS文件名命名规范css文件名说明main.css主要的module.css模块base.css基本共用layout.css布局themes.css主题columns.css专栏font.css文字forms.css表单mend.css补丁CSS结构属性命名规范css页面结构属性名说明container容器header页头content内容main页面主体footer页脚sidebar侧边栏column栏目wrapper布局宽度CSS导航属性命名规范css导航属性命名说明nav导航mainnav主导航subnav子导航topnav吸顶导航sidenav侧导航leftnav左导航rightnav?右导航menu菜单submenu子菜单CSS功能组件属性命名规范css功能组件命名说明logo标志banner广告search搜索title标题summary摘要tab切换面板list文章列表news新闻hot热点icon图标button按钮friendlink友情链接page分页copyright版权CSS的命名规范是SEOer和前端开发工程师沟通的有利工具，我们可以通过语义化的css属性名称快速的判定html标签使用是否规范，是语义化重构和代码优化中的重要参考。HTML5：语义化标签时代在HTML5出来之前，我们用div来表示页面章节，但是这些div都没有实际意义。这些标签只是我们提供给浏览器的指令，只是定义一个网页的某些部分。但现在，那些之前没有“语义”的标签因为html5的出现消失了。HTML5语义标签布局结构图HTML5结构体语义标签标签说明header定义页头nav定义导航链接section定义文档章节article定义独立内容主体aside定义相关推荐footer定义页脚HTML5块级文本语义标签标签说明blockquote定义引用内容figure定义一组插图figcaption定义插图的说明或标题address定义联系信息main定义主要内容，仅能出现一次hgroup定义标题组HTML5内联文本语义标签标签说明abbr定义缩写cite定义作品引用q定义短引用dfn定义术语b定义粗体文本em定义强调文本strong定义重要文本mark定义突出显示文本i定义斜体文本time定义时间samp定义程序代码div与span的正确使用方式div是一个无语义的块级容器，span是一个无语义的行内容器，当没有其他语义标签可使用时，才会用到，一般用来辅助css实现特殊样式。语义标签现状由于前端技术发展迅猛，以及开发时间的紧迫性，前端开发程序员都去研究前端框架了，很可能忽略了语义标签的使用，所以，标签语义化的重任就压在了每一位SEO从业者的肩头，我们应该辅助前端程序员写出：优雅、简洁、易读，有利于搜索引擎抓取的前端代码。本文仅对常用的语义标签加以说明，更多HTML5语义标签的使用方法
转载请注明：http://www.qianzhongdushijian.com/jdsz/6246.html
当前位置： 铅中毒事件 > 识诊急性铅中毒 > 前端优化语义标签进化史
