语义化的HTML及其目的
一、什么是语义化的HTML?
语义化的HTML就是写出的HTML代码,符合内容的结构化(内容语义化),选择合适的标签(代码语义化),能够便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。
二、为什么要做到语义化?
1.有利于SEO,有利于搜索引擎爬虫更好的理解我们的网页,从而获取更多的有效信息,提升网页的权重。
2.在没有CSS的时候能够清晰的看出网页的结构,增强可读性。
3.便于团队开发和维护,语义化的HTML可以让开发者更容易的看明白,从而提高团队的效率和协调能力。
4.支持多终端设备的浏览器渲染。
三、语义化HTML改怎么做呢?
在做前端开发的时候要记住:HTML 告诉我们一块内容是什么(或其意义),而不是它长的什么样子,它的样子应该由CSS来决定。
写语义化的 HTML 结构其实很简单,首先掌握 HTML 中各个标签的语义,在看到内容的时候想想用什么标签能更好的描述它,是什么就用什么标签。
<h1>~<h6> ,作为标题使用,并且依据重要性递减,<h1> 是最高的等级。
<p>段落标记,知道了 <p> 作为段落,你就不会再使用 <br /> 来换行了,而且不需要 <br /> 来区分段落与段落。<p> 中的文字会自动换行,而且换行的效果优于 <br />。段落与段落之间的空隙也可以利用 CSS 来控制,很容易而且清晰的区分出段落与段落。
<ul>、<ol>、<li>,<ul> 无序列表,这个被大家广泛的使用,<ol> 有序列表也挺常用。在 web 标准化过程中,<ul> 还被更多的用于导航条,本来导航条就是个列表,这样做是完全正确的,而且当你的浏览器不支持 CSS 的时候,导航链接仍然很好使,只是美观方面差了一点而已。
<dl>、<dt>、<dd>,<dl> 就是“定义列表”。比如说词典里面的词的解释、定义就可以用这种列表。
<em>、<strong>,<em> 是用作强调,<strong> 是用作重点强调。
<table>、<td>、<th>、<caption>, (X)HTML中的表格不再是用来布局。
语义化的HTML及其目的的更多相关文章
- Html标签的语义化
为了使我们的网站更好的被搜索引擎抓取收录,更自然的获得更高的流量,网站标签的语义化就显得尤为重要.所谓标签语义化,就是指标签的含义. 为了更好的理解标签的语义化,先看下面这个例子: 1 <tab ...
- Html技巧 语义化你的代码
首先是关于语义(Semantics)和默认样式的区别,默认样式是浏览器设定的一些常用tag的表现形式,语义化的主要目的就是让大家直观的认识标签(markup)和属性(attribute)的用途和作用. ...
- HTML5之语义化标签
HTML 5的革新之一:语义化标签一节元素标签. 在HTML 5出来之前,我们用div来表示页面章节,但是这些div都没有实际意义.(即使我们用css样式的id和class形容这块内容的意义).这些标 ...
- 语义化的html结构的好处
HTML是提供网页文档内容的上下文结构和含义:html本身是没有表现的,我们看到例如<h1>是粗体,字体大小2em,加粗:<strong>是加粗的,不要认为这是html的表现, ...
- 你如何理解HTML结构的语义化?
去掉或样式丢失的时候能让页面呈现清晰的结构: html本身是没有表现的,我们看到例如<h1>是粗体,字体大小2em,加粗:<strong>是加粗的,不要认为这是html的表现, ...
- 转html5语义化标签总结一
HTML 5的革新之一:语义化标签一节元素标签. 在HTML 5出来之前,我们用div来表示页面章节,但是这些div都没有实际意义.(即使我们用css样式的id和class形容这块内容的意义).这些标 ...
- 快速理解web语义化
什么是Web语义化 Web语义化是指使用恰当语义的html标签.class类名等内容,让页面具有良好的结构与含义,从而让人和机器都能快速理解网页内容.语义化的web页面一方面可以让机器在更少的人类干预 ...
- web语义化之SEO和ARIA
在快速理解web语义化的时候,只知道web语义化有利于SEO和便于屏幕阅读器阅读,但并不知道它是如何有利于SEO和便于阅读器阅读的,带着这个疑问,进行了一番探索总结. SEO 什么是SEO? SEO( ...
- HTML语义化的理解
语义化的主要目的:用正确的标签做正确的事情. 语义化验证方法:css裸奔--去掉css样式,然后看页面是否还具有很好的可读性. 语义化意义 / 优点: 1.让页面的内容结构化 2.利于浏览器解析和SE ...
随机推荐
- window本地运行mapreduce程序
mapreduce的运行方式一般有两种,一是从本地导出一个jar包,在传到虚拟机上运行,这样调试起来非常的不方便,如果出现错误就需要重新导出jar包. 第二种方式是在本地直接运行,但是在运行前需要进行 ...
- js时间的应用(再看看前面,会发现不一样的)
1.年份(1970-) 获取 date.getFullYear(); 设置 date.setFullYear(2016); 2.月份(0-11) 0代表1月 获取 date.getMonth() 设置 ...
- Django中url的反向查询
明确几个概念: application namespace: 正在部署的app的名称,一个app的多个实例应该具有相同的application namespace. 可以通过在URLconf模 ...
- deepin安装Mariadb后,登录时出现ERROR 1045 (28000): Access denied for user 'root'@'localhost'
安装Mariadb的时候设置了root密码,但是登录的时候出现了这样的提示 这里记录下我的处理方法.我是用的如果重置root密码的套路. 首先,在/etc/mysql/mariadb.conf.d/5 ...
- 解决waveInOpen录音编译x64程序出错的问题
1.之前也碰到过x86程序升级为x64程序,关键点是类型大小的使用. 之前同事碰到过一个用int表示指针的程序,程序改为x64会出错,找原因找了半天. 2.今天我也碰到了,使用aveInOpen录音, ...
- 【Java并发编程】:深入Java内存模型—内存操作规则总结
主内存与工作内存 java内存模型的主要目标是定义程序中各个变量的访问规则,即在虚拟机中将变量存储到内存和从内存中取出变量这样的底层细节.此处的变量主要是指共享变量,存在竞争问题的变量.Java内存模 ...
- eclipse中explorer显示方式
不知道是不是上面的描述.做个记录 project explorer 项目资源管理器 这个要打开代码目录需要再点开java resources 还会出现deployment Descriptor项目工程 ...
- test11
-Xms512m-Xmx512m-XX:PermSize=512-XX:MaxPermSize=512
- mongodb-手写mongoclient加入到springmvc中
由于一个项目使用的是springmvc3.x版本, mongodb使用的为3.x版本, 所以springmvc继承的mongodb-data并不可用, 只能自己手写一个mongoclient并加入到s ...
- springboot-7-配置druid数据源监视
关于druid数据源的配置, 上个博客已经说过了,再说一遍吧 , 引入依赖 , 配置properties参数 , 编写servlet和filter提供页面监视 , 测试 1, 引入maven依赖 &l ...