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.
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:
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 html>
.lang
) da página.title
) e meta tags. Não é exibido na página em si, mas é importante para o SEO.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 © 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.
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!
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
1 Comment
Maravilhoso trabalho de ajuda parabens