KADUNEW

Elemento main da HTML5

—

por

Kadu Oliveira
em

Elemento main da HTML5

O novo elemento main da HTML5 representa a seção de conteúdo principal do corpo de um documento ou aplicativo. A seção de conteúdo principal consiste de conteúdo que está diretamente relacionada ou expande-se sobre o tema central de um documento ou a funcionalidade central de um aplicativo.

Cada vez mais o elemento div deixa de ser usado para estruturar a página e sim para o desenvolvedor criar container para uma estilização mais específica no CSS.

Pontos importantes sobre o elemento main

  • Os autores não devem incluir mais do que um elemento main em um documento;
  • Os autores não devem incluir o elemento main como um filho de article, aside, footer, header ou nav;
  • Os autores são aconselhados a usar o atributo role=”main” no elemento main até que os agentes do usuário implementem esta função.

<main role="main"> 
  ... 
  </main>

Exemplo de utilização do elemento main

<!DOCTYPE html>
  <html>
  <head>
<title>Graduation Ceremony Summer 2022</title>
  </head>
  <body>

  <header>The Lawson Academy:
  <nav>
  <ul>
  <li><a href="courses.html">Courses</a></li>
  <li><a href="fees.html">Fees</a></li>
  <li><a>Graduation</a></li>
  </nav> 
  </header>


<main>


  <h1>Graduation</h1>

  <nav>
  <ul>
  <li><a href="#ceremony">Ceremony</a></li>
  <li><a href="#graduates">Graduates</a></li>
  <li><a href="#awards">Awards</a></li>
  </nav>

  <H2 id="ceremony">Ceremony</H2>
  <p>Opening Procession</p>
  <p>Speech by Valedictorian</p>
  <p>Speech by Class President</p>
  <p>Presentation of Diplomas</p>
  <p>Closing Speech by Headmaster</p>

  <h2 id="graduates">Graduates</h2>
  <ul>
  <li>Eileen Williams</li>
  <li>Andy Maseyk</li>
  <li>Blanca Sainz Garcia</li>
  <li>Clara Faulkner</li>
  <li>Gez Lemon</li>
  <li>Eloisa Faulkner</li>
  </ul>

  <h2 id="awards">Awards</h2>
  <ul><li>Clara Faulkner</li>
  <li>Eloisa Faulkner</li>
  <li>Blanca Sainz Garcia</li>
  </ul>

  </main>

  <footer> Copyright 2012 B.lawson</footer>

  </body>
  </html>

Esse elemento promete melhorar o famoso “pular para o conteúdo”, aquele link que pula o menu de navegação. o maior apoiador do elemento é o Steve Faukner, uma grande autoridade mundial no quesito acessibilidade.

Link oficial do conteúdo no WC

Siga-me no Twitter: @kadunew ou assine nosso Feed e fique por dentro de todas atualizações aqui do blog.

LinkedIn0
Google+0