Desvendando o HTML: Uma Jornada Pelas Tags Essenciais

Após concluir o meu bootcamp de HTML, fiquei surpreso ao descobrir que muitas tags simples do HTML eu nem fazia ideia de sua existência! 😄 Assim como eu, muitos podem se sentir da mesma forma. Por isso, decidi compartilhar este artigo para aqueles que, como eu, desejam aprender um pouquinho mais sobre HTML e suas nuances.

O que são Tags?

No vasto mundo do desenvolvimento web, as tags são como blocos de construção fundamentais. Elas são os elementos de uma linguagem de marcação, como o HTML, que definem a estrutura e o significado do conteúdo em um documento. Essencialmente, as tags são delimitadas por caracteres especiais, como "<" e ">", e são usadas para marcar diferentes partes do texto, indicando como essas partes devem ser interpretadas ou apresentadas.

Aqui está uma rápida introdução aos conceitos básicos de algumas tags HTML com exemplos práticos:

h1 até o h6 (títulos com ordem de importância):

• Explicação: As tags h1 até h6 são utilizadas para definir diferentes níveis de títulos em uma página. Quanto menor o número, maior a importância do título. O h1 é geralmente reservado para o título principal da página, enquanto os h2 até h6 podem ser utilizados para subtítulos ou hierarquias de informações menos relevantes.
• Exemplo:

<h1>Título Principal</h1>
<h2>Subtítulo Importante</h2>
<h3>Subtítulo Menos Importante</h3>
<h4>Subtítulo Menos Importante</h4>
<h5>Subtítulo Menos Importante</h5>
<h6>Subtítulo Menos Importante</h6>

p (parágrafo):

• Explicação: A tag p é usada para representar um parágrafo de texto em HTML. Ela é fundamental para a organização e estruturação do conteúdo textual em uma página da web.
• Exemplo:

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

mark (marca texto):

• Explicação: A tag mark é usada para destacar ou marcar partes específicas de um texto. É útil para chamar a atenção do leitor para informações importantes.
• Exemplo:

<p>Este texto está sendo <mark>destacado</mark>.</p>

small (diminui o tamanho do texto):

• Explicação: Esta tag é utilizada para diminuir o tamanho do texto, ideal para notas de rodapé ou informações menos relevantes.
• Exemplo:

<p><small>Texto pequeno</small></p>

i (itálico):

• Explicação: A tag i é usada para colocar o texto em itálico, adicionando ênfase ou distinção visual a certas palavras ou frases.
• Exemplo:

<p>Este é um texto em <i>itálico</i>.</p>

u (sublinha o texto):

• Explicação: A tag u é utilizada para sublinhar o texto, chamando a atenção para sua importância ou destacando-o de alguma forma.
• Exemplo:

<p>Este é um texto <u>sublinhado</u>.</p>

strong (deixar texto em negrito):

• Explicação: Esta tag é usada para enfatizar ou destacar um texto, colocando-o em negrito para torná-lo mais proeminente visualmente.
• Exemplo:

<p>Este é um texto <strong>em negrito</strong>.</p>

ol (lista ordenada) e ul (lista não ordenada):

• Explicação: As tags ol e ul são usadas para criar listas ordenadas e não ordenadas, respectivamente. O elemento li é usado dentro dessas tags para representar cada item da lista.
• Exemplo:

<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>


<ul>
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
</ul>

a (cria um link):

• Explicação: A tag a é essencial para criar links em uma página da web. Ela pode ser usada para vincular a outras páginas, recursos externos ou até mesmo para navegar dentro do próprio documento.
• Exemplo:

<a href="https://exemplo.com">Link Externo</a>

hr (cria linha horizontal):

• Explicação: Esta tag é usada para criar uma linha horizontal para separar o conteúdo em uma página.
• Exemplo:

<p>Este é um parágrafo.</p>
<hr>
<p>Este é outro parágrafo.</p>

sub (coloca um trecho menor do que o texto normal):

• Explicação: Utilizada para colocar o texto ligeiramente abaixo da linha de base, útil para representar subscritos, como em fórmulas químicas.
• Exemplo:

<p>Água é H<sub>2</sub>O.</p>

blockquote (Cria uma citação):

• Explicação: A tag blockquote é usada para citar um trecho de texto de outra fonte, destacando-o visualmente para indicar que é uma citação.
• Exemplo:

<blockquote>
<p>Este é um exemplo de citação.</p>
</blockquote>

table (tabela):

• Explicação: A tag table é utilizada para criar uma tabela em HTML. As tabelas são úteis para organizar dados em linhas e colunas.
• Exemplo:

<table>
<tr>
  <th>Nome</th>
  <th>Idade</th>
  <th>País</th>
</tr>
<tr>
  <td>João</td>
  <td>30</td>
  <td>Brasil</td>
</tr>
<tr>
  <td>Maria</td>
  <td>25</td>
  <td>Portugal</td>
</tr>
</table>

É válido relembrar que algumas dessas tags têm efeitos visuais que podem ser replicados utilizando CSS, o que é muitas vezes mais viável em termos de flexibilidade e manutenção do código. No entanto, é importante destacar que, embora o CSS possa realizar uma ampla variedade de formatações visuais, tags HTML como <h1> a <h6>, <mark>, <small>, <i>, <u>, <strong>, <hr> e <sub> possuem um significado semântico específico. Esse significado não apenas contribui para a acessibilidade, permitindo uma interpretação correta do conteúdo por parte de tecnologias assistivas, mas também ajuda os mecanismos de pesquisa a entenderem a estrutura e importância do conteúdo.

Portanto, ao desenvolver um website, é crucial encontrar um equilíbrio entre a estilização visual utilizando CSS e a manutenção da semântica adequada utilizando as tags HTML apropriadas. Dessa forma, podemos garantir uma experiência de usuário otimizada, tanto em termos de acessibilidade quanto de SEO "Search Engine Optimization" (Otimização para Mecanismos de Busca, em português).

Referências:

W3Schools, link: https://www.w3schools.com/html/default.asp