什么是语义化标签?
HTML赋予了每个标签以不同的语义。高质量的HTML代码,要求我们在遵循HTML语法的同时,也应该遵循HTML的标签语义,如:
div 语义:Division(分隔)
span 语义:Span(范围)
ol 语义:Ordered List(排序列表)
ul 语义:Unordered List(不排序列表)
li 语义:List Item(列表项目)
...
HTML常用标签语义:
<Hx>
<h1>、<h2>、<h3>、<h4>、<h5>、<h6>,作为标题使用,并且依据重要性递减。<h1>是最高的等级。
由于一些浏览器会默认地把 <h1> 元素显示为很大的字体,因此会有一些 web 开发者使用 <h2> 元素代替 <h1> 元素来显示最上层的标题。这样做不会对读者产生影响,但会使那些试图“理解网页结构
”的搜索引擎和其他软件感到迷惑。
请确保把 <h1> 用于最顶层的标题,<h2> 和 <h3> 用于较低的层级。
从语义上讲,它们应该适用于所有标题文字。
但这里会出现一个语义上的分歧。h1究竟该理解为一级标题呢还是理解为1号字体大小的标题。我通常理解为一级标题,一级标题下再有小标题就用h2。但是事实上回顾HTML设计之初,h1-h6后面的数字
更多的被理解为控制标题文字大小的。用h3或许只是为了使用三号大小的字体,而并非它就是三级标题。否则一级标题全用h1,个个都是斗大的字,又不得不用CSS来控制字号,感觉很累赘。所以,这是
一个待商榷的问题。
例如:
-
<h1>标题1</h1>
-
<h2>标题2</h2>
<b>标签与<strong>标签
<b>:标签语义为“加粗”
<strong>:标签语义为“强调”
当我们知道了<b>标签和<strong>标签的语义时,做SEO时就好决定用哪个来强调重要的关键字了,强调用<strong>,纯粹加粗用<b>
<ul>标签、<ol>标签、<li>标签
<ul>语义: 定义无序列表
<ol>语义:定义有序列表
<li>语义:定义列表项目
所以涉及到列表的项目,应该用<ul><li>或<ol><li>来布局,而不是用<table>或<p>甚至<span>,当然也可以用<dl><dt><dd>
应该要补充的是,别忘了li里面还可以再用ul或ol,形成第二级列表。
<dl>标签、<dt>标签、<dd>标签
<dl>语义:定义了定义列表
<dt>语义:定义了定义列表中的项目(即术语部分)
<dd>语义:定义列表中定义条目的定义部分
一些带标题的列表可采用<dl><dt><dd>自定义列表
<span>标签
<span>语义:被用来组合文档中的行内元素
列如:
-
pspan{color:#ff0000;font-weight:bold;}
-
<p>
-
<span>提示:</span>:这是提示内容
-
</p>
可以为 span 应用 id 或 class 属性,这样既可以增加适当的语义,又便于对 span 应用样式。
<table>、<th>、<td>、<caption>
<table>语义: 定义 HTML 表格
<th>语义: 定义表格内的表头单元格
<caption>语义: 定义表格标题
<button>标签、<input>标签、<textarea>标签
<button> 标签定义一个按钮
<input> 标签用于搜集用户信息,根据不同的 type 属性值,输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。
<button> 控件 与 <input type="button"> 相比,提供了更为强大的功能和更丰富的内容。<button> 与 </button> 标签之间的所有内容都是按钮的内容,其中包括任何可接受的正文内容,比如文本或
多媒体内容。
<textarea>语义:定义多行的文本输入控件
<label> 标签
<label>语义: 为 input 元素定义标注(标记)
<center>,<font>不建议使用
分享到:
相关推荐
语义化HTML中的标签和属性,web开发人员必须掌握的技术。
语义化标签优点:为了在没有CSS的情况下,页面也能呈现出很好的内容结构比标签有更加丰富的含义,方便开发与维护方便其他设备解析(移动设备等)有利于合作,遵守W3C标准HTML5语义化标签标签标签装载显示一个独立的...
语义化标签.html
简单说下你理解的语义化,怎样来保证你写的符合语义化?HTML5语义化标签了解下?
html标签、html语义化
HTML5新特性 简洁的DOCTYPE: HTML5 只有一个简单的文档类型:<!DOCTYPE html>,表示浏览器会按照标准模式解析。 简单易记的编码类型 你现在可以在meta 标签中使用...更加语义化的新增标签 比如说:、、、、 <hea
html5语义化标签 一、首先我们提出疑问,什么是语义化标签以及我们为什么要去使用它? 在语义化标签出来之前,我们可以用div+css实现完全可以实现布局,为什么要多此一举呢? 1)为了在没有CSS的情况下,页面也能...
在网页中HTML专门用来负责网页的结构,所以在使用html标签时,应该关注的是标签的语义,而不是它的样式标题标签: h1 ~ h6 一共有六级标题 从h1~h6重要性递减,h1最重要,h6最不重要 h1在网页中的重要性仅次于...
Web-前端html+css从入门到精通 124 HTML5新语义化标签(2).zip
Web-前端html+css从入门到精通 123. HTML5新语义化标签(1).zip
Web-前端html+css从入门到精通 125. HTML5新语义化标签(3).zip
语义化是指在编写HTML和CSS代码时,通过恰当的选择标签和属性,使得代码更具有语义性和可读性,使得页面结构和内容更加清晰明了。语义化的目的是让页面具备良好的可访问性、可维护性和可扩展性。 语义化的重要性...
语义化的标签,旨在让标签有自己的含义。代码结构清晰,方便阅读,有利于团队合作开发。
html 5 新增语义化标签、智能表单 css 渐变、弹性盒相关知识总结 css 3D css 的一些其他属性
可是在后来对于前端开发来说纯DIV+CSS已经被程序员们所丢弃,随着“标签语义化”这个词就出来了。 那么这个词是什么意思呢?下面摘自百度百科: html标签语义:即html标签的含义。 首先是关于语义(Semantics)和...
以前我真的没有怎么重视过搜索引擎,现在开始比较在意了,因为页面的很大一部分流量是来自搜索引擎的,要使页面尽可能地对搜索引擎友好,所以就要尽可能地使标签语义化。 以前以我对web开发的粗浅理解,觉得写一个...
...
...