HTML
Agora, vamos aprofundar o conhecimento, entendendo os Elementos e a Sintaxe HTML, além de abordar como tags e atributos funcionam na prática.
No post anterior, exploramos a estrutura básica de um documento HTML – veja para ter a base.
O que é Sintaxe HTML?
Talvez você já tenha ouvido falar em sintaxe no estudo da língua portuguesa.
Esse termo refere-se às regras que organizam as palavras dentro de frases, garantindo que tenham um significado claro e coerente.
Da mesma forma, HTML tem uma sintaxe própria, que define como os elementos devem ser estruturados para que os navegadores interpretem corretamente o código.
A sintaxe correta do HTML envolve:
✅ Tags de abertura e fechamento (exceto em elementos vazios)
✅ Uso de atributos para personalizar elementos
✅ Ordem correta de aninhamento das tags
🔹 Exemplo de Elemento HTML
<p class="texto-comum">Este é um parágrafo com uma classe aplicada.</p>
No exemplo acima:
<p>é a tag de abertura.class="texto-comum"é um atributo, que pode ser usado no CSS para estilizar o parágrafo.</p>é a tag de fechamento.
Tags HTML ou Elementos?
Você pode ter se perguntado: “O que são elementos HTML?”. De forma simples:
- Tag HTML →
<p>,<h1>,<a>, etc. - Elemento HTML → Toda a estrutura completa, incluindo tag de abertura, atributos, conteúdo e tag de fechamento.
Contudo, muitas pessoas usam os termos “tag” e “elemento” como sinônimos, e isso não está errado no uso cotidiano.
Case-sensitive: Maiúsculas e Minúsculas no HTML
Ao escrever código HTML, você pode notar que tags e atributos não diferenciam maiúsculas de minúsculas.
<p>e<P>são interpretados da mesma forma.- Já os valores de atributos diferenciam maiúsculas e minúsculas.
Por exemplo, class="texto-comum" é diferente de class="Texto-Comum".
Dica: Para manter um padrão no código, prefira sempre escrever tags e atributos em letras minúsculas.
Elementos HTML Vazios
Alguns elementos HTML não precisam de tag de fechamento.
Esses elementos são chamados de vazios ou self-closing.
Exemplos de Elementos Vazios
<br> <!-- Quebra de linha -->
<img src="imagem.jpg" alt="Descrição"> <!-- Imagem -->
<input type="text" name="nome"> <!-- Campo de entrada -->
<hr> <!-- Linha horizontal -->
Esses elementos não precisam de </br>, </img>, </input> ou </hr>, pois já são completos por si só.
Aninhamento de Elementos HTML
Elementos HTML podem conter outros elementos dentro deles. Esse processo é chamado de aninhamento.
Exemplo Correto
<p><strong>Texto em Negrito</strong> dentro de um parágrafo.</p>
Exemplo Incorreto
<p><strong>Texto em Negrito</p></strong>
🚨 Erro: A tag
<p>foi fechada antes da<strong>, o que quebra a sintaxe correta.
Dica: Sempre feche as tags na ordem em que foram abertas.
Comentários no HTML
Os comentários servem para adicionar notas no código sem que elas sejam exibidas no navegador.
Exemplo de Comentário
<!-- Isso é um comentário no HTML -->
<p>Este é um parágrafo visível.</p>
Comentários são úteis para organização e explicação do código.
Além disso, você pode usá-los para ocultar partes temporárias do código.
Bloco vs. Inline: Tipos de Elementos HTML
Os elementos HTML podem ser classificados como bloco ou inline:
✅ Elementos de Bloco → Ocupam toda a largura disponível.
Exemplos: <div>, <p>, <h1>, <ul>, <form>
✅ Elementos Inline → Ocupam apenas o espaço necessário.
Exemplos: <a>, <span>, <b>, <img>, <button>
Regra: Elementos de bloco não devem ser colocados dentro de elementos inline.
Conclusão
Agora você já entende melhor a sintaxe HTML, como aninhamento funciona e quais são os elementos vazios.
No próximo post, vamos explorar mais atributos HTML e como eles podem ser usados para personalizar os elementos.
Veja também a documentação do HTML Básico.
💬 Dúvidas? Deixe um comentário abaixo e compartilhe esse conhecimento! 🚀
