HTML main 标签

🌙
手机阅读
本文目录结构
axihe

HTML <main> 标签功能

HTML <main> 元素呈现了文档的 <body> 或应用的主体部分。

主体部分由与文档直接相关,或者扩展于文档的中心主题、应用的主要功能部分的内容组成。

使用说明

在文档中,<main> 元素的内容应当是独一无二的。任何同时存在于任意一系列文档中的相同、重复内容,比如侧边栏、导航栏链接、版权信息、网站 Logo,搜索框(除非搜索框为文档的主要功能),都不应当被包含在其内。

<main> 对文档的大纲(outline)没有贡献;也就是说,它与诸如 <body> 之类的元素,诸如 <h2> 之类的标题等不同,<main> 不会影响 DOM 的页面结构概念。

它仅有提供信息的作用。(原文:It’s strictly informative.)

示例

<!-- 其他内容 -->
<main>
  <h1>Apples</h1>
  <p>The apple is the pomaceous fruit of the apple tree.</p>
  
  <article>
    <h2>Red Delicious</h2>
    <p>These bright red apples are the most common found in many
    supermarkets.</p>
    <p>... </p>
    <p>... </p>
  </article>

  <article>
    <h2>Granny Smith</h2>
    <p>These juicy, green apples make a great filling for
    apple pies.</p>
    <p>... </p>
    <p>... </p>
  </article>
</main>
<!-- 其他内容 -->

可访问性相关

界标 Landmark

<main>元素的行为就像一个main地标性角色。辅助技术可以使用地标来快速识别和导航到文档的大部分。除非<main>声明role=“main”有旧版浏览器支持问题,否则最好使用元素声明。

直达内容 Skip navigation

跳过导航,也称为“ skipnav”,是一种允许辅助技术用户快速绕过大部分重复内容(主导航,信息标语等)的技术。这使用户可以更快地访问页面的主要内容。

在元素上添加id属性 <main> 可以使其成为跳过导航链接的目标。

<body>
  <a href="#main-content">Skip to main content</a>

  <!-- navigation and header content -->

  <main id="main-content">
    <!-- main page content -->
  </main>
</body>

阅读器模式 Reader mode

将内容转换为专门的阅读器视图时main,浏览器阅读器模式功能将查找该元素的存在以及标题和内容分段元素。

全局属性

<main> 标签支持 HTML 全局属性

事件属性

<main> 标签支持 HTML 事件属性


AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili 和抖音。

关注我: Github / 知乎

如果你加我的私人微信,麻烦写上您的 称呼,所在地区,职业,方便我备注,谢谢


本站的微信公众号

阿西河前端教程

Anbang

安邦的私人微信

微信号: yaolushan

Anbang

Bilibili(B站)

朱安邦

Anbang