0

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!

aitor
  • 2,281
  • 3
  • 22
  • 44

4 Answers4

12

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.

aardrian
  • 8,581
  • 30
  • 40
1

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.

Wayne
  • 19
  • 2
0

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

Reniel Ramos Salvador
  • 66
  • 6
-2

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>
Lakshya
  • 506
  • 1
  • 4
  • 20
  • This is the exact situation I am in (six years later). I have a layout of a folder with two sides and both contain the main content. When it goes to a smaller device, the pages stack to form one central column. I guess that I am just going to have to use two main tags and hope for the best. – Murray Chapman Jul 15 '22 at 02:26