3.1 标签 <main>
HTML5 引入了许多新的语义元素，这些元素帮助开发者创建更加结构化和易于理解的网页。其中，<main> 和 <aside> 标签尤其重要，用于分别创建主要内容和附加内容的容器。
标签 <main> 代表文档的主要内容。用于放置该页面独特且关键的内容。<main> 标签内的内容应为每个页面独有，并且不包含那些在所有页面中重复的元素，如徽标、侧边栏、导航链接或页脚。
语法：
HTML
<main>
<!-- 页面主要内容 -->
</main>
使用示例：
HTML
<body>
<header>
<h1>网站头部</h1>
<nav>
<ul>
<li><a href="#home">主页</a></li>
<li><a href="#about">关于</a></li>
<li><a href="#contact">联系我们</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>文章标题</h2>
<p>这是文章的主要内容。</p>
</article>
</main>
<footer>
<p>© 2024 示例网站</p>
</footer>
</body>
主要特点：
- 内容：
<main>标签应该包含页面的主要内容，该内容对页面来说是唯一的 - 位置：页面中只应有一个
<main>标签 - 可访问性：
<main>标签通过帮助辅助技术（如屏幕阅读器）更快找到主要内容来提高页面的可访问性
应用：
- 页面的主要内容
- 当前页面的独特内容
优势：
- 语义标记：帮助搜索引擎和辅助技术理解什么是页面的主要内容
- 改进页面结构：清晰地将主要内容与页面的其他部分，如标题、侧边栏和页脚分隔开
特点：
- 应包含页面独特的内容
- 不应包含其他页面中重复的元素（例如导航栏、侧边栏、页脚）
3.2 标签 <aside>
标签 <aside> 用于表示与主要内容相关的附加内容，但不属于文档的主要流。通常用于包含广告、相关文章链接、作者简介等辅助元素的侧边栏。
语法：
HTML
<aside>
<!-- 附加内容 -->
</aside>
使用示例：
HTML
<main>
<article>
<h2>文章标题</h2>
<p>这是文章的主要内容。</p>
</article>
<aside>
<h3>相关文章</h3>
<ul>
<li><a href="#related1">相关文章 1</a></li>
<li><a href="#related2">相关文章 2</a></li>
</ul>
<h3>关于作者</h3>
<p>作者的简短介绍。</p>
</aside>
</main>
主要特点：
- 内容：
<aside>标签包含与主要内容相关的额外信息，但不属于文档的主要流。 - 位置：可以根据上下文放置在
<main>标签内或外。 - 应用：用于侧边栏、广告块、相关文章链接和其他辅助信息。
应用：
- 含有更多信息的侧边栏
- 广告块
- 相关资源的链接
- 与主要内容相关的附加材料
优势：
- 语义标记：帮助搜索引擎和辅助技术理解这部分内容是相对于主要内容的辅助内容
- 改进页面结构：清晰地将辅助内容与主要内容分开，使页面更有条理，易于理解
特点：
- 包含与主要内容相关但不属于其一部分的内容
- 可用于侧边栏、广告块、订阅和其他附加材料
GO TO FULL VERSION