HTML语义化

HTML语义化的概念

语义是指对一个词或者句子含义的正确解释，很多HTML标签是具有语义的。例如当<h1>标签被浏览器解析时浏览器将标签解释为包含这一块内容的最重要的标题，h1的语义就是用来表示特定网页或者部分最重要的标题。

语义化的重要性

1.语义化有助于清晰的代码结构，即使在无CSS情况下也能良好呈现内容。

2.有利于SEO，帮助爬虫识别页面内容，提升网站在搜索引擎中的排名。

3.提升用户体验，通过title alt等属性解释名称或图片信息。

4.便于团队开发和维护，以及其他设备解析网页。

HTML中常用的语义化元素

<header>      <!--：页眉通常包括网站标志、主导航、全站链接以及搜索框。-->
<nav>           <!--：标记导航，仅对文档中重要的链接群使用。-->
<main>         <!--：页面主要内容，一个页面只能使用一次。-->
<article>       <!--：定义外部的内容，其中的内容独立于文档的其余部分。-->
<section>     <!--：定义文档中的节。比如章节、页眉、页脚或文档中的其他部分。-->
<aside>        <!--：定义其所处内容之外的内容。如侧栏、文章链接、广告、相关产品列表等。-->
<footer>        <!--：页脚，只有当父级是body时，才是整个页面的页脚。--> 

<title>           <!--：页面主体内容。-->

<ul>              <!--：无序列表。-->
<li>               <!--：有序列表。-->

<strong>       <!--：和 em 标签一样，用于强调文本，但它强调的程度更强一些。-->
<em>            <!--：将其中的文本表示为强调的内容，表现为斜体。-->