A tag MAIN

A tag MAIN é uma tag “nova” (lançada em 2013), pouco utilizada e pouco conhecida pela maioria dos front-ends. Assim como as outras novas tags do HTML5 (header, nav, footer, aside, article) sua função semântica é importante.

A tag <main> define o conteúdo principal da página ou da aplicação.

Dentro desta tag deve ser colocado o conteúdo mais importante da página. Só deve existir uma tag <main> por página, por motivos óbvios.

Sua semântica define que esta tag não pode ser filha de nenhuma das tags a seguir:

• aside;
• article;
• footer;
• header;
• nav.

A tag <main> não tem padding, border, margin ou qualquer outro valor padrão, por não ser um elemento de seção de conteúdo.

Para facilitar para ledores, e user agents, é importante que você coloque o ARIA role=”main”.

Um exemplo:

<main role="main">

<p>Conteúdo Principal da Página</p>

</main>

Atualmente o suporte dos browsers é o seguinte:

Mesmo o Internet Explorer não dando suporte ainda, é interessante que você utilize esta tag, pois este elemento não provoca nenhuma alteração no layout.

[atualizando] Depois de debates no Facebook e alguns testes, apesar de nativamente o IE realmente não reconhecer a tag, se você colocar no seu CSS um display: block ele funciona, para IE 9 e superiores. Para as versões anteriores você vai precisar usar JavaScript,

<script>document.createElement('main');</script>

para criar o elemento manutalmente, ou usar o Modernizr, que com certeza será assunto de outro post. [/atualizando]

Se quiser conferir, aqui está a documentação oficial.