Exemplos de Códigos HTML5

Para facilitar um pouco a  nossa vida, apresentamos 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.

    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. </body>
    13. </html>

    1. 2.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>






    

  1. 

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    2. 











  •  
    • 



    • 



    • 










    

    

    

    














    


    

    

    



    

    



    

    

    

    


    5 comentários:
    

    



    

    1. Unknown6 de junho de 2016 às 16:45
      Muito bom, mas faltou explicação sobre CSS que hoje é o mais importante.
      ResponderExcluir
    2. Anônimo6 de junho de 2016 às 17:18
      Legal as novas tags adicionadas no HTML5, facilitam bastante
      ResponderExcluir
    3. Unknown6 de junho de 2016 às 17:54
      Concordando com o Lucas, faltou uma explicação mais detalhada do CSS
      ResponderExcluir
    4. Unknown6 de junho de 2016 às 18:32
      Interessante os exemplos de código, talvez seria necessário abordar mais css3 (@media queries, transitions, etc)
      ResponderExcluir
    5. Unknown13 de junho de 2016 às 15:21
      Ótimos exemplos, ficou bem fácil de entender, temos um conteúdo muito bom sobre o HMTL porém falta um pouco de conteúdo sobre o CSS (novos recursos, por exemplo).
      ResponderExcluir
    

    

    

    

    


    

    





    

    


    

    

        
    
      

    


    

    

    
Assinar:
Postagens (Atom)