Nesta postagem, vamos explorar a estrutura básica de um site usando HTML5. Pois, esta é a versão mais recente da linguagem de marcação padrão para a criação de páginas web. Então, vamos abordar diferentes elementos e recursos do HTML5 que ajudarão a construir um site eficiente e agradável para os usuários.
Conteúdo
Estrutura básica de um documento HTML5
Um documento HTML5 possui uma estrutura básica que consiste em várias partes, você pode continuar para saber mais aprofundadamente com um tutorial explicativo de como criar um arquivo html, ou veja o exemplo a seguir:
Doctype
O doctype é a primeira linha de um documento HTML5 e informa ao navegador que o documento está em conformidade com a especificação HTML5.
Elemento html
O elemento <html> é o elemento raiz de um documento HTML e contém todos os outros elementos.
Elemento head
O elemento <head> contém informações sobre o documento, como o título da página, metadados e referências a arquivos CSS e JavaScript.
Elemento body
O elemento <body> contém o conteúdo visível do documento, como texto, imagens, links e outros elementos HTML.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Titulo</title>
meta...
</head>
<body>
body...
</body>
</html>
Saiba que existem muitas tags HTML além dessas da estrutura simples, e podera ver as principais tags do html no link a seguir.
Organização do conteúdo na estrutura de um site em HTML5
Ao criar um site em HTML5, é importante organizar o conteúdo de maneira clara e fácil de navegar. Para isso, podemos utilizar os seguintes elementos:
Cabeçalho na estrutura de um site em HTML5: header
O cabeçalho é geralmente colocado no topo da página e contém informações de identificação do site, como o logotipo e o slogan. Podemos utilizar o elemento <header> para envolver o conteúdo do cabeçalho.
Barra de navegação na estrutura de um site: nav
A barra de navegação é usada para permitir que os usuários naveguem pelo site. Podemos criar uma barra de navegação ou menu utilizando o elemento html <nav>. Dentro do elemento <nav>, podemos usar elementos de lista, como <ul> e <li>, para criar os links de navegação.
Conteúdo principal na estrutura de um site em HTML5: main
O conteúdo principal é o elemento central do site, onde a maior parte do conteúdo é exibida. Portanto, podemos envolver o conteúdo principal com o elemento <main>. Dentro do <main>, podemos usar vários elementos HTML para estruturar o conteúdo, como títulos, parágrafos, listas e imagens.
Barra lateral na estrutura de um site: aside
A barra lateral é opcional e geralmente é usada para exibir informações adicionais, como links relacionados, menus de navegação secundários ou anúncios. Podemos criar uma barra lateral usando o elemento <aside>.
Rodapé na estrutura de um site em HTML5: footer
O rodapé é colocado na parte inferior da página e geralmente contém informações adicionais, como informações de contato, links de política de privacidade ou direitos autorais. Podemos usar o elemento <footer> para envolver o conteúdo e criar o rodapé.
.input-number {
/* Adicione aqui os estilos personalizados */
}
Dicas para uma boa estrutura de um site em HTML5
- Use uma estrutura semântica para melhorar a acessibilidade e o SEO do site.
- Mantenha o código HTML limpo e bem organizado.
- Utilize CSS para estilizar o site e torná-lo mais atraente visualmente.
- Teste o site em diferentes navegadores e dispositivos para garantir a compatibilidade.
- Considere a usabilidade e a experiência do usuário ao projetar a navegação e o layout do site.
Exemplo de estrutura de site em HTML5
Este é um exemplo básico de estrutura de um site. Lembre-se de personalizar o conteúdo e o estilo de acordo com as necessidades do seu projeto.
<!DOCTYPE html>
<html>
<head>
<title>Meu Site</title>
<link rel="stylesheet" href="estilos.css">
</head>
<body>
<header>
<h1>Meu Site</h1>
<p>Bem-vindo ao Meu Site incrível!</p>
</header>
<nav>
<ul>
<li><a href="#">Início</a></li>
<li><a href="#">Sobre</a></li>
<li><a href="#">Serviços</a></li>
<li><a href="#">Contato</a></li>
</ul>
</nav>
<main>
<h2>Sobre</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor lacus sit amet ipsum lobortis, eu cursus sapien facilisis. Vivamus malesuada arcu lacus, sed efficitur nulla aliquam in.</p>
<h2>Serviços</h2>
<ul>
<li>Serviço 1</li>
<li>Serviço 2</li>
<li>Serviço 3</li>
</ul>
<img decoding="async" src="imagem.jpg" alt="Imagem do site">
</main>
<aside>
<h3>Links úteis</h3>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</aside>
<footer>
<p>© 2023 Meu Site. Todos os direitos reservados.</p>
</footer>
</body>
</html>
Conclusão
Nesta postagem, exploramos a estrutura básica de um site em HTML5, fornecendo uma visão geral dos principais elementos e recursos que podem ser utilizados para criar um site eficiente e agradável para os usuários.
Em resumo, ao utilizar corretamente a estrutura e os recursos do HTML5, é possível criar sites modernos, acessíveis e atraentes. Portanto, lembre-se de adaptar a estrutura às necessidades do seu projeto e explorar outros recursos avançados disponíveis no HTML5 para aprimorar ainda mais a experiência do usuário.
Como se tornar um desenvolvedor Web?
Certamente deve estar animado para começar a sua jornada, saiba que estou focado para fazer conteúdos excepcionais que irão te ajudar! Então não perca tempo e cadastre-se logo abaixo para não perder nenhuma novidade e ficar sempre por dentro
