【面试题】如何理解HTML语义化？

1. HTML语义化

在HTML5之前，通常使用<div>标签表示页面不同的模块，但是<div>标签本身没有语义。HTML5中加入了一些语义化标签，能够清晰地描述页面的结构和含义。

2. 语义化标签

标签名	解释
<header>	头部标签，表示页面或页面内某个区域的头部，通常包含网站或页面的标志、导航栏、搜索框等
<nav>	导航栏标签，表示页面或页面内某个区域的导航栏，通常包含指向不同部分或页面的链接
<main>	主要内容标签，表示页面或页面内某个区域的主要内容，通常包含页面的核心内容
<article>	文章标签，表示页面或页面内某个区域的独立内容块，通常包含一篇文章、一组博客帖子、一条新闻报道等
<section>	文章中的章节，表示页面或页面内某个区域的章节，通常包含一组与文字相关的内容
<aside>	侧边栏标签，表示页面或页面内某个区域的侧边栏，通常包含与主要内容相关但不是核心的信息
<footer>	页脚标签，表示页面或页面内某个区域的页脚，通常包含版权信息、联系方式等
<h1>—<h6>	标题标签，表示页面或页面内某个区域的标题，<h1>是最高级别的标题，而<h6>是最低级别的标题
<p>	段落标签，表示段落，通常用于包含一段文字
<ul>和<ol>	列表标签，分别表示无序列表和有序列表，通常用于展示一组相关的项目

3. 语义化的优点

• 可以让HTML代码更具有可读性、可访问性和可维护性（让人更容易读懂）。
• 能够使搜索引擎更好地理解页面内容，从而提高搜索引擎优化(SEO)的效果（让浏览器更容易读懂）。