使用<main>标签能提升可访问性和SEO，因其明确标识页面核心内容，帮助屏幕阅读器用户快速定位，并让搜索引擎更好理解页面主题；<main>应只包含直接相关的内容且通常一个页面仅使用一次，区别于无语义的<div>标签，<main>自带语义化优势，兼容性方面可通过HTML5 Shiv/Shim脚本支持旧版浏览器。
HTML中设置主要内容通常使用
<main>标签。它明确地定义了页面的核心内容，有助于提升可访问性和SEO。
<main>标签用于指定文档的主要内容。
为什么应该使用 <main>
标签？
使用
<main>标签不仅仅是遵循语义化的最佳实践，它还直接影响到页面的可访问性和搜索引擎优化。对于屏幕阅读器用户来说，
<main>标签能够快速定位到页面的核心内容，避免了不必要的导航困扰。搜索引擎也会利用这个标签来更好地理解页面的主题，从而提升搜索排名。
<main>
标签的正确用法
<main>标签应该只包含与页面主题直接相关的内容。这意味着，像导航栏、页脚、侧边栏等重复性内容不应包含在
<main>标签内。一个页面通常只应该有一个
<main>标签，但如果页面包含多个独立的区域（例如，一个博客页面包含文章列表和一个单独的文章），则可以使用
role="main"属性来辅助区分主要内容区域。
立即学习“前端免费学习笔记（深入）”；
例如：
<body>
<header>
<!-- 头部内容 -->
</header>
<nav>
<!-- 导航栏 -->
</nav>
<main>
<h1>文章标题</h1>
<p>文章内容...</p>
</main>
<footer>
<!-- 页脚 -->
</footer>
</body><main>
标签与 <div>
标签的区别是什么？
你可能会问，为什么不直接用
<div>标签来包裹主要内容呢？技术上，
<div>标签可以实现同样的效果，但它缺乏语义化的信息。
<main>标签明确地告诉浏览器和搜索引擎，这部分内容是页面的核心。使用
<div>标签需要添加额外的
role="main"属性才能达到类似的效果，但语义清晰度不如直接使用
<main>标签。
<div role="main"> <h1>文章标题</h1> <p>文章内容...</p> </div>
虽然上述代码在功能上与使用
<main>标签相似，但
<main>标签更加简洁和直观。
如何处理 <main>
标签的兼容性问题？
尽管现代浏览器都支持
<main>标签，但为了兼容旧版本的浏览器，可以考虑使用 HTML5 Shiv/Shim 脚本。这个脚本能够让旧版本的浏览器识别并正确渲染 HTML5 的语义化标签，包括
<main>标签。
引入 HTML5 Shiv/Shim 的方法通常是在
<head>标签内添加以下代码：
<!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <![endif]-->
这段代码的作用是，只有当浏览器是 IE9 以下的版本时，才会加载 HTML5 Shiv/Shim 脚本。这样可以避免在现代浏览器上加载不必要的脚本，提高页面加载速度。
