HTML语义化的理解

1、什么是HTML语义化？

“语义化”指的是在需要更少的人类干预的情况下，能够研究和手机信息，让网页能够被机器理解，最终让人类受益。

语义化的目的就是让大家直观的认识标签（markup）和属性（attribute）的用途和作用。很明显Hx系列看起来很像标题，因为拥有粗体和较大的字号。<strong>,<em>用来区别于其他文字，起到了强调的作用。至于列表和表格很明显的告诉你他们是做什么的。

2、HTML语义化有什么好处？

语义化的网页的好处，最主要的就是对搜索引擎友好，有了良好的结构和语义你的网页内容自然容易被搜索引擎抓取，你网站的推广便可以省下不少的功夫。

语义 Web 技术有助于利用基于开放标准的技术，从数据、文档内容或应用代码中分离出意义。

3、为什么要HTML语义化？

在没有css的情况下，页面也能呈现出比较好的内容结构、代码结构。
用户体验较好：例如：label标签的活用、title、alt用于解释名词或解释图片。
方便其他设备解析（阅读器、移动设备）以意义的方式来渲染网页。
便于团队维护：语义化的HTML更具可读性，团队遵循W3C标准。
有利于SEO：和搜索引擎建立友好的交流，有利于爬虫抓取更多的有效信息。

4、HTML语义化标签

header元素

该元素是网页或者section的页眉部分，通常包含h标签，包括网站标志、全局导航、全站链接、搜索框等。

也可以包含一节的目录或者nav或者相关的logo。

一个页面可以有多个header标签。

eg、

<header><hgroup><h1>网站标题</h1><h1>网站副标题</h1></hgroup>
</header>

title元素

该元素用来简短的描述网页内容，在页面中唯一存在。

搜索引擎会将title作为判断页面主要内容的指标，有效的title应该包含几个与页面内容密切相关的关键字，建议将title核心内容放在前60个字符中。

foot元素

该元素代表网页或section的页脚，通常包含该节内容的基本信息，或者代表附录、索引、许可协议、标签类别等信息。

一个页面中可以有多个footer，可以是任何网页或section的底部。

eg、

eg、
<footer>COPYRIGHT@浮川之畔
</footer>

hgroup元素

该元素代表网页或section的标题。可以将h1到h6的标签放在里面。

注：如果只有一个h标签，就不用hgroup。

如果有多个连续的h标签就用hgroup。

eg、

eg、
<hgroup><h1>这是一篇介绍HTML 5语义化标签和更简洁的结构</h1><h2>HTML 5</h2>
</hgroup>

nav标签

该元素是页面的导航链接区域，仅对页面中重要的链接群使用。

用来定义页面的主要导航部分。

eg、

<nav><ul><li>HTML 5</li><li>CSS3</li><li>JavaScript</li></ul>
</nav>

aside元素

该元素用来指定附注栏，通常被包含在article元素中作为主要内容的附属部分，其中的内容可以是与当前文章有关的相关资料、标签、名词解释等，是特殊的section。

eg、

<article><p>内容</p><aside><h1>作者简介</h1><p>浮川之畔，新入门码农</p></aside>
</article>

main元素

该元素是页面的主体内容，一个页面只能使用一次。

article元素

该元素包含一个报纸一样的东西，代表一个在文档、页面或网站中自成一体的内容。

如果在article中再嵌套article就代表内嵌的article中的内容和外部的是有关系的。

eg、

<article><header><h1>一篇文章</h1><p><time pubdate datetime="2012-10-03">2012/10/03</time></p></header><p>文章内容..</p><article><h2>评论</h2><article><header><h3>评论者: XXX</h3><p><time pubdate datetime="2012-10-03T19:10-08:00">~1 hour ago</time></p></header><p>哈哈哈</p></article><article><header><h3>评论者: XXX</h3><p><time pubdate datetime="2012-10-03T19:10-08:00">~1 hour ago</time></p></header><p>哈？哈？哈？</p></article></article></article>

article内部还可以嵌套section

eg、

<article><h1>前端技术</h1><p>前端技术有那些</p><section><h2>CSS</h2><p>样式..</p></section><section><h2>JS</h2><p>脚本</p></section></article>

section 内部嵌套article。article是大主体，section是构成这个大主体的一部分。

eg、

<section><h1>介绍: 网站制作成员配备</h1><article><h2>设计师</h2><p>设计网页的...</p></article><article><h2>程序员</h2><p>后台写程序的..</p></article><article><h2>前端工程师</h2><p>给楼上两位打杂的..</p></article></section>

使用注意：

自身独立使用：article

HTML语义化的理解相关推荐

[html] 你对标签语义化的理解是什么？
[html] 你对标签语义化的理解是什么? 标签语义化的初衷是让正确的标签做正确的事情,但对于人来说,标签的语义除了在 tag 上体现,还可以从 id, class 上体现出来.而每个人对于标签的理解 ...
【重构前端知识体系之HTML】讲讲对HTML5的一大特性——语义化的理解
Python微信订餐小程序课程视频 https://edu.csdn.net/course/detail/36074 Python实战量化交易理财系统 https://edu.csdn.net/cou ...
html 语义化的理解
<div id="navfirst"> <ul id="menu"> <li id="h"><a ...
对 HTML 语义化的理解
对 HTML 语义化的理解去掉或者丢失样式的时候能够让页面呈现出清晰的结构有利于SEO:和搜索引擎建立良好沟通,有助于爬虫抓取更多的有效信息:爬虫依赖于标签来确定上下文和各个关键字的权重: 方便其 ...
前端进阶之说一说你对HTML5语义化的理解
作者:陈大鱼头 github: KRISACHAN 链接:github.com/YvetteLau/S- 背景:最近高级前端工程师刘小夕在 github 上开了个每个工作日布一个前端相关题的 re ...
前端面试题：HTML 语义化的理解
定义: 1 "语义化"指的是在需要更少的人类干预的情况下,能够研究pc和手机信息,让网页能够被机器理解,最终让人类受益 2 语义化是指根据内容的结构化(内容语义化),选择合适的标签 ...
表现与数据分离、web语义化的理解
2019独角兽企业重金招聘Python工程师标准>>> 表现与数据分离什么是表现与数据分离一是前后端分离,所有数据都是后端通过AJAX发送给前端,前端负责展现页面,后端负责提供数 ...
谈谈你对web语义化的理解
学术届将web语义化称为Web3.0的核心,目标是将当前的网页提升为计算机能够"理解"和处理的网页. 核心思想是标注网页对象使其对应本体中的实体,并通过逻辑等手段进行自动推理. 作 ...
html语义化的理解是什么,html5语义化,html5的语义化的理解
家里有个熊孩子,经常会有一些意想不到的事情发生:回家的时候,他会笑呵呵冲过来,大声喊着臭爸爸;你让他把鞋穿上,他会提起鞋子往楼下扔在小孩的世界里,他虽然会说话,但不一定明白其中的意思,不能正确表达;同 ...

HTML语义化的理解

HTML语义化的理解相关推荐

最新文章

热门文章