Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
452 views
in Technique[技术] by (71.8m points)

html - HTML5 main element versus ARIA landmark role="main"

I'm interested to learn more about the relationship, and possible distinctions, between the HTML5 <main> element, and the ARIA landmark role attribute role="main".

I'm under the impression that the purpose of the <main> element is to map the ARIA roll attribute role="main" onto a specific HTML element. But does that sum it up?

Are there benefits to using <main> over, say, <div role="main">? Or will these, for now and the foreseeable future, yield the same result?

Any insights in comparing the following examples would be greatly appreciated:

<body>
  <main>
    <p>Paragraph</p>
  <main>
</body>

<body>
  <main role="main">
    <p>Paragraph</p>
  <main>
</body>

<body>
  <div role="main">
    <p>Paragraph</p>
  <div>
</body>
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

According to HTML5 Doctor they are equivalent. <main> just makes it easier and neater to implement role="main".

The primary purpose of is to map ARIA’s landmark role main to an element in HTML.

Here is a general description of the <main> element.

The main element represents the main content of the body of a document or application. The main content area consists of content that is directly related to or expands upon the central topic of a document or central functionality of an application.

Recommendation

It is recommended to use use both <main> and role="main" in the same element until browsers implement <main> properly.

<!-- Recommended -->
<main role="main">
    ...
</main>

Be sure to read the <main> spec if you're interested.

Note on sectioning

As Szabolcs points out in the comments, <main> is not a sectioning element so it should be used in conjunction with a <section> element.

References


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...