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

Question

Welcome To Ask or Share your Answers For Others

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

asked Oct 24, 2021 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

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Answer

深蓝 · Answer 1 · 2021-10-23T19:02:53+0000

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.

Categories

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

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

Please log in or register to add a comment.

Please log in or register to answer this question.

1 Answer

Recommendation

Note on sectioning

References

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags