Estrutura básica de uma página em HTML5

21/09/2016

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:

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>.
HTML: É o elemento raiz da página e engloba todos os outros elementos. Deve conter a linguagem padrão (lang) da página.
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.
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

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

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.