Introdução

Se você está começando no mundo do desenvolvimento web, aprender HTML é o primeiro passo para criar páginas incríveis! Depois de aprender como criar um arquivo HTML básico, o próximo passo é entender as principais tags que você pode usar para dar vida às suas páginas. Neste post, vamos explorar as tags essenciais que todo iniciante deve conhecer. Vamos lá!

Tags HTML para usar dentro do <head>.

1. Tag ‘<title>’.

Essa tag é super importante! Ela define o título da sua página, que aparece na aba do navegador. É a primeira impressão que você passa para quem visita seu site.

<title>Meu Primeiro Site</title>

2. Tag ‘<link>’.

A tag <link> é usada para conectar recursos externos ao seu HTML, como folhas de estilo CSS. Quer deixar sua página mais bonita? É aqui que você faz isso!

<link rel="stylesheet" href="styles.css">

3. Tag ‘<script>’.

Com a tag <script>, você pode adicionar scripts JavaScript ao seu site. Com JavaScript, suas páginas podem ser interativas e muito mais dinâmicas!

<script src="script.js"></script>

Tags HTML para usar dentro do <body>

1. Tag '<h1>' a '<h6>'

Essas tags são usadas para títulos e subtítulos, do maior <h1> ao menor <h6>. Elas ajudam a organizar o conteúdo da sua página.

<h1>Bem-vindo ao Meu Site!</h1>
<h2>Sobre Mim</h2>

2. Tag '<a>'

A tag <a> é usada para criar links. Quer levar o usuário para outra página ou site? Essa é a tag que você vai usar!

<a href="https://vivendodeprogramacao.com.br">Visite meu site!</a>

3. Tag '<p>'

Essa tag é para parágrafos. Sempre que você quiser adicionar um texto, você usa a tag <p>.

<p>Este é um parágrafo de texto no meu site.</p>

4. Tag '<img>'

Com a tag <img>, você pode adicionar imagens às suas páginas. Lembre-se de usar o atributo alt para descrever a imagem – é uma boa prática para acessibilidade!

<img src="imagem.jpg" alt="Descrição da imagem">

5. Tags de lista: '<ol>' e '<ul>'

Essas tags são usadas para listas ordenadas (<ol>) e não ordenadas (<ul>). Listas são ótimas para organizar informações de forma clara.

<ul>
	<li>Item 1</li>
	<li>Item 2</li>
</ul>

<ol>
	<li>Primeiro item</li>
	<li>Segundo item</li>
</ol>

6. Tag ‘<div>’

A tag <div> é um contêiner genérico usado para agrupar outros elementos. Você pode estilizar e manipular essas divisões de várias maneiras com CSS e JavaScript.

<div class="container">
	<p>Este é um texto dentro de uma div.</p>
</div>

7. Tag '<span>'

Semelhante ao <div>, mas <span> é usado para agrupar elementos dentro de linhas de texto, perfeito para aplicar estilos em partes específicas de um texto.

<p>Este é um texto com uma <span style="color: red;">palavra em destaque</span>.</p>

8. Tags <br> e <hr>

A tag <br> é usada para criar quebras de linha, enquanto <hr> adiciona uma linha horizontal para separar conteúdos.

<p>Primeira linha.<br>Segunda linha com quebra.</p>
<hr>
<p>Conteúdo separado por uma linha horizontal.</p>

Atualizando Seu Arquivo HTML Básico

Agora que você conhece as principais tags HTML para usar dentro do <head> e do <body>, vamos adicionar essas tags ao arquivo HTML que criamos no post anterior. Será rápido e fácil!

Abra o arquivo HTML que você criou anteriormente e faça as seguintes alterações:

  • No <head>, adicione links para uma folha de estilo CSS (styles.css) e um script JavaScript (script.js). Isso permitirá que você estilize sua página e adicione interatividade no futuro.

No <body>, vamos organizar o conteúdo e adicionar algumas novas tags:

  • Use <h2> para criar um subtítulo.
  • Adicione uma imagem com a tag <img>.
  • Crie um link com a tag <a>.
  • Adicione uma lista não ordenada (<ul>) e uma lista ordenada (<ol>).
  • Envolva um parágrafo em uma <div>.
  • Use <span> para destacar texto.
  • Adicione uma quebra de linha (<br>) e uma linha horizontal (<hr>).

Aqui está o código atualizado com todas as novas tags:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
   <meta charset="UTF-8">
   <title>Seu Primeiro Arquivo HTML</title>
   <link rel="stylesheet" href="styles.css"> <!-- Conectando folha de estilo -->
   <script src="script.js"></script> <!-- Conectando script JavaScript -->
</head>
<body>
   <h1>Bem-vindo ao Mundo HTML!</h1>
   <h2>Sobre HTML</h2> <!-- Subtítulo -->
   <p>Este é um parágrafo explicando o que é HTML.</p>
   <img src="minha-foto.jpg" alt="Minha foto de perfil"> <!-- Imagem -->
   <a href="https://vivendodeprogramacao.com.br">Visite meu blog!</a> <!-- Link -->
   <!-- Lista não ordenada -->
   <ul>
       <li>HTML</li>
       <li>CSS</li>
       <li>JavaScript</li>
   </ul>
   <!-- Lista ordenada -->
   <ol>
       <li>Passo 1</li>
       <li>Passo 2</li>
   </ol>
   <div class="info">
       <p>Este é um parágrafo dentro de uma div.</p>
   </div> <!-- Divisão de conteúdo -->
   <p>Este é um texto com uma <span style="color: red;">palavra em destaque</span>.</p> <!-- Texto destacado -->
   <br> <!-- Quebra de linha -->
   <hr> <!-- Linha horizontal -->
</body>
</html>


E pronto! Você atualizou seu arquivo HTML com algumas das principais tags que ajudarão a estruturar e estilizar sua página de maneira mais interessante. Continue explorando essas tags e experimente criar diferentes tipos de conteúdo para deixar sua página web ainda mais legal.

Até o próximo post e boa programação!