Um elemento HTML é um bloco de construção de um documento HTML (Hypertext Markup Language), que tem com função criar a estrutura e o conteúdo de uma página da web. As tag representa os elementos HTML e encontram-se entre colchetes angulares <>.
Por exemplo, a tag <h1> representa o elemento de título e a tag <p> representa um elemento de parágrafo. Os elementos HTML podem ter atributos, que fornecem informações adicionais sobre o elemento, como id e classe, e podem ter conteúdo entre as tags de abertura e fechamento.
Certamente, essa apresentação do assunto ficou bem explicado, mas vamos entrar nos detalhes.
Sintaxe do elemento HTML
O elemento HTML é tudo, desde a tag inicial até a tag final:
<tagname>Conteúdo da Tag</tagname><tag de abertura>Conteúdo<tag de fechamento>Exemplos de alguns elementos HTML:
<h1>Meu primeiro título</h1>
<p>Meu primeiro parágrafo</p>Pois bem, para ajudar um quadro para fixar
| Abertura da tag | Conteúdo do elemento | Fechamento da tag |
|---|---|---|
| <h1> | Meu primeiro título | </h1> |
| <p> | Meu primeiro parágrafo | </p> |
| <br> | none | none |
Nota: Alguns elementos HTML não possuem conteúdo (como o elemento <br>). Esses elementos são chamados de elementos vazios. Elementos vazios não possuem uma tag final!
Elementos HTML aninhados
Os elementos HTML podem ser aninhados (isso significa que os elementos podem conter outros elementos). Assim todos os documentos HTML consistem em elementos HTML aninhados. O exemplo a seguir contém quatro elementos HTML (<html>, <body>, <h1> e <p>):
<body>
<h1>Meu primeiro título</h1>
<p>Meu primeiro parágrafo</p>
</body>O elemento <body> define o corpo do documento. Ele tem uma tag inicial <body> e uma tag final </body>. Então, dentro do elemento <body> existem dois outros elementos: <h1> e <p>:
Assim como visto acima <h1> é o título principal e o <p> é um parágrafo.
Veja também:
Introdução rápida sobre CSS
Introdução rápida sobre Python
Introdução rápida sobre JavaScript
Passo a passo de como funciona a internet
JavaScript: acelere seu site Usando a Tag script
Nunca esqueça a tag final
Se você esquecer a tag de fechamento de um elemento HTML, isso poderá fazer com que o restante do conteúdo da página da Web, por consequente retorna incorretamente a análise e exibição.
Isso ocorre porque o navegador assume que todo o conteúdo após a tag de abertura do elemento faz parte desse elemento, até encontrar uma tag de fechamento ou outra tag de abertura para um elemento diferente.
Isso pode levar a problemas de layout inesperados, bem como quaisquer outros elementos que vierem depois da tag de fechamento ausente.
Assim elas trataram como se estivessem aninhados dentro do elemento da tag de fechamento ausente, e estilos e scripts também podem ser afetados.
Por exemplo, se você esquecer a tag de fechamento de um elemento <div>, quaisquer outros elementos que vierem após a tag de abertura <div> serão tratados como se estivessem aninhados dentro desse <div>, mesmo que não tenham a intenção de ser. Isso pode fazer com que o conteúdo seja exibido incorretamente ou não seja exibido.
Além disso, se faltar uma tag de fechamento para um elemento, também pode fazer com que o navegador consuma mais memória e ciclos de CPU, pois ele precisa continuar procurando a tag de fechamento ausente.
Isso pode fazer com que o navegador fique lento e sem resposta, e pode levar ao aumento do uso de memória e maior uso da CPU.
Certamente a exibição correta de alguns elementos HTML acontecerá, mesmo se você esquecer a tag final:
<html>
<body>
<p>This is a paragraph
<p>This is a paragraph
</body>
</html>No entanto, nunca confie nisso! Resultados inesperados e erros podem ocorrer se você esquecer a tag de fechamento como citado anteriormente.
Elementos HTML Vazios
Um elemento HTML sem conteúdo é conhecido como elemento vazio ou elemento void. Estes são elementos HTML que não requerem uma tag de fechamento e não possuem nenhum conteúdo entre as tags de abertura e fechamento.
Exemplos de elementos vazios incluem o elemento <br>, que cria uma quebra de linha, e o elemento <img>, que é usado para incorporar imagens em um documento HTML. Elementos vazios são escritos como tags de fechamento automático, com uma barra antes do colchete angular de fechamento, assim: <br/> ou <img src=”image.jpg” alt=”image”>
<p>This is a <br> paragraph with a line break.</p>Os elementos vazios são úteis para criar efeitos visuais ou para adicionar significado semântico a uma página da Web sem adicionar conteúdo. Eles também podem ser usados para criar espaço entre elementos ou para criar estrutura em um layout de página da web.
Curiosidade: Vale ressaltar que alguns elementos são considerados vazios no HTML5, mas nas versões anteriores do HTML não eram, como os elementos <meta> e <link>.
HTML não diferencia maiúsculas de minúsculas
O HTML não diferencia maiúsculas de minúsculas quando se trata de tags e atributos que compõem um documento HTML. Isso significa que as tags e atributos podem ser escritos em letras maiúsculas ou minúsculas, e o navegador irá interpretá-los da mesma forma.
Por exemplo, as duas linhas de código a seguir produzirão o mesmo resultado:
<p>Este é um parágrafo</p>Ou
<P> Este é um parágrafo </P>No entanto, vale a pena notar que o padrão HTML recomenda o uso de letras minúsculas para todas as tags e atributos.
Isso ocorre porque o uso de letras minúsculas pode tornar seu código HTML mais consistente e fácil de ler, além de facilitar a integração com outras tecnologias que diferenciam maiúsculas de minúsculas, como CSS e JavaScript.
Outro ponto a ter em mente é que o valor de um atributo diferencia maiúsculas de minúsculas, o que significa que o navegador trata de maneira diferente se estiver em letras maiúsculas ou minúsculas.
Veja o primeiro artigo do Tutorial: Estrutura Básica Do HTML
Mapa Mental para fixar o conteúdo
Conclusão
Você apendeu que usar os elementos HTML corretos e aninhá-los corretamente é essencial para criar uma página da Web bem acessível, codificada e fácil de navegar e entender.
Como esse artigo foi bem simples e pequeno o consumo do conteúdo apresentado é tranquilo de fazer. Além disso você pode sempre voltar para consultado.
Então é isso, vamos para o próximo assunto do tutorial.
Perguntas frequentes
Elementos HTML são os blocos de construção de um documento HTML e as tags são sua representação. Eles podem ter atributos e conteúdo e podem ser aninhados um dentro do outro para criar a estrutura de uma página da web
HTML não diferencia maiúsculas de minúsculas quando se trata de tags e atributos, mas o valor de um atributo diferencia maiúsculas de minúsculas.
Um elemento HTML vazio, também conhecido como elemento void, não requer uma tag de fechamento e não possui nenhum conteúdo entre as tags de abertura e fechamento.
