CODEWITHSUNDEEP
htmlsemantics
aitor
aitor

Reputation: 2735

Can I use more than one "main" html tag in the same page?

For example, if I want to put h1 in a left column and content in a right column:

<div class="left-column">
 <main>
  <h1>Document Title</h1>
 </main>
</div>
<div class="right-column">
 <main>
  <p>Text content<p>
 </main>
</div>

Is it correct? Thanks!

Upvotes: 0

Views: 4971

Answers (4)

aardrian
aardrian

Reputation: 9009

The short answer is yes, you can. However, the W3C spec forbids it while the WHATWG spec allows it. As the author of the main element wrote the W3C version and is at odds with WHATWG's interpretation, I would defer there. There is also an open bug to have the WHATWG spec align with the W3C spec.

However, you SHOULD NOT as the best use of main involves supporting assistive technology (AT) (screen readers, for example). It also maps to the ARIA role of main, so it has a direct mapping expectation.

AT users have a quick way to navigate to the main element, which represents the main content of the page. If you use more than one, then those users may never see it as they do not expect there to be more than one block of main content (the WHATWG bug report bears this out as stated by AT users).

Also the HTML validator will throw an error, which may or may not be a concern.

In most cases, multiple article elements can be nested within a main to achieve the desired effect for styling hooks.

I don't have enough rep points to post more than 2 links, else I'd offer some more material.

Upvotes: 12

Lakshya
Lakshya

Reputation: 506

Here is the Alignment

<div class="left-column">
 <main>
  <h1 align="left">Document Title</h1>
 </main>
</div>
<div class="right-column">
 <main>
  <p align="right">Text content<p>
 </main>
</div>

Upvotes: -2

Reniel Ramos Salvador
Reniel Ramos Salvador

Reputation: 66

it can only be use once per page. see this link here

http://html5doctor.com/the-main-element/

For more info about why. Take a look at this one

http://lists.w3.org/Archives/Public/public-html/2013Jan/0230.html

Upvotes: 0

Wayne
Wayne

Reputation: 19

I think not - There must not be more than one <main> element in a document. The <main> element must NOT be a descendant of an <article>, <aside>, <footer>, <header>, or <nav> element.

Upvotes: 1

Related Questions