HTML5 语义化标签

时间 2019-11-10

标签 html5 html 语义标签栏目 HTML5 繁體版

原文原文链接

为何会有h5 语义化标签

在HTML5出现以前，咱们通常采用DIV+CSS布局页面。可是这样的布局方式不只使咱们的文档结构不够清晰，并且不利于搜索引擎爬虫对咱们页面的爬取。为了解决上述缺点，HTML5新增了不少新的语义化标签。css

语义标签的概念

维基百科

语义化是前端开发里面的一个专用术语，其优势在于标签语义化有助于构架良好的html结构，有利于搜索引擎的创建索引、抓取；另外，亦有利于页面在不一样的设备上显示尽量相同；此外，亦有利于构建清晰的机构，有利于团队的开发、维护。html

通俗来讲：语义化的意思是从名称一眼就能看出其内容和做用是什么，语义化标签就是经过使用浅显易懂的元素名和属性名来实现语义化的前端

语义标签有什么用？

能够提升页面的可访问性，即在css丢失的状况下，页面结构仍然能够比较清晰的展示；
提升用户体验，用户不够清楚地方能够获得良好的解释；
有利于页面seo，让搜索引擎更容易明白页面结构和内容的主次顺序；
有利于页面维护者理解代码结构，下降维护成本；
方便其余设备解析（如屏幕阅读器、盲人阅读器、移动设备）以语义的方式来渲染网页

经常使用语义标签有哪些？

h1到h6标签表示不一样等级的标题

能够用来表现文本内容的层级结构

`<article>` 元素表示文档、页面、应用或网站中的独立结构，其意在成为可独立分配的或可复用的结构

<article> 能够嵌套使用，可是他们必须是部分与总体的关系
<article> 元素的做者信息可经过 <address> 元素提供，可是不适用于嵌套的 <article> 元素
<article> 元素的发布日期和时间可经过 <time> 元素的pubdate属性表示

<aside>定义侧栏标签

若是使用多个 <aside>，标签应该在主要内容的后面，这样有利于SEO的搜索与提高可访问性
若是是与文章的主要内容有关系的图像须要用 <figure> 标签代替

`<section>` 元素表示文档中的一个区域（或节），好比，内容中的一个专题组，通常来讲会有包含一个标题（heading）

若是元素内容能够分为几个部分的话，应该使用 <article> 而不是 <section>
不要把 <section> 元素做为一个普通的容器来使用。通常来讲，一个 <section> 应该出如今文档大纲中

`<header>` 元素用来表示一些前言性质或导航类的内容。它能够包含一些标题性质元素，也能够放置一些好比logo，搜索框，或其它的 `<header>` 元素等

<header> 元素并非一个能够造成段落内容的元素，因此，不须要在内容目录里体现出来

`<footer>` 元素表示最近一个章节内容或者根节点（sectioning root）元素的页脚。一个页脚一般包含该章节做者、版权数据或者与文档相关的连接等信息

<footer> 元素内的做者信息应包含在 <address> 元素中
<footer> 元素不是章节内容，所以在outline中不能包含新的章节

`<nav>` 描绘一个含有多个超连接的区域，这个区域包含转到其余页面，或者页面内部其余部分的连接列表

并非全部的连接都必须使用 <nav> 元素,它只用来将一些热门的连接放入导航栏
一个网页也可能含有多个 <nav> 元素,例如一个是网站内的导航列表,另外一个是本页面内的导航列表
对于屏幕阅读障碍的人,可使用这个元素来肯定是否忽略初始内容

`<dl>,<dt>,<dd>` (自定义列表)

dl: 英文意思为definition list，做用是定义列表
dt: 英文意思为defines terms，做用是定义列表中的项目
dd: 英文意思为defines description，做用是定义列表中项目的注释

`<b>/<strong>` 元素默认均展现为加粗

<b> 表示“文体突出”文字，通俗讲就是突出不安分的文字。像概要中的关键字，产品名。或者表明强调的排版方式
<strong> 表示重程度的强调

`<i>/<em>` 元素默认均展现为斜体

<i> 表现为在文章中突出不一样意见或语气或的一段文本,例如外语，科技术语、或者是排版用的斜体文字
<em> 表示强调

`<mark>`用来突出显示文本，他的效果就像是用荧光笔给重点的语句作标同样

`<address>` 元素可让做者为它最近的 `<article>` 或者 `<body>` 祖先元素提供联系信息。在后一种状况下，它应用于整个文档

当表示一个和联系信息无关的任意的地址时，应使用 <p> 元素
这个元素不能包含除了联系信息以外的任何信息，好比出版日期
一般，<address> 元素能够放在当前section的 <footer> 元素中，若是存在的话

`<figure>` 这个元素是用来引入图表、图形、照片等，对应的场景就是像是杂志中的图片同样

<figure> 元素能够包含多个内容块，可是只能有一个 <figcaption>（能够理解成给图表加标题）标签
能够用 <h1> ~ <h6> 来给 <figure> 增长标题；
<figcaption> 不能单独出现，须要有配套的内容一块儿出现

`<time>` 能够经过这个标签标记一个具体的时间或日期，应用场景一般就是一篇文章的发表时间

datetime中的时间最好与 <time> 标签中的文本元素日期同样，写法能够不同
若是这个时间是表明整个文章或是页面的时间须要添加pubdate属性
不要在 <time> 标签中使用不确切的时间如：“今天中午”、“上周末”
若是使用pubdate属性须要注意的是要在同一个父标签下面不要出现张冠李戴的问题
<time> 标签不能在嵌套另外一个 <time> 标签
datatime中的时间格式须要是标准的机器可能的时间如:YYYY-MM-DDThh:mm:ss

注意

尽量少的使用无语义的标签div和span
在语义不明显时，既可使用div或者p时，尽可能用p，由于p在默认状况下有上下间距，对兼容特殊终端有利
使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和通常单元格要区分开，表头用th，单元格用td
表单域要用fieldset标签包起来，并用legend标签说明表单的用途
每一个input标签对应的说明文本都须要使用label标签，而且经过为input设置id属性，在lable标签中设置for=someld来让说明文本和相对应的input关联起来

HTML5 语义化标签

为何会有h5 语义化标签

语义标签的概念

维基百科

语义标签有什么用？

经常使用语义标签有哪些？

h1到h6标签 表示不一样等级的标题

<article> 元素表示文档、页面、应用或网站中的独立结构，其意在成为可独立分配的或可复用的结构

<aside>定义侧栏标签

<section> 元素表示文档中的一个区域（或节），好比，内容中的一个专题组，通常来讲会有包含一个标题（heading）

<header> 元素用来表示一些前言性质或导航类的内容。它能够包含一些标题性质元素，也能够放置一些好比logo，搜索框，或其它的 <header> 元素等

<footer> 元素表示最近一个章节内容或者根节点（sectioning root）元素的页脚。一个页脚一般包含该章节做者、版权数据或者与文档相关的连接等信息

<nav> 描绘一个含有多个超连接的区域，这个区域包含转到其余页面，或者页面内部其余部分的连接列表

<dl>,<dt>,<dd> (自定义列表)

<b>/<strong> 元素默认均展现为加粗

<i>/<em> 元素默认均展现为斜体

<mark>用来突出显示文本，他的效果就像是用荧光笔给重点的语句作标同样

<address> 元素可让做者为它最近的 <article> 或者 <body> 祖先元素提供联系信息。在后一种状况下，它应用于整个文档

<figure> 这个元素是用来引入图表、图形、照片等，对应的场景就是像是杂志中的图片同样

<time> 能够经过这个标签标记一个具体的时间或日期，应用场景一般就是一篇文章的发表时间

注意