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
mainem um documento; - Os autores não devem incluir o elemento main como um filho de
article,aside,footer,headerounav; - Os autores são aconselhados a usar o atributo
role=”main”no elementomainaté 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>
fonte: kadunew
0 Comments