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. 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:

main02

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,

document.createElement('main');

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.

Anúncios

Um comentário sobre “A tag MAIN

Deixe sua opinião

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s