Should the header and footer tags be inside the main tag

Question

I'm using the main tag - should I put my header and footer tags inside the main tag or should they be separate?

Also, does the main tag need role="main"?

Answer 1

From HTML5doctor article The main element @Gaby aka G. Petrioli

tl;dr

Rule of thumb :

• only one <main> per page ;
• top-level element (in most cases) ;
• don't put your site's header/menu/footer (repeated content) in your <main>.
• can hold article header/footer if specific.

Purpose

The primary purpose of <main> is to map ARIA’s landmark role main** to an element in HTML. This will help screen readers and other assistive technologies understand where the main content begins. The W3C spec describes as representing:

Specs says

Here is what the draft spec says:

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.

Header/footer

Exclude site's header/footer/menu:

excludes content that is repeated across a set of documents such as site navigation links, copyright information, site logos and banners and search forms (unless the document or applications main function is that of a search form).

Continue to use role='main'

But as a side note to this article Steve Faulkner write:

You should still use the ARIA role until all browsers map the role to the <main> element.

Answer 2

Since it represents the central part of your page - the "beef" if you want - and headers and footers are considered adjacent content, I would argue that headers and footers should not be child elements.

In theory, yes, using <main> does mean the same as adding role="main". But as it has limited support at the moment, using <main role="main"> is recommended.