【原】常见的模块,你语义化了没

 记得在读大学期间,去找实习,面试时被问到“什么是标签的语义化”,一头汗水,也忘记那时是怎么瞎扯了,后来回宿舍,上网查“标签语义化”,当时的网络对标签语义化的解释并不多,在找了很多网络资料和书籍后才对语义化有一定的了解。现在标签语义化这个专业名字,在前端开发的领域中已经不陌生了。

  什么是标签语义化?为什么要标签语义化?如何语义化标签?这是一名合格的前端开发工程师需要思考的。《HTML标签语义化对照表》解释了HTML标签的语义,有助于大家理解语义化,《(X)HTML嵌套规则》说明了标签的嵌套规则,也是语义化标签需要认识的。关于语义化的好处,就笔者的理解有两点:一是对搜索引擎友好,良好的结构和语义让你的网页内容自然容易被搜索引擎抓取;二是当用户禁用CSS样式,裸奔的页面具有优秀的可读性。

  了解语义化的好处,也要了比较常见的语义化模块,这里介绍项目中常见的模块以及如何语义标签的一点看法,希望可以给大家带来帮助。

常见的模块,你语义化没

附件为测试实例,下载

  对模块语义标签的思考,总结如下:

  • 语义化标签,保证页面去掉样式具有良好的结构和可读性,又符合web标准
  • 尽可能使用有语义的标签在合适的地方来替代无语义标签div、span
  • 考虑使用p代替div在内容有语义的地方,因为p默认样式具有上下边距
  • 考虑strong、em代替span在有语义的地方, strong默认样式是加粗,em默认样式是斜体

作者:白树

出处:http://peunzhang.cnblogs.com/

时间: 2024-12-03 14:55:17

【原】常见的模块,你语义化了没的相关文章

网页的HTML结构进行重构:语义化标签的意义

文章简介:语义化标签的实战意义. 我收集到一些观点,大家姑且先听上一听,有人说:"没必要考虑语义化,只要我写的代码浏览器运行后没问题就行,反正领导根本不关心这些""语义化是w3c推广的,我是很想语义化我的代码,但总是用不明白""这个不好说,语义化再好有啥用,关键是有好的项目,客户才是金主!""除了专业人士,谁会去看我们的代码是不是语义化的" 不仅仅有页面重构人员的声音,也听一听工程师.设计师.还有项目管理人员,他们是怎么看&q

智能选择器和语义化的CSS

"结构永远服从于功能,这是不变的法则",建筑工程师"摩天大楼之父"Louis Sullivan如是说.因为工程师不希望让无辜的人们被碾压在巨大的建筑物下,这种大拇指式的规则是相当有用的.在设计中你应该总是以功能为重,然后让结构在结果中呈现.如果你以结构为重,虽然这能够建造出一栋漂亮的摩天大楼,但代价是埋下了许多相当危险的种子. 这些都是关于建筑师的,那么对前端架构师或者"非真正的架构师"来说呢?我们需要遵守这个法则还是忽略它? 随着面向对象的CS

使用Sass:语义化变量

文章简介:停止使用很多的Sass变量. 使用Sass,像这样来写代码: color: $body-text-color; padding: $sidebar-padding; 但我并不喜欢这样这样,我现在喜欢用Sass按下面的方式来写: color: $hot-pink; padding: 20px; 第一个是抽像的实例,远离了实用价值,我们应该使用一种更通用的,语义命名变量. 这种方法和很多人喜欢,特别当它涉及到颜色的应用.Sacha Greif的文章就是一个简单的Sass实例. $blue:

语义化的CSS:聪明的选择器语义化CSS

文章简介:结合智能选择器的语义化的CSS. "结构永远服从于功能,这是不变的法则",建筑工程师"摩天大楼之父"Louis Sullivan如是说.因为工程师不希望让无辜的人们被碾压在巨大的建筑物下,这种大拇指式的规则是相当有用的.在设计中你应该总是以功能为重,然后让结构在结果中呈现.如果你以结构为重,虽然这能够建造出一栋漂亮的摩天大楼,但代价是埋下了许多相当危险的种子. 这些都是关于建筑师的,那么对前端架构师或者"非真正的架构师"来说呢?我们需要

CSS命名的语义化和html5为语义和体验而生

文章简介:html5–为语义和体验而生. 开篇前的一些YY 曾几何时,一个人出设计稿,出完设计稿打开DW用拖出一个页面,再苦逼一点拖完页面后自己还要写后台,武林人称:美工.更苦逼的是当每一次需求变更后,去修改一大堆发麻的 ,于是"div+css"被搬上了互联网时代的舞台,一夜间N多的<DIV+CSS>葵花宝典横空出世,那时,我们活在了div+css的年代,那时,我们用上了 之后,腰不酸,腿不痛,加班也带劲了. YY结束,切入正题 Ghost曾在2年前就以<页面重构中的

语义化你的HTML标签和属性

语义化你的HTML标签和属性 分离结构与表现的另一个重要方面是使用语义化的标记来构造文档内容.一个 XHTML 元素的存在就意味被标记内容的那部分有相应的结构化的意义,没有理由使用其他的标记.换句话说,不要让 CSS 使一个 HTML 元素看起来就像另一个 HTML 元素,比如用<div>来代替<p>标记标题. 首先是关于语义(Semantics)和默认样式的区别,默认样式是浏览器设定的一些常用tag的表现形式,个人认为他的主要目的就是让大家直观的认识标签(markup)和属性(a

学习网页应知:HTML标签和属性的语义化

网页 分离结构与表现的另一个重要方面是使用语义化的标记来构造文档内容.一个 XHTML 元素的存在就意味被标记内容的那部分有相应的结构化的意义,没有理由使用其他的标记.换句话说,不要让 CSS 使一个 HTML 元素看起来就像另一个 HTML 元素,比如用<div>来代替<p>标记标题. 首先是关于语义(Semantics)和默认样式的区别,默认样式是浏览器设定的一些常用tag的表现形式,个人认为他的主要目的就是让大家直观的认识标签(markup)和属性(attribute)的用途

网页制作基础:HTML标签和属性的语义化

网页 分离结构与表现的另一个重要方面是使用语义化的标记来构造文档内容.一个 XHTML 元素的存在就意味被标记内容的那部分有相应的结构化的意义,没有理由使用其他的标记.换句话说,不要让 CSS 使一个 HTML 元素看起来就像另一个 HTML 元素,比如用<div>来代替<p>标记标题. 首先是关于语义(Semantics)和默认样式的区别,默认样式是浏览器设定的一些常用tag的表现形式,个人认为他的主要目的就是让大家直观的认识标签(markup)和属性(attribute)的用途

零才:HTML语义化在搜索引擎优化中的应用

        其实零才接触HTML语义化也不是很久,还记得第一次接触竟然是被某网络公司WEB前端招聘的HR问到,当时真的很囧.所谓吃一堑,长一智,零才决定对WEB前端和SEO结合起来学习.什么是HTML语义化?如果大家对它也较为陌生,或者决定对下面的解释理解起来有点吃力,可以参考下零才在微博中给的通俗解释.         分离结构与表现的另一个重要方面是使用语义化的标记来构造文档内容.一个XHTML元素的存在就意味被标记内容的那部分有相应的结构化的意义,没有理由使用其他的标记.换句话说,不要