html5 语义化
版本:HTML5
语义化的标签,旨在让标签有自己的含义。HTML5赋予网页更好的意义和结构。HTML结构语义化,是最近几年才提出来的,开发者们和官方提出了让HTML结构语义化的概念,并且w3c也在HTML5给出了几个新的语义化的标签。
<p>一行文字</p> <span>一行文字</span>
如上代码,p
标签与span
标签都区别之一就是,p
标签的含义是:段落。而span
标签责没有独特的含义。
语义化之后文档会有什么效果呢?就是你写的HTML结构,是用相对应的有一定语义的英文字母(标签)表示的,标记的,因为HTML本身就是标记语言。不仅对自己来说,容易阅读,书写。别人看你的代码和结构也容易理解,甚至对一些不是做网页开发的人来说,也容易阅读。
怎么知道自己的页面结构是否语义化,那就要看HTML布局结构,在去掉CSS样式表之后,是否,依然能很好的呈现内容的代码结构。也就是说,去掉CSS的装饰之后,整个HTML的结构阅读起来依旧主次分明,能够看清其整体的架构模块。这也就是,语义化之后我们想要HTML文档达到的效果。
其实语义化,也无非就是自己在使用标签的时候在合适的场景下选取合适的标签,比如h1~h5系列标签,在HTML中就是就是用来定义标题;而p标签,大部分情况下用以处理文字段落,table表格则适合做信息表格,等等。
<header></header> 头部 <nav></nav> 导航栏 <section></section> 区块(有语义化的div) <main></main> 主要区域 <artical></artical> 主要内容 <aside></aside> 侧边栏 <footer></footer> 底部
我们对整个HTML结构进行语义化的规范操作有如下几个好处:
- 这样有利于SEO:和搜索引擎建立良好沟通,有助于爬虫抓取更多的有效信息:爬虫依赖于标签来确定上下文和各个关键字的权重;
- 方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以有意义的方式来渲染网页;
- 便于团队开发和维护,语义化更具可读性,遵循W3C标准的团队都遵循这个标准,可以减少差异化。
HTML5中新增的语义化标签进一步加强了我们针对整个HTML结构进行语义化跟进的可操作性,使得我们网页布局的可阅读性更高。
<title> | 页面主体内容。 |
<hn> | h1~h6,分级标题,<h1> 与 <title> 协调有利于搜索引擎优化。 |
<ul> | 无序列表。 |
<li> | 有序列表。 |
<header> | 页眉通常包括网站标志、主导航、全站链接以及搜索框。 |
<nav> | 标记导航,仅对文档中重要的链接群使用。 |
<main> | 页面主要内容,一个页面只能使用一次。如果是web应用,则包围其主要功能。 |
<article> | 定义外部的内容,其中的内容独立于文档的其余部分。 |
<section> | 定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。 |
<aside> | 定义其所处内容之外的内容。如侧栏、文章的一组链接、广告、友情链接、相关产品列表等。 |
<footer> | 页脚,只有当父级是body时,才是整个页面的页脚。 |
<small> | 呈现小号字体效果,指定细则,输入免责声明、注解、署名、版权。 |
<strong> | 和 em 标签一样,用于强调文本,但它强调的程度更强一些。 |
<em> | 将其中的文本表示为强调的内容,表现为斜体。 |
<mark> | 使用黄色突出显示部分文本。 |
<figure> | 规定独立的流内容(图像、图表、照片、代码等等)(默认有40px左右margin)。 |
<figcaption> | 定义 figure 元素的标题,应该被置于 figure 元素的第一个或最后一个子元素的位置。 |
<cite> | 表示所包含的文本对某个参考文献的引用,比如书籍或者杂志的标题。 |
<blockquoto> | 定义块引用,块引用拥有它们自己的空间。 |
<q> | 短的引述(跨浏览器问题,尽量避免使用)。 |
<time> | datetime属性遵循特定格式,如果忽略此属性,文本内容必须是合法的日期或者时间格式。 |
<abbr> | 简称或缩写。 |
<dfn> | 定义术语元素,与定义必须紧挨着,可以在描述列表dl元素中使用。 |
<address> | 作者、相关人士或组织的联系信息(电子邮件地址、指向联系信息页的链接)。 |
<del> | 移除的内容。 |
<ins> | 添加的内容。 |
<code> | 标记代码。 |
<meter> | 定义已知范围或分数值内的标量测量。(Internet Explorer 不支持 meter 标签) |
<progress> | 定义运行中的进度(进程)。 |
article
- article标签装载显示一个独立的文章内容。例如一篇完整的论坛帖子,一则网站新闻,一篇博客文章等等,一个用户评论等等
- artilce可以嵌套,则内层的artilce对外层的article标签有隶属的关系。例如,一个博客文章,可以用article显示,然后一些评论可以以article的形式嵌入其中。
<article> <h1>文章标题</h1> 这是一篇文章 <article>评论1...</article> <article>评论2...</article> </article>
section
section 标签定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。
<body> <section> <h1>章节一</h1> <p>详细内容...</p> </section> <section> <h1>章节二</h1> <p>详细内容...</p> </section> </body>
aside
aside 用来装载非正文类的内容。例如广告,成组的链接,侧边栏等等。
<body> <aside> 热门文章 </aside> <aside> 广告 </aside> <article> <h1>文章标题</h1> 这是一篇文章 <article>评论1...</article> <article>评论2...</article> </article> </body>
hgroup
hgroup 标签用于对网页或区段的标题元素(h1-h6)进行组合。例如,在一个区段中你有连续的h系列的标签元素,则可以用hgroup将他们括起来。
<hgroup> <h1>The reality dysfunction</h1> <h2>Space is not the only void</h2> </hgroup> <hgroup> <h1>Dr. Strangelove</h1> <h2>Or: How I Learned to Stop Worrying and Love the Bomb</h2> </hgroup>
header
header 标签定义文档的页面组合,通常是一些引导和导航信息。
<header> <p>this is the page Logo</p> <nav>this is page navigation</nav> </header>
footer
footer 标签定义 section 或 document 的页脚。在典型情况下,该元素会包含创作者的姓名、文档的创作日期以及/或者联系信息。
<footer> © 2012 Baidu 使用百度前必读 京ICP证000000号 </footer>
nav
nav 标签定义显示导航链接不是所有的成组的超级链接都需要放在nav标签里。nav标签里应该放入一些当前页面的主要导航链接。例如在页脚显示一个站点的导航链接(如首页,服务信息页面,版权信息页面等等),就可以使用nav标签,当然,这不是必须的。
<nav> <ul> <li><a href="articles">Index of all articles</a></li> <li><a href="today">Things sheeple need to wake up for today</a></li> <li><a href="successes">Sheeple we have managed to wake</a></li> </ul> </nav>
time
time 标签定义公历的时间(24 小时制)或日期,时间和时区偏移是可选的。该元素能够以机器可读的方式对日期和时间进行编码,这样,举例说,用户代理能够把生日提醒或排定的事件添加到用户日程表中,搜索引擎也能够生成更智能的搜索结果。
<p>我们在每天早上<time>9:00</time>
开始营业。</p> <p>我在<time datetime="2020-02-14">情人节</time>
有个约会。</p>
mark
mark 标签定义带有记号的文本。请在需要突出显示文本时使用 <mark> 标签。
<p>Do not forget to buy<mark>milk</mark>
today.</p>
figure
figure标签规定独立的流内容(图像、图表、照片、代码等等)。figure 元素的内容应该与主内容相关,但如果被删除,则不应对文档流产生影响。
<p>黄浦江上的的卢浦大桥</p> <figure> <img src="shanghai_lupu_bridge.jpg" width="350" height="234" /> </figure>
figcaption
figcaption 标签定义 figure 元素的标题(caption)。"figcaption" 元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。
<figure> <figcaption>黄浦江上的的卢浦大桥</figcaption> <img src="shanghai_lupu_bridge.jpg" width="350" height="234" /> </figure>