Estrutura básica de uma página em HTML5

Veja se o seu site é responsivo
20 dicas e truques úteis do .htaccess

Estrutura básica de uma página em HTML5 

Para muitos editores a criação de uma nova página em HTML5 já é automática, basta criar um novo documento baseado em um modelo e pronto. Pra mim, que sou da “velha guarda” do editor de texto puro, nada como começar uma página HTML do zero, na unha mesmo.

Para facilitar um pouco a minha nossa vida, apresento abaixo 2 modelos que considero base para a criação de um novo documento em HTML 5, um bem simples somente com a estrutura padrão e um outro um pouco mais completo já com tags como: header, nav, section, article, aside e footer.

Escolha a que te atende melhor no momento e boa codificação.
Lembrete: Caso precise alterar a codificação da página de utf-8 para iso-8859-1, basta alterar na meta tag charset.

Estrutura HTML5 Básica

  1. <!DOCTYPE html>
  2. <html lang=“pt-br”>
  3. <head>
  4. <meta charset=“utf-8”/>
  5. <meta content=“width=device-width, initial-scale=1, maximum-scale=1” name=“viewport”>
  6. <title>Título da Página (Estrutura básica de uma página com HTML 5)</title>
  7. <link href=“css/seu-stylesheet.css” rel=“stylesheet”/>
  8. <script src=“scripts/seu-script.js”></script>
  9. </head>
  10. <body>
  11.  
  12.  
  13. </body>
  14. </html>

Estrutura HTML5 Completa

  1. <!DOCTYPE HTML>
  2. <html lang=“pt-br”>
  3. <head>
  4. <meta charset=“utf-8”/>
  5. <meta content=“width=device-width, initial-scale=1, maximum-scale=1” name=“viewport”>
  6. <title>Título da Página (Estrutura básica de uma página com HTML 5)</title>
  7. <link href=“css/seu-stylesheet.css” rel=“stylesheet”/>
  8. <script src=“scripts/seu-script.js”></script>
  9. </head>
  10. <body>
  11. <header>
  12. <nav>
  13. <ul>
  14. <li>Home</li>
  15. <li>Contato</li>
  16. </ul>
  17. </nav>
  18. </header>
  19.  
  20. <section>
  21. <article>
  22. <header>
  23. <h2>O título do artigo é aqui</h2>
  24. <p>Publicado em <time datetime=“2015-03-09T13:00:24+01:00”>09 de Março de 2015</time> por <a href=“#”>Author</a><a href=“#comments”>30 comentários</a></p>
  25. </header>
  26. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  27. </article>
  28.  
  29. <article>
  30. <header>
  31. <h2>O título do artigo é aqui</h2>
  32. <p>Publicado em <time datetime=“2015-03-09T13:00:24+01:00”>09 de Março de 2015</time> por <a href=“#”>Author</a><a href=“#comments”>15 comentários</a></p>
  33. </header>
  34. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  35. </article>
  36. </section>
  37.  
  38. <aside>
  39. <h2>Entre em contato</h2>
  40. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  41. </aside>
  42.  
  43. <footer>
  44. <p>Copyright 2015 Código Fonte©</p>
  45. </footer>
  46. </body>
  47. </html>

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Saiba exatamente como pequenas e médias empresas estão vendendo até 10x mais com Marketing Digital e consiga os mesmos resultados com a criação do site de sua empresa.