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
- <!DOCTYPE html>
- <html lang=“pt-br”>
- <head>
- <meta charset=“utf-8”/>
- <meta content=“width=device-width, initial-scale=1, maximum-scale=1” name=“viewport”>
- <title>Título da Página (Estrutura básica de uma página com HTML 5)</title>
- <link href=“css/seu-stylesheet.css” rel=“stylesheet”/>
- <script src=“scripts/seu-script.js”></script>
- </head>
- <body>
- …
- </body>
- </html>
Estrutura HTML5 Completa
- <!DOCTYPE HTML>
- <html lang=“pt-br”>
- <head>
- <meta charset=“utf-8”/>
- <meta content=“width=device-width, initial-scale=1, maximum-scale=1” name=“viewport”>
- <title>Título da Página (Estrutura básica de uma página com HTML 5)</title>
- <link href=“css/seu-stylesheet.css” rel=“stylesheet”/>
- <script src=“scripts/seu-script.js”></script>
- </head>
- <body>
- <header>
- <nav>
- <ul>
- <li>Home</li>
- <li>Contato</li>
- </ul>
- </nav>
- </header>
- <section>
- <article>
- <header>
- <h2>O título do artigo é aqui</h2>
- <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>
- </header>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
- </article>
- <article>
- <header>
- <h2>O título do artigo é aqui</h2>
- <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>
- </header>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
- </article>
- </section>
- <aside>
- <h2>Entre em contato</h2>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
- </aside>
- <footer>
- <p>Copyright 2015 Código Fonte©</p>
- </footer>
- </body>
- </html>
Na Mundo Digital web e design o seu site já é criado de forma responsiva, atendendo os padrões do Google e otimizados para diminuir o tempo de carregamento do site e facilitar sua indexação e também executamos todos os procedimentos no Search Console do Google. Todo o site também é oferecido com SEO completo e contamos com hospedagem de sites com servidores de última geração com discos SSD, 32 Giga de memória e 32 cores de processamento.
Seu site nas primeiras páginas do Google. Atendemos as cidades de Itupeva, Valinhos, Grande ABC, Jundiaí, Indaiatuba, Louveira, Campinas, Itatiba, Vinhedo, Cabreúva, Sorocaba, Guarulhos e São Paulo. Também contamos com o atendimento online todo o Brasil. Sinta-se a vontade para conhecer as nossas soluções em internet.
