Entendendo as Tags HTML: Um Guia Essencial para Iniciantes
Para quem almeja construir uma carreira como desenvolvedor front-end, dominar o HTML é um passo crucial. O Hypertext Markup Language, ou HTML, é a espinha dorsal da maioria das páginas web que vemos diariamente.
O HTML é composto por diversos elementos, incluindo tags, atributos e elementos propriamente ditos. Neste guia, vamos focar nas tags HTML. Essas tags são como instruções para os navegadores, indicando como estruturar o conteúdo, seja em cabeçalhos, parágrafos, imagens, entre outros. Elas atuam como palavras-chave que determinam a forma como o navegador exibirá o conteúdo.
Os servidores interpretam as tags HTML de cima para baixo. Não há limite para a quantidade de tags que uma página web pode conter.
- Todas as tags HTML são delimitadas por símbolos < >
- Cada tag HTML possui uma função específica
- A maioria das tags HTML possui uma tag de abertura <tag> e uma tag de fechamento </tag>
Diferenciando Tags HTML, Elementos HTML e Atributos HTML
É comum que as pessoas usem os termos “tags” e “elementos” HTML de forma intercambiável, mas eles são distintos. Tecnicamente, elementos HTML e tags HTML não são exatamente a mesma coisa.
As tags HTML são usadas para definir elementos HTML. Para isso, o conteúdo é envolvido com uma tag de abertura e fechamento, que corresponde ao conteúdo com o qual se está trabalhando.
Exemplo de um elemento HTML:
<p> Este é um parágrafo </p>
Neste caso, <p> é um exemplo de tag HTML.
Os atributos HTML, por sua vez, fornecem informações extras sobre os elementos HTML em um documento, sendo encontrados dentro das tags HTML.
Exemplo de um atributo HTML:
<button id="EnviarPedido" class="btn">Pedir</button>
Tags HTML Fundamentais para Todo Desenvolvedor
Desde sua introdução por Tim Berners-Lee em 1993, o HTML evoluiu bastante. A versão inicial continha apenas 18 tags. A cada nova versão, novas tags são adicionadas, sendo o HTML5, lançado em 2014, a atualização mais recente.
Uma comparação entre HTML e HTML5 revela que este último incorporou tags semânticas como <article>, <header> e <footer>, que descrevem o conteúdo de maneira mais clara. Hoje, existem mais de 100 tags HTML. Abaixo, estão algumas das tags mais usadas e que você deve conhecer:
<!DOCTYPE>
Embora não seja tecnicamente uma tag, o DOCTYPE é uma declaração que informa ao navegador o tipo de documento que será carregado, especificamente qual versão de HTML está sendo usada.
Em HTML5, a declaração é feita da seguinte forma:
<!DOCTYPE html>
Ou
<!doctype html>
Importante: essa declaração não tem tag de fechamento e não diferencia maiúsculas de minúsculas.
<html> </html>
A tag <html> … </html> é usada logo após a declaração DOCTYPE. Essa tag define o documento como uma página web, sendo o contêiner para todos os outros elementos HTML. Ela marca o início e o fim do documento.
Representação da tag <html>:
<html>Conteúdo</html>
<head> </head>
A seção <head> de um documento HTML é representada por esta tag. Incluída dentro da tag <html>, ela fornece informações gerais sobre a página web.
A tag <head> contém outras tags, como a <title> e informações sobre o autor da página, que não são exibidas diretamente na página.
Sintaxe da tag <head>:
<head> ... </head>
<title> </title>
A tag <title> define o título da página web, sendo inserida dentro da tag <head>. O texto contido nesta tag aparece na barra de título ou na aba do navegador, não na página web em si.
Sintaxe da tag <title>:
<title>Tags HTML para Iniciantes</title>
Exemplo dentro da tag <head>:
<head>
<title>Tags HTML para Iniciantes</title>
</head>
<body> </body>
A tag <body> exibe todo o conteúdo visível da página web. Imagens, links, textos, vídeos e outros elementos podem ser encontrados dentro das tags <body> e </body>.
Outras tags comuns dentro do corpo incluem <p> para parágrafos, <a> para links, <strong> para texto em negrito e <ol> para listas ordenadas, entre outras.
Sintaxe da tag <body>:
<body> Conteúdo </body>
Tags <h1> a <h6>
Um documento HTML pode ter até seis tags de cabeçalho, representadas por números de 1 a 6: <h1>, <h2>, <h3>, <h4>, <h5> e <h6>.
<h1> é o cabeçalho de maior importância e tamanho, enquanto <h6> é o menor.
Representação das tags de cabeçalho em um documento HTML:
<h1>Cabeçalho 1</h1>
<h2>Cabeçalho 2</h2>
<h3>Cabeçalho 3</h3>
<h4>Cabeçalho 4</h4>
<h5>Cabeçalho 5</h5>
<h6>Cabeçalho 6</h6>
As tags <h1> a <h6> são inseridas dentro da tag <body>.
Exemplo de uma tag <h1>:
<body>
<h1> Este é o cabeçalho 1 </h1>
</body>
<p> </p>
A tag <p>, ou tag de parágrafo, é usada para estruturar o conteúdo em blocos de texto. Pressionar “enter” em um editor de código HTML não criará um novo parágrafo. É necessário usar várias tags <p> para ter múltiplos parágrafos. As tags de parágrafo devem estar dentro da tag <body>.
Sintaxe da tag de parágrafo:
<p>... algum conteúdo aqui ...</p>
Exemplo com quatro parágrafos:
<body>
<p>Conteúdo do primeiro parágrafo.</p>
<p>Conteúdo do segundo parágrafo.</p>
<p>Conteúdo do terceiro parágrafo.</p>
<p>Conteúdo do quarto parágrafo.</p>
</body>
<b> </b>
A tag <b> formata o texto entre as tags de abertura e fechamento em negrito.
A tag de negrito pode ser usada dentro de cabeçalhos ou tags de parágrafo.
Exemplos da tag negrito:
<b> Texto em Negrito </b>
A frase “Texto em Negrito” aparecerá em negrito.
<h1> Mantendo a calma, <b>Quinta edição</b>, a edição dos vencedores </h1>
A frase “Quinta edição” estará em negrito.
<i> </i>
A tag itálico, representada por <i>, coloca o texto entre as tags em itálico.
Por exemplo:
<i> Isto está em itálico </i>
As palavras “Isto está em itálico” aparecerão em itálico.
<u> </u>
A tag de sublinhado, <u>, é usada quando se deseja sublinhar uma parte específica do texto.
Exemplo:
<u> Sublinhar estas palavras </u>
A frase entre as tags será sublinhada.
<center> </center>
A tag <center> centraliza o conteúdo em um documento HTML.
Por exemplo, uma tag <h2> escrita como
<h2> Centralizando conteúdo em HTML </h2>
pode ser centralizada da seguinte forma:
<center>
<h2> Centralizando conteúdo em HTML </h2>
</center>
<span> </span>
A tag <span> é um contêiner genérico embutido que não possui estilo padrão. Ela pode ser usada para agrupar textos que você deseja estilizar.
Você pode usar a tag <span> dentro de outras tags, como cabeçalhos e parágrafos:
<h2> Aprenda HTML <span> com especialistas </span> e prepare-se para o mercado </h2>
<p> Aprenda HTML <span> com especialistas </span> e prepare-se para o mercado </p>
<div> </div>
A tag <div> é usada para agrupar diferentes tags em um documento HTML.
Uma tag <div> pode receber uma “classe” para adicionar estilo externo usando CSS.
Exemplo de uma tag <div> envolvendo <h1>, <h2> e uma tag de parágrafo:
<div >
<h1> Aprenda HTML </h1>
<h2> Tags HTML </h2>
<p> HTML é uma linguagem de marcação... </p>
</div>
<em> </em>
A tag de ênfase, <em>, é usada para destacar palavras em um documento HTML.
O conteúdo entre as tags <em> aparecerá inclinado ou em itálico.
Exemplo do conteúdo enfatizado dentro de um parágrafo:
<p> A reunião começará às <em> 0800 hrs </em>, por favor, chegue no horário </p>
<sup> </sup>
A tag <sup>, ou sobrescrito, permite que o texto fique acima da linha normal. Um exemplo é quando se deseja elevar um número X ao quadrado (X²).
Sintaxe da tag <sup> dentro de uma tag de parágrafo:
<H1> Harveys <sup>TM </sup> Company Limited </H1>
<sub> </sub>
A tag subscrito, <sub>, é o oposto da tag sobrescrito. O conteúdo dentro da tag <sub> aparece abaixo da linha normal do texto. Um exemplo é a fórmula química da água: H₂O.
Sintaxe da tag subscrito:
Lembre-se que H <sub> 2 </sub> 0 é a fórmula química da água
<br />
A tag <br /> é uma tag de fechamento automático que indica uma quebra de linha. Todo o conteúdo após <br /> começará em uma nova linha.
Sintaxe da tag <br /> dentro de um parágrafo:
<p> HTML é a abreviação de Hypertext Markup Language <br />
Há um debate sobre se é uma linguagem de programação ou não <br />
No entanto, não podemos minimizar a sua importância <br />
HTML é usado em mais de 95% dos websites atualmente </p>
<ol> </ol> e <li> </li>
A tag de lista ordenada, <ol>, deve ser usada com outra tag, como <li>.
Exemplo das duas tags em um editor de código:
<ol>
<li> Ásia </li>
<li> África </li>
<li> Europa </li>
</ol>
Quando renderizado no navegador, o conteúdo aparecerá numerado.
<img src=””/>
Para adicionar imagens ou um logotipo, a tag auto-fechada <img src=””/> é usada.
Sintaxe da tag de imagem:
<img src="https://cdn.pixabay.com/photo/2015/08/19/15/44/seo-896175_960_720.png"/>
O conteúdo entre as aspas representa o URL da imagem.
Conclusão
Existem mais de 100 tags HTML, mas as apresentadas neste guia são essenciais para iniciantes. O HTML é suportado na maioria dos editores de código, garantindo que você não terá dificuldades ao começar a aprender.