Curso de HTML: o que é uma tag e quais são as principais?

Olá pessoal, vamos começar nosso curso de HTML e hoje vamos falar sobre o que é uma Tag HTML (Hypertext Markup Language) que desempenham um papel crucial.

Esses elementos fundamentais são a espinha dorsal de qualquer página web, estruturando o conteúdo e permitindo a comunicação eficaz entre o navegador e o usuário.

Exploraremos o que são as tags HTML, sua importância e como são essenciais para a construção de páginas web dinâmicas e interativas.

O que são Tags HTML?

As Tags HTML consistem em códigos inseridos no texto para definir a estrutura e o layout de uma página. Cada tag possui uma função específica e contribui para a apresentação visual e organização do conteúdo.

Estrutura Básica das Tags HTML:

As tags HTML geralmente seguem uma estrutura básica, composta por uma tag de abertura ‘< >‘, conteúdo e uma tag de fechamento ‘< / >‘. Por exemplo, a estrutura básica de um parágrafo em HTML seria:

<p>Este é um exemplo de parágrafo em HTML</p>

Aqui, <p> representa a tag de abertura, e </p> é a tag de fechamento. O conteúdo entre essas tags é o texto que será exibido na página.

Atributos das Tags HTML:

Além do conteúdo entre as tags, muitas tags HTML podem conter atributos. Os atributos fornecem informações adicionais sobre a tag e podem influenciar o comportamento ou estilo da página. Por exemplo, a tag de imagem (`<img>`) pode ter o atributo `src` para especificar o caminho da imagem:

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

Principais Tags HTML

As tags HTML desempenham um papel crucial no SEO (Search Engine Optimization). Os motores de busca, como o Google, utilizam as tags para entender a estrutura e o conteúdo de uma página e vamos falar disso em outro artigo.

Neste momento vamos falar sobre as principais ou as tags mais usadas para se criar um site ou sistema para web, não focando a parte de SEO

Tags apropriadas e bem otimizadas podem melhorar a classificação nos resultados de pesquisa, tornando o conteúdo mais visível para os usuários.

Titulos ‘h1’ a ‘h6’:
As tags de cabeçalho variam de ‘h1’ a ‘h6’, indicando a importância e hierarquia do texto. Motores de busca consideram os cabeçalhos ao avaliar a relevância do conteúdo.

<h1>Título Principal</h1>
<h2>Subtítulo</h2>

‘a’ (Âncora ou Link):
A tag de âncora é usada para criar links. O atributo href define o destino do link.

<a href="https://www.exemplo.com">Visite o Exemplo</a>

‘img’ (Imagem):
A tag de imagem é usada para incorporar imagens. O atributo src especifica o caminho da imagem e o atributo alt fornece uma descrição para acessibilidade.

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

‘table’ (Tabelas):
As tabelas são uma ferramenta eficaz para apresentar dados tabulares e dispor o texto e os gráficos em uma página HTML, em outras palavras podemos dizer que as tabelas lembram muito uma planilha do excel, e esta é a estrutura padrão para criação de uma tabela.

<table border="1">
<tr><th>Cabeçalho 1</th><th>Cabeçalho 2</th><th>Cabeçalho 3</th></tr>
<tr><td>Linha:1 Célula:1</td><td>Linha:1 Célula:2</td><td>Linha:1 Célula:3</td></tr>
<tr><td>Linha:2 Célula:1</td><td>Linha:2 Célula:2</td><td>Linha:2 Célula:3</td></tr>
<tr><td>Linha:3 Célula:1</td><td>Linha:3 Célula:2</td><td>Linha:3 Célula:3</td></tr>
</table>

Tag HTML para formatação de texto

‘ul e li’ (Listas):
Uma lista ordenada é uma lista de itens e as vezes as listas de itens são marcadas com números.A lista mais comum é a lista não-ordenada definida pela tag ‘ul’. O Elemento HTML ‘ol’ cria também uma lista mas separa os itens por numero como vemos no exemplo abaixo:

<-- Lista com marcadores -->
<ul>
	<li>Arroz</li>
	<li>Feijão</li>
	<li>Leite</li>
</ul>
 
<-- Lista Numerica -->
<ol>
	<li>São Paulo</li>
	<li>Rio de Janeiro</li>
	<li>Minas Gerais</li>
</ol>

‘p, b, i’ (paragrafo, negrito, italico):
Sempre que quisermos que um trecho de um texto seja visto como parágrafo, devemos colocar tal texto entre as tags ‘p’. A tag ‘b’ faz com que o texto entre esta tag fique em negrito, a tag ‘i’ deixa o texto em italico e ‘u’ deixa o texto sublinhado (u vem da palavra underline) como vemos no exemplo abaixo:

<p>O <b>Lorem Ipsum</b> é um texto modelo da <i>indústria tipográfica</i> e de <u>impressão</u>.</p>

Outras Tags HTML

 
<div> !! </div> <!-- Faz a divisão dentro do conteúdo -->
 
<span> !! </span> <!-- modificar propriedades do texto, ou separar partes do texto -->
 
<q> !! </q> <!-- Citação -->
 
<code> !! </code> <!-- Exibir uma parte do código de programação -->
 
<address> !! </address> <!-- Informações de contato -->
 
<br> <!-- para quebras de linha -->

Em nosso próximo artigo falaremos mais sobre as Tags do HTML que são usadas principalmente por conta do SEO e otimização dos sites.