Tableless

Busca Menu

A tag MAIN

Seja o primeiro a comentar por

E finalmente, depois muita discussão, a nova tag <main> do HTML foi lançada. A discussão envolvia o real motivo de ter ou não uma nova tag para definir o conteúdo principal do documento. O Ian Hickson – mestre dos mestres do HTML – era contra essa nova tag. Aqui tem uma entrevista com ele, muito interessante, onde há uma parte que ele explica o motivo de não querer essa nova tag.

A tag MAIN tem uma única função semântica: definir o conteúdo principal da página ou da aplicação. Ele representa o conteúdo mais importante da página, que está diretamente relacionado ao tópico central do documento ou a funcionalidade principal de uma aplicação.

The main element represents the main content section of the body of a document or application. The main content section consists of content that is directly related to or expands upon the central topic of a document or central functionality of an application.

Por exemplo:

<main>

  <h1>Skateboards</h1>
  <p>The skateboard is the way cool kids get around</p>
  
  <article>
  <h2>Longboards</h2>
  <p>Longboards are a type of skateboard with a longer 
  wheelbase and larger, softer wheels.</p>
  <p>... </p>
  <p>... </p>

  <h2>Electric Skateboards</h2>
  <p>These no longer require the propelling of the skateboard
  by means of the feet; rather an electric motor propels the board, 
  fed by an electric battery.</p>
  <p>... </p>
  <p>... </p>
  </article>

</main>

O MAIN não pode ser filho de elementos como aside, article, footer, header ou nav. A tag MAIN não é um elemento de seção de conteúdo e ele não afeta o fluxo do documento. Ou seja, ele não tem margin, padding, borda ou qualquer outro valor padrão.

É muito recomendado que utilizemos o ARIA role=”main” para que usar agents implementem esse mapeamento.

Um detalhe importante: você não pode colocar mais do que UMA tag main no seu documento. Claro, por motivos óbvios.

Já vale a pena usar

Já. Embora nenhum navegador ainda tenha suporte oficial, o elemento não provoca nenhum problema no layout. Então eu aconselho atualizar seu código assim que puder. Quando os browsers suportarem, seu código já estará atualizado. Outra motivo é a adesão.

Se acontecer alguma coisa e a galera voltar atrás, é simples de arracar o elemento de lá. Sem chororo. 😉

Link para a documentação oficial.

Publicado no dia