ディレクトリ 検索
Attributes accesskey (attribute) class (attribute) contenteditable (attribute) contextmenu (attribute) data-* (attribute) dir (attribute) draggable (attribute) dropzone (attribute) Global attributes hidden (attribute) id (attribute) itemid (attribute) itemprop (attribute) itemref (attribute) itemscope (attribute) itemtype (attribute) lang (attribute) slot (attribute) spellcheck (attribute) style (attribute) tabindex (attribute) title (attribute) translate (attribute) Elements a abbr address area article aside audio b base bdi bdo blockquote body br button canvas caption cite code col colgroup data datalist dd del details dfn dialog div dl dt em embed fieldset figcaption figure footer form h1 head header hr html i iframe img input input type="button" input type="checkbox" input type="color" input type="date" input type="datetime"-local input type="email" input type="file" input type="hidden" input type="image" input type="month" input type="number" input type="password" input type="radio" input type="range" input type="reset" input type="search" input type="submit" input type="tel" input type="text" input type="time" input type="url" input type="week" ins kbd label legend li link main map mark menu menuitem meta meter nav noscript object ol optgroup option output p param picture pre progress q rp rt rtc ruby s samp script section select slot small source span strong style sub summary sup table tbody td template textarea tfoot th thead time title tr track u ul var video wbr Miscellaneous Attributes Block-level elements CORS enabled image CORS settings attributes Element Inline elements Kinds of HTML content Link types Microdata Optimizing your pages for speculative parsing Preloading content Reference Supported media formats Using the application cache Obsolete acronym applet basefont big blink center command content dir element font frame frameset hgroup image input type="datetime" isindex keygen listing marquee nextid noframes plaintext strike tt xmp
テキスト

HTML Main元素(<main>)呈现了文档<body>或应用的主体部分。主要内容区域 由 和文档核心主题或应用程序中心功能直接相关与扩展的内容组成。

您可以<main>在同一页面内使用多个元素,这样做是有道理的。例如,如果您有一个页面呈现多个文章(每个文章都包含在一个<article>元素中,每个文章都包含一些额外的内容(例如用于编辑的工具栏,广告等等),那么<main>在每篇文章中包含一个元素以确定该特定文章的主要内容。

内容类别

Flow content, palpable content.

允许的内容

Flow content.

标记遗漏

没有; 起始和结束标签都是强制性的。

允许父级

任何接受流内容的元素(WHATWG)。但是,W3C规范不允许将<main>用作<article>,<aside>,<footer>,<header>或<nav>的后代。

允许ARIA角色

主要角色默认应用于<main>,并且演示角色也是允许的。

DOM界面

HTML元素

属性

这个元素只包含全局属性。

使用说明

<main>元素的内容应该对元素包含的文档或部分是唯一的。除非搜索表单是页面的主要功能,否则不应包含在一组文档或文档部分(如侧边栏,导航链接,版权信息,站点徽标和搜索表单)中重复的内容。

<main>对文件大纲没有贡献; 也就是说,不像像元素这样的<body>标题<h2><main>并不会影响DOM的页面结构的概念。这是严格的信息。

WHATWG和W3C规范之间的差异

WHATWG的现行标准(MDN规范中使用的规范)和W3C规范<main>之间的元素定义有很大不同。与上面给出的描述相比,这里是两个规格之间的差异:

  • 尽管HTML的WHATWG现行标准允许<main>在一个页面中使用多个元素,但W3C版本的规范并不包含这些元素,除非其中一个元素使用该hidden属性隐藏。

  • WHATWG规范允许<main>在任何允许流量内容的地方使用。在另一方面,HTML规范的W3C版本不允许<main>是的后裔<article><aside><footer><header>,或<nav>

这似乎是一个短小的差异,但是这个<main>元素在功能层面上是相当简单的,所以如果你不记住这些差异的话,那么这些差异的存在会产生重大的后果。

例子

<!-- other content -->
<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><!-- other content -->

规范

Specification

Status

Comment

HTML Living StandardThe definition of '<main>' in that specification.

Living Standard

Removed the restriction about using <main> multiple times in a document, or as a descendent of an <article> element.

HTML 5.1The definition of '<main>' in that specification.

Recommendation

No change from HTML5.

HTML5The definition of '<main>' in that specification.

Recommendation

Initial definition.

浏览器兼容性

The <main> element is widely supported. For Internet Explorer 11 and below, it is suggested that an ARIA role of "main" be added to the <main> element to ensure it is accessible (screen readers like JAWS, used in combination with older versions of Internet Explorer, will be able to understand the semantic meaning of the <main> element once this role attribute is included).

<main role="main">  ...</main>

Feature

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

Basic Support

26

12

21

No

16

7

Feature

Android

Chrome for Android

Edge mobile

Firefox for Android

IE mobile

Opera Android

iOS Safari

Basic Support

(Yes)

(Yes)

12

21

No

(Yes)

7.1

前の記事: 次の記事: