Template HTML5 básico - Web Design Gráfico

Você está dando os primeiros passos na sua jornada do desenvolvimento web, e a primeira coisa que precisa aprender é a estrutura básica do HTML5. Para lhe ajudar nessa tarefa, vamos criar juntos um template de página HTML5, explicando as principais tags ao longo do caminho e no final teremos um código completo de um template HTML5 básico.

Código completo do template HTML5

<!DOCTYPE html>
<html lang="pt-br">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Minha Página</title>
		<!-- Adicione aqui seus links para folhas de estilo (CSS) -->
	</head>
	<body>
		<!-- Cabeçalho da Página -->
		<header>
			<h1>Meu Site</h1>
			<nav>
				<ul>
					<li><a href="#">Página Inicial</a></li>
					<li><a href="#">Sobre</a></li>
					<li><a href="#">Contato</a></li>
				</ul>
			</nav>
		</header>
		<!-- Conteúdo Principal -->
		<main>
			<section>
				<h2>Bem-vindo ao Meu Site</h2>
				<p>Este é um parágrafo introdutório.</p>
			</section>
			<section>
				<h2>Últimas Notícias</h2>
				<article>
					<h3>Título da Notícia 1</h3>
					<p>Conteúdo da notícia 1…</p>
				</article>
				<article>
					<h3>Título da Notícia 2</h3>
					<p>Conteúdo da notícia 2…</p>
				</article>
			</section>
		</main>
		<!-- Rodapé da Página -->
		<footer>
			<p>© 2024 Meu Site. Todos os direitos reservados.</p>
		</footer>
		<!-- Adicione aqui seus scripts JavaScript -->
	</body>
</html>

Código disponível também no GitHub.

Explicando o template HTML5 básico

Iniciando com o básico

Começamos definindo o tipo de documento com a tag <!DOCTYPE html>. Em seguida, abrimos a tag <html> especificamos o idioma da página usando lang="pt-br". Esta tag envolve todo o conteúdo HTML.

Configurando o cabeçalho

O cabeçalho da página é crítico para a navegação e identidade. Utilizamos a tag <head> para conter informações como a codificação de caracteres <meta charset="UTF-8"> a configuração da viewport <meta name="viewport" content="width=device-width, initial-scale=1.0"> e o título da página <title>.

Construindo a Navegação

Dentro do <body>, a estrutura principal da página, criamos o cabeçalho <header> que contém um título <h1> e uma barra de navegação <nav>. A navegação é construída com uma lista não ordenada <ul> e itens de lista <li>, cada um contendo um link <a> para diferentes seções da página.

Adicionando conteúdo principal

O conteúdo principal reside na tag <main>, que é dividida em seções <section>. Cada seção pode conter títulos de diferentes níveis <h2> e parágrafos <p>, proporcionando uma estrutura organizada ao conteúdo.

Incorporando notícias

Dentro das seções, utilizamos a tag <article> para criar blocos independentes de notícias. Cada artigo possui um título <h3> e um parágrafo explicativo <p>, proporcionando uma estrutura semântica ao conteúdo.

Concluindo com um rodapé

Personalize e explore

Este é apenas um ponto de partida. Sinta-se à vontade para personalizar o template conforme suas necessidades específicas. Adicione folhas de estilo CSS e scripts JavaScript para aprimorar ainda mais a aparência e a funcionalidade de sua página.

Ao criar sua primeira página HTML5, você está trilhando um caminho para se tornar um desenvolvedor web de sucesso. Continue aprendendo e praticando constantemente para aprimorar suas habilidades.

Bons trabalhos!