HTML 语义化标签

一、什么是HTML语义化标签

语义化的标签，旨在让标签有自己的含义。

二、语义化标签的优点

• 代码结构: 使页面没有css的情况下，也能够呈现出很好的内容结构
• 有利于SEO: 爬虫依赖标签来确定关键字的权重，因此可以和搜索引擎建立良好的沟通，帮助爬虫抓取更多的有效信息
• 便于团队开发和维护: 提高代码可读性，让其他开发人员更加理解你的html结构。

三、常用的语义元素

<header>元素
用于定义页面的介绍展示区域，通常包括网站logo、主导航、全站链接以及搜索框。也适合对页面内部一组介绍性或导航性内容进行标记。

<nav>元素
定义页面的导航链接部分区域，不是所有的链接都需要包含在<nav>中，除了页脚再次显示顶级全局导航、或者包含招聘信息等重要链接。

<main>元素
定义页面的主要内容，一个页面只能使用一次。如果是web应用，则包围其主要功能。

<article>元素
定义页面独立的内容，它可以有自己的header、footer、sections等，专注于单个主题的博客文章，报纸文章或网页文章。article可以嵌套article，只要里面的article与外面的是部分与整体的关系。

<section>元素
元素用于标记文档的各个部分，例如长表单文章的章节或主要部分。

<aside>元素
定义与主要内容相关的内容块。通常显示为侧边栏。

<footer>元素
定义文档的底部区域，通常包含文档的作者，著作权信息，链接的使用条款，联系信息等。