html5 语义化 - html5 详细教程

梵高1年前 (2023-11-21)阅读数 23#技术干货

文章标签标签

html5 语义化

版本：HTML5

语义化的标签，旨在让标签有自己的含义。HTML5赋予网页更好的意义和结构。HTML结构语义化，是最近几年才提出来的，开发者们和官方提出了让HTML结构语义化的概念，并且w3c也在HTML5给出了几个新的语义化的标签。

一行文字

如上代码，p标签与span标签都区别之一就是，p标签的含义是：段落。而span标签责没有独特的含义。

语义化之后文档会有什么效果呢？就是你写的HTML结构，是用相对应的有一定语义的英文字母（标签）表示的，标记的，因为HTML本身就是标记语言。不仅对自己来说，容易阅读，书写。别人看你的代码和结构也容易理解，甚至对一些不是做网页开发的人来说，也容易阅读。

怎么知道自己的页面结构是否语义化，那就要看HTML布局结构，在去掉CSS样式表之后，是否，依然能很好的呈现内容的代码结构。也就是说，去掉CSS的装饰之后，整个HTML的结构阅读起来依旧主次分明，能够看清其整体的架构模块。这也就是，语义化之后我们想要HTML文档达到的效果。

其实语义化，也无非就是自己在使用标签的时候在合适的场景下选取合适的标签，比如h1~h5系列标签，在HTML中就是就是用来定义标题；而p标签，大部分情况下用以处理文字段落，table表格则适合做信息表格,等等。

 头部
 导航栏
 区块（有语义化的div）
 主要区域
 主要内容
 侧边栏
 底部

我们对整个HTML结构进行语义化的规范操作有如下几个好处：

这样有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以有意义的方式来渲染网页；
便于团队开发和维护，语义化更具可读性，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

HTML5中新增的语义化标签进一步加强了我们针对整个HTML结构进行语义化跟进的可操作性，使得我们网页布局的可阅读性更高。

常使用HTML语义化标签

	页面主体内容。
	h1~h6，分级标题，与协调有利于搜索引擎优化。
	无序列表。
	有序列表。
	页眉通常包括网站标志、主导航、全站链接以及搜索框。
	标记导航，仅对文档中重要的链接群使用。
	页面主要内容，一个页面只能使用一次。如果是web应用，则包围其主要功能。
	定义外部的内容，其中的内容独立于文档的其余部分。
	定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
	定义其所处内容之外的内容。如侧栏、文章的一组链接、广告、友情链接、相关产品列表等。
	页脚，只有当父级是body时，才是整个页面的页脚。
	呈现小号字体效果，指定细则，输入免责声明、注解、署名、版权。
	和 em 标签一样，用于强调文本，但它强调的程度更强一些。
	将其中的文本表示为强调的内容，表现为斜体。
	使用黄色突出显示部分文本。
	规定独立的流内容（图像、图表、照片、代码等等）（默认有40px左右margin）。
	定义 figure 元素的标题，应该被置于 figure 元素的第一个或最后一个子元素的位置。
	表示所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。
	定义块引用，块引用拥有它们自己的空间。
	短的引述（跨浏览器问题，尽量避免使用）。
	datetime属性遵循特定格式，如果忽略此属性，文本内容必须是合法的日期或者时间格式。
	简称或缩写。
	定义术语元素，与定义必须紧挨着，可以在描述列表dl元素中使用。
	作者、相关人士或组织的联系信息（电子邮件地址、指向联系信息页的链接）。
	移除的内容。
	添加的内容。
	标记代码。
	定义已知范围或分数值内的标量测量。（Internet Explorer 不支持 meter 标签）
	定义运行中的进度（进程）。

article

article标签装载显示一个独立的文章内容。例如一篇完整的论坛帖子，一则网站新闻，一篇博客文章等等，一个用户评论等等
artilce可以嵌套，则内层的artilce对外层的article标签有隶属的关系。例如，一个博客文章，可以用article显示，然后一些评论可以以article的形式嵌入其中。

文章标题这是一篇文章
	评论1...
	 评论2...

section

section 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。

章节一

详细内容...

章节二

详细内容...

aside

aside 用来装载非正文类的内容。例如广告，成组的链接，侧边栏等等。

热门文章
	
	
		广告 文章标题这是一篇文章
		评论1...
		评论2...

hgroup

hgroup 标签用于对网页或区段的标题元素（h1-h6）进行组合。例如，在一个区段中你有连续的h系列的标签元素，则可以用hgroup将他们括起来。

The reality dysfunction
Space is not the only void
Dr. Strangelove
Or: How I Learned to Stop Worrying and Love the Bomb

header

header 标签定义文档的页面组合，通常是一些引导和导航信息。

this is the page Logo

this is page navigation

footer

footer 标签定义 section 或 document 的页脚。在典型情况下，该元素会包含创作者的姓名、文档的创作日期以及/或者联系信息。

 © 2012 Baidu 使用百度前必读 京ICP证000000号

nav

nav 标签定义显示导航链接不是所有的成组的超级链接都需要放在nav标签里。nav标签里应该放入一些当前页面的主要导航链接。例如在页脚显示一个站点的导航链接（如首页，服务信息页面，版权信息页面等等），就可以使用nav标签，当然，这不是必须的。

Index of all articles
Things sheeple need to wake up for today
Sheeple we have managed to wake

time

time 标签定义公历的时间（24 小时制）或日期，时间和时区偏移是可选的。该元素能够以机器可读的方式对日期和时间进行编码，这样，举例说，用户代理能够把生日提醒或排定的事件添加到用户日程表中，搜索引擎也能够生成更智能的搜索结果。

我们在每天早上9:00开始营业。

我在情人节有个约会。

mark

html5 语义化 - html5 详细教程

mark 标签定义带有记号的文本。请在需要突出显示文本时使用标签。

Do not forget to buymilktoday.

figure

figure标签规定独立的流内容（图像、图表、照片、代码等等）。figure 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。

黄浦江上的的卢浦大桥

figcaption

figcaption 标签定义 figure 元素的标题（caption）。"figcaption" 元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。

黄浦江上的的卢浦大桥

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com

免责声明：我们致力于保护作者版权，注重分享，当前被刊用文章因无法核实真实出处，未能及时与作者取得联系，或有版权异议的，请联系管理员，我们会立即处理! 部分文章是来自自研大数据AI进行生成,内容摘自(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供学习参考,不准确地方联系删除处理!邮箱：344225443@qq.com)

图片声明：本站部分配图来自网络。本站只作为美观性配图使用,无任何非法侵犯第三方意图,一切解释权归图片著作权方,本站不承担任何责任。如有恶意碰瓷者,必当奉陪到底严惩不贷!

内容声明：本文中引用的各种信息及资料（包括但不限于文字、数据、图表及超链接等）均来源于该信息及资料的相关主体（包括但不限于公司、媒体、协会等机构）的官方网站或公开发表的信息。部分内容参考包括:(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供参考使用,不准确地方联系删除处理！本站为非盈利性质站点,本着为中国教育事业出一份力,发布内容不收取任何费用也不接任何广告!)