HTML5-语义化

2020-04-30

什么是语义化？就是用合理、正确的标签来展示内容，比如h1~h6定义标题。

avatar


在一个文档中，您可以定义多个```<header>```元素，但需要注意的是```<header>```元素不能作为```<address>```、```<footer>``` 或 ```<header>``` 元素的子元素。

2. ```<nav>


在一个文档中，可定义多个```<nav>```元素。

3. ```<main>

定义文档的主要内容，该内容在文档中应当是独一无二的，不包含任何在文档中重复的内容，比如侧边栏，导航栏链接，版权信息，网站logo，搜索框（除非搜索框作为文档的主要功能）。


需要注意的是在一个文档中不能出现多个```<main>```标签。

4. ```<article>


当```<article>```元素嵌套使用时，则该元素代表与外层元素有关的文章。例如，代表博客评论的```<article>```元素可嵌套在代表博客文章的```<article>```元素中。

5. ```<aside>

元素表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分且可以被单独的拆分出来而不会影响整体。通常表现为侧边栏或嵌入内容。

1 2	6. ```<footer>


使用footer插入联系信息时，应在 footer 元素内使用 ```<address>``` 元素。

注意不能包含```<footer>```或者```<header>

<section>表示文档中的一个区域（或节），比如，内容中的一个专题组。

如果元素内容可以分为几个部分的话，应该使用 <article> 而不是 <section>。
不要把 <section> 元素作为一个普通的容器来使用，特别是当<section>仅仅是为了美化样式或方便脚本使用的时候，应使用<div>。

这几个标签，比较容易混淆的是<section>、<article>，所以这里特别说明：

“Authors are encouraged to use the article element instead of the section element when it would make sense to syndicate the contents of the elemen.”

通俗来说就是<article>比<section>更具有独立性、完整性。可通过该段内容脱离了所在的语境，是否完整、独立来判断。

非商用，侵删，转自: http://www.daqianduan.com/6549.html