前端-语义化标签

一、HTML5页面结构

为了让文档结构更加清晰，HTML5增加了<header>、<nav>、<article>、<section>、<aside>和<footer>等标签作为区块元素。

二、语义化作用

1.使用html语义化，能使页面结构更加清晰，便于解析。
2.有利于SEO。搜索引擎爬虫依赖于html标签来确定上下文和关键字权重。
3.在没有css样式的的情况下，页面也能正确清晰的呈现。
4.有利于各种设备解析，如盲人阅读器。
5.有利于团队开发与维护，使页面更具可读性。

三、语义化标签

1.<header>：用于定义文章的页眉信息。
2.<nav>：用于定义页面中的各种导航。在一个页面中可以有多个<nav>标签。常见的导航有顶部导航、侧边栏导航、页内导航等。
3.<article>：用于表示文档、页面的内容。该内容可以是一篇文章、一篇短文、一个帖子或一个评论等。
4.<section>：用于对文章内容进行分块。
5.<aside>：用于定义当前页面或当前文章的附属信息。比如广告、侧边栏、当前文章或页面的引用。
6.<footer>：用户定义脚注部分。包括文章的版权信息、做着授权等信息。

注意：
article是作为一个整体而存在；而section是作为整体的某一个部分存在的，且section在有标题和内容时使用；div是没有意义的，当某个内容需要使用样式情况下使用div。

四、举例说明

五、语义化标签常见写法

<!-- header -->
<header></header>
<!-- header end-->

<!--nav-->
<nav></nav>
<!--nav end-->

<!-- main -->
<main>
    <article>
        <section>
            <h2></h2>
            <div></div>
        </section>
        <section>
            <h2></h2>
            <div></div>
        </section>
        <section>
            <h2></h2>
            <div></div>
        </section>
    </article>
</main>
<!-- main end-->

<!-- footer -->
<footer></footer>
<!-- footer end-->