Estrutura básica de uma página em HTML5

html5 1 1
Getting your Trinity Audio player ready...
Post atualizado em: 15/03/2023

Você sabe como criar uma página web usando HTML5? Neste post, vamos explicar o que é HTML5, quais são as vantagens dessa linguagem e como estruturar uma página básica usando as principais tags HTML.

O que é HTML5?

HTML5 é a quinta versão da Linguagem de Marcação de Hipertexto (HTML), que é o código usado para estruturar uma página web e seu conteúdo. Por exemplo, com HTML você pode criar parágrafos, listas, imagens, tabelas, formulários e outros elementos que compõem um site.

O HTML5 foi lançado em 2014 e trouxe diversas novidades em relação às versões anteriores, como:

  • Novas tags semânticas que facilitam a organização e a acessibilidade do conteúdo;
  • Novos atributos que permitem estilizar e validar os elementos com mais facilidade;
  • Novas APIs que permitem adicionar recursos interativos como áudio, vídeo, geolocalização, armazenamento local e drag and drop;
  • Maior compatibilidade com diferentes navegadores e dispositivos.

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.

A estrutura básica de uma página em HTML5 é composta pelos seguintes elementos:

  1. Doctype: Indica a versão do HTML que está sendo usada, e é sempre a primeira linha do código. O doctype para HTML5 é: <!DOCTYPE html>.
  2. HTML: É o elemento raiz da página e engloba todos os outros elementos. Deve conter a linguagem padrão (lang) da página.
  3. Head: Contém informações sobre a página, como o título (title) e meta tags. Não é exibido na página em si, mas é importante para o SEO.
  4. Body: Contém o conteúdo da página, incluindo textos, imagens, links, formulários, scripts, entre outros.

A seguir, temos um exemplo de estrutura básica de uma página em HTML5:

<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <meta charset="utf-8">
    <title>Título da Página</title>
    <meta name="description" content="Descrição da Página">
    <meta name="keywords" content="palavras-chave, separadas por vírgulas">
    <meta name="author" content="Nome do Autor">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <header>
      <nav>
        <ul>
          <li><a href="#">Menu 1</a></li>
          <li><a href="#">Menu 2</a></li>
          <li><a href="#">Menu 3</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <h1>Título Principal</h1>
      <p>Este é um parágrafo de exemplo.</p>
      <img src="imagem.jpg" alt="Descrição da Imagem">
    </main>
    <footer>
      <p>Direitos Reservados &copy; 2023</p>
    </footer>
  </body>
</html>

Neste exemplo, temos a estrutura básica de uma página em HTML5 com um cabeçalho (header), um conteúdo principal (main) e um rodapé (footer). Além disso, temos um menu de navegação (nav) e um parágrafo de exemplo (p), bem como uma imagem (img). Note que as tags têm um fechamento explícito, o que é importante em HTML5.

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 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

Aqui na Mundo Digital web e design, temos uma equipe altamente capacitada em HTML5, pronta para criar e desenvolver um site moderno e personalizado para o seu negócio. Aproveite para conhecer nosso portfólio e descubra como podemos ajudar a impulsionar o seu negócio na internet. Estamos à disposição para atendê-lo!

post andre desenvolvedor
Escrito por: André Rodrigues
Desenvolvedor web

Vamos tomar um café. Se você quer resultados diferentes, precisa de uma agência que pense diferente. Faça o orçamento do seu site ou Campanha Ads e agende hoje mesmo seu atendimento.

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.

Tags

#bing #curiosidades #desenvolvimento-de-sites #design #estrategias-de-anuncios #otimizacao-de-sites #produtividade #projetos #tecnologia #wordpress #blog #criacao-de-sites #fotografia #google #hospedagem-de-sites #imagens #internet #landing-page #marketing #schema-markup #seo #sites-responsivos #webdesign #websites #wordpress

André Rodrigues
André Rodrigues
Com mais de dez anos de experiência no setor, a equipe da Mundo Digital Web e Design está empenhada em ajudar seus clientes a expandir seus negócios on-line. Sabemos que um site bem projetado e uma campanha de publicidade eficaz são essenciais para atrair e converter clientes em potencial em compradores.

4 Comments

  1. Gwyra bebe Namba disse:

    Maravilhoso trabalho de ajuda parabens

  2. Brittany Robledo disse:

    You mentioned this exceptionally well! (Você mencionou isso excepcionalmente bem!)

Deixe um comentário

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