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.