HTML Básico – Elementos

Continuando nosso estudo, agora que você sabe sobre a extensão, sobre o tipo de documento (Doctype) e sabe das tags de marcação dos elementos, vamos evoluir esse conhecimento.

Uma informação útil antes: Você já ouviu falar em sintaxe, certo?

No estudo da língua (idioma), é o estudo das regras que regem a construção de frases e é a parte da gramática que estuda a disposição das palavras na frase e das frases no discurso

Além disso, a sintaxe tem a ver com a relação lógica, entre as múltiplas combinações possíveis para transmitir um significado completo e compreensível.

Dito isso, nas linguagens de marcação e também de programação utilizamos esse termo “sintaxe” para determinar como a linguagem funciona, digamos assim.

Vou dar um exemplo pra você entender melhor, mas saiba também que um elemento HTML é um componente individual de um documento HTML.

Portanto, considerando a sintaxe, dizemos que esses elementos HTML representam a semântica ou significado.

Sintaxe do HTML

Por exemplo, vimos o elemento <title> que representa o título do documento.

Como já vimos também, a maior parte dos elementos HTML são dispostos com uma tag de início ou abertura, e outra de finalização ou fechamento.

Assim, entre essas tags temos um conteúdo que está diretamente associado ao contexto da tag.

É importante dizer também que essas tags podem conter o que chamamos de atributos que são usados para definir as propriedades do elemento.

Por exemplo, vimos que um parágrafo é definido pela tag <p> e poderíamos ter um atributo class que usamos para definir estilos, então ficaria assim:

Não se preocupe, no próximo post vamos falar um pouco mais sobre esses tais atributos.

Mas, como você pode ver na imagem, temos um elemento parágrafo que tem um atributo de classe (class), que possui o valor “texto-comum”.

Ou seja, dizemos que a classe desse parágrafo é “texto-comum”.

Obviamente, se eu disse que a maioria dos elementos HTML possui tag de abertura e fechamento, significa que alguns não precisam ser fechados.

Esses elementos que possuem somente uma tag são geralmente chamados de elementos vazios ou elementos de fechamento automático.

Tags HTML ou Elementos?

Talvez você tenha ficado confuso sobre essas nomenclaturas mas, tecnicamente, um elemento HTML é o conjunto composto pela tag de abertura, atributos, tag de fechamento entre outras coisas.

Contudo, você não comete nenhum pecado se chamar tudo de elemento HTML ou tag HTML, porque são termos intercambiáveis.

Já ouviu falar em Case-sensitive? Então vamos lá…

Diferenciação Maiúsculas e Minúsculas

Case-sensitive é um anglicismo que se refere a um tipo de análise tipográfica da informática.

Em língua portuguesa, significa algo como “sensível à caixa das letras” ou “sensível a maiúsculas e minúsculas”.

Calma, não quero abusar do seu português, só comparando termos…

O que eu quero dizer aqui é que os nomes das tags e seus atributos não diferenciam maiúsculas e minúsculas, mas os valores dos atributos sim.

Desse modo <p> ou <P> funcionam da mesma forma, mas class=”texto-comum” é diferente de class=”Texto-Comum”.

Para seguir um padrão, recomendo que você sempre use tags e atributos com letras minúsculas, até para padronizações de código.

Elementos HTML Vazios

Lembra que falamos deles? Então, vamos entender um pouquinho mais…

Esses elementos também chamados de tags de fechamento automático ou até nulos, não são tags de contêiner – isso significa que não têm conteúdo entre tags de abertura e fechamento.

Então, para ficar mais claro, vou te mostrar alguns elementos que não precisam de tags de fechamento.

Por exemplo, temos a tag <br> que é utilizada para quebrar linhas, mas há diversas outras como <img>, <input>, <link>, <meta>, <hr> e outras que você vai conhecer.

Um pequeno trecho HTML para fixar o conceito:

<p>Esse parágrafo contém <br> uma quebra de linha (line-break).</p>
<img src="/wp-content/uploads/2019/02/logo_am_300x87_gradiente-1.png" alt="Texto Representativo">
<br>
<input type="text" name="nome">
<hr>

Resultado:

Esse parágrafo contém
uma quebra de linha (line-break).

---

Perceba que temos 3 tags que não precisam de fechamento e que possuem os tais atributos que falamos – você vai perceber que são quase sempre em inglês.

Em teoria, você pode criar seus próprios atributos, mas esses atributos clássicos garantem que a tag HTML funcione e seja interpretada da forma correta – Sintaxe.

Aninhamento de Elementos HTML

A maioria dos elementos HTML podem ser aninhados, ou seja, podem estar dentro de outro – exceto, é claro, os elementos vazios.

Assim sendo, poderíamos representar essa aninhamento da seguinte forma:

<p>Aqui vai um parágrafo com um <b>Texto em Negrito</b> aninhado</p>
<p>Aqui vai um texto com <em>ênfase ou itálico</em> também aninhado.</p>
<p>Para fechar, aqui vai um <mark>texto destacado</mark> dentro da tag de parágrafo</p>

Resultado:

Aqui vai um parágrafo com um Texto em Negrito aninhado

Aqui vai um texto com ênfase ou itálico também aninhado.

Para fechar, aqui vai um texto destacado dentro da tag de parágrafo

Podemos chamar também esses elementos aninhados de elementos filhos.

Outra informação importante é que você precisa aninhar os elementos da forma correta, não invertendo a ordem os elementos.

Por exemplo, isso estaria correto:

<p><strong>Texto com outra tag que gera Negrito</strong></p>

Aqui vai um trecho com erro na ordem das tags:

<p><strong>Texto com outra tag que gera Negrito</p></strong>

Comentando partes do código HTML

Espero que você lembre que escrevemos um comentário no nosso código HTML usando no início do comentário o <!-- e terminando com -->.

Há diversas razões para você querer fazer comentários nos códigos, especialmente em termos de organização ou para deixar uma informação importante.

Assim, outro desenvolvedor, ou até você mesmo, no futuro poderá ler esses comentários e entender o que estava sendo feito ali.

Contudo, é importante dizer que esses comentário não são mostrados na sua página no navegador.

Aqui vai um trecho que demonstra como funcionam os comentários:

<!-- Isso é um comentário no HTML -->
<!-- Eles podem ter múltiplas linhas
       como você pode notar aqui -->
<p>Isso é um parágrafo normal.</p>

Outra coisa comum de fazermos é querer ocultar alguns elementos temporariamente, e podemos usar os comentário para fazer isso da seguinte forma:

<!-- Vamos ocultar uma imagem?
<img src="caminho/nomeimagem.jpg" alt="Legenda">
Precisamos agora fechar o comentário assim -->

Diferentes tipos de elementos

Os elementos HTML podem ser classificados em grupos e níveis, como níveis de bloco e os que chamamos de inline, que vamos falar mais adiante.

Os elementos de bloco mais utilizados são <div>, <p>, <h1> à <h6>, <form>, <ol>, <ul>, <li>, etc – geralmente esses contém diversos outros elementos aninados formando uma estrutura.

Entre os in-lines mais comuns temos o <img>, <a>, <span>, <strong>, <b>, <em>, <i>, <code>, <input>, <button>, entre outros.

Os elementos de bloco não devem ser colocados dentro de elementos in-line – Ex: Não deve colocar um <p> dentro de um <b>.

Navegação

<< HTML Básico – Primeiros PassosHTML Básico – Atributos >>