As 10 Tags HTML Que Todo Iniciante Precisa Saber
Aprender HTML é o primeiro passo para quem quer entrar no mundo do desenvolvimento web. HTML (HyperText Markup Language) é a linguagem de marcação usada para estruturar o conteúdo de páginas na internet. Neste post, vamos explorar as 10 principais tags que todo iniciante precisa dominar. Vamos entender o que cada uma faz, como usá-la corretamente e ver exemplos práticos de aplicação.
1. <html> – A Estrutura Principal
A tag <html> representa o elemento raiz de um documento HTML. Tudo que está dentro de uma página web deve estar contido entre a tag de abertura <html> e a de fechamento </html>.
Exemplo:
<!DOCTYPE html>
<html>
<head>
<title>Minha Primeira Página</title>
</head>
<body>
<h1>Olá, mundo!</h1>
</body>
</html>
Neste exemplo, todo o conteúdo da página está dentro da tag <html>, incluindo o cabeçalho <head> e o corpo <body>.
2. <head> – Informações da Página
A tag <head> contém metadados (dados sobre os dados) que não são exibidos diretamente no conteúdo da página. Aqui você coloca o título da página, links para folhas de estilo (CSS), scripts JavaScript e outras informações.
Exemplo:
<html>
<head>
<meta charset="UTF-8">
<title>Exemplo de Cabeçalho</title>
</head>
</html>
O conteúdo dentro do <head> ajuda o navegador a interpretar e formatar a página corretamente.
3. <body> – O Corpo da Página
A tag <body> contém todo o conteúdo visível da página: textos, imagens, links, listas, tabelas e muito mais.
Exemplo:
<body>
<h1>Bem-vindo!</h1>
<p>Este é o conteúdo principal da página.</p>
</body>
Tudo que estiver dentro da tag <body> será exibido no navegador quando alguém acessar a página.
4. <h1> a <h6> – Títulos e Subtítulos
As tags de <h1> a <h6> são usadas para definir títulos e subtítulos. O <h1> representa o título principal, e <h6> o menor nível de subtítulo.
Exemplo:
<h1>Título Principal</h1>
<h2>Subtítulo</h2>
<h3>Subtítulo Menor</h3>
Essas tags ajudam na organização visual do conteúdo e também na otimização para mecanismos de busca (SEO).
5. <p> – Parágrafos
A tag <p> é usada para escrever parágrafos de texto.
Exemplo:
<p>HTML é uma linguagem de marcação usada para criar páginas na web.</p>
Cada parágrafo de texto deve estar dentro de uma tag <p> para que o conteúdo fique organizado e legível.
6. <a> – Links
A tag <a> (âncora) é usada para criar hiperlinks. Ela permite que os usuários naveguem entre páginas ou abram arquivos.
Exemplo:
<a href="https://www.exemplo.com">Visite nosso site</a>
O atributo href define o destino do link. O texto entre as tags <a> será clicável.
7. <img> – Imagens
A tag <img> é usada para incorporar imagens no conteúdo da página.
Exemplo:
<img src="imagem.jpg" alt="Descrição da imagem">
O atributo src define o caminho da imagem e o alt fornece uma descrição para leitores de tela e quando a imagem não puder ser carregada.
8. <ul>, <ol> e <li> – Listas
As listas são usadas para agrupar itens relacionados. O HTML oferece dois tipos de listas: não ordenadas (<ul>) e ordenadas (<ol>), ambas utilizando <li> para os itens.
Exemplo:
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<ol>
<li>Primeiro</li>
<li>Segundo</li>
</ol>
As listas são ótimas para organizar informações em tópicos, etapas ou itens.
9. <div> – Blocos Genéricos
A tag <div> é usada para agrupar elementos e aplicar estilos ou scripts de forma conjunta.
Exemplo:
<div>
<h2>Seção do Site</h2>
<p>Este é um bloco de conteúdo.</p>
</div>
A <div> não tem significado semântico, mas é essencial para estruturação e estilização com CSS.
10. <span> – Estilo Inline
A tag <span> é semelhante à <div>, mas usada para elementos em linha (inline). Ideal para aplicar estilos a partes específicas do texto.
Exemplo:
<p>Texto com uma <span style="color: red;">palavra colorida</span>.</p>
Com o <span>, é possível modificar o estilo de apenas uma parte de um parágrafo, por exemplo.
Dominar essas 10 tags é o primeiro passo para quem deseja construir páginas web de forma estruturada e sem complicações. Cada uma tem um papel específico na organização e exibição do conteúdo, e juntas formam a base para o desenvolvimento front-end. Com prática, você logo estará combinando essas tags com CSS e JavaScript para criar páginas cada vez mais interativas e profissionais. Aqui na DIO existe uma formação incrível de HTML, aproveite!
Se você gostou deste post, compartilhe com outros iniciantes e continue acompanhando o blog para mais conteúdos sobre desenvolvimento web!
#HTMLParaIniciantes #AprendaHTML #DesenvolvimentoWeb #CodandoDoZero #ProgramaçãoFrontEnd
