Template HTML5 básico

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

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é

Finalmente, fechamos nossa página com um rodapé <footer>, que contém informações adicionais, como a declaração de direitos autorais ©2023 Meu Site. Todos os direitos reservados.

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!

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *