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>© 2023 Meu Site. Todos os direitos reservados.</p>
	</footer>

	<!– Adicione aqui seus scripts JavaScript –>
	</body>
	</html>

view raw basic-template-html5.html hosted with ❤ by GitHub

Explicando o templete HTML5 acima

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!