Conhecendo a estrutura HTML
- #HTML
Primeiro ponto da nossa conversa, o famoso HTML não é uma linguagem de programação!!!!
HyperText Markup Language ou simplesmente HTML é uma linguagem de marcação, ou seja, ela se comunica com navegador de internet para assim você ver pode ver suas páginas. Ele é o responsável por estruturar as páginas web tanto simples como as páginas complexas.
Essa estruturação é feita a partir de uma série de elementos. A organização desses elementos é composta por três etapas fundamentais: tag de abertura; o conteúdo e tag de fechamento.
A Tag de abertura indica o ínicio do elemento, onde começa a produzir o efeito, são envolvidos entre parênteses angulares (< >), já conteúdo é a informação que irá dentro do elemento e Tag de fechamento sinaliza a onde aquele elemento se encerra, sendo envolvimento pela sequência de um parêntese angular + barra + parentes angular (</ >).
Exemplo:
TAG DE ABERTURA <body>
CONTEÚDO Aqui vai seu conteúdo podendo ser de infinitas formas.
TAG DE FECHAMENTO </body>
Um elemento pode conter outros elementos no seu conteúdo, isso é chamado de aninhamento. Os elementos devem estar adequadamente aninhados, abrindo e fechando corretamente para que fique claro onde começar um elemento e onde termina.
Exemplo:
<body>
<p>Aqui vai seu conteúdo podendo ser de infinitas formas.</p>
</body>
Os elementos em HTML podem ser categorizados em duas importantes categorias, os elementos em bloco e os elementos inline.
Elementos em blocos são geralmente estruturais na página, cada novo bloco irá aparecer em uma nova linha após outro elemento em bloco. Podemos considerar elementos em blocos por exemplo parágrafos <p>, listas <ul>, cabeçalho <head>.
Importante: um elemento em bloco pode ser aninhado dentro de outro elemento em bloco, mas nunca dentro de um elemento inline.
Já os blocos inline ou blocos em linhas, envolvem apenas parte do conteúdo, logo, um elemento inline não fará aparecer um nova linha no documento, exemplos de elementos inline são: ancora <a> e negrito <strong>.
Exemplo:
<body>
<p>Aqui vai seu conteúdo podendo ser de <strong>infinitas formas</strong>.</p>
</body>
Cabe ressaltar que usamos a referência de estrutura acima para fins didático, já que no HTML 5 as categorias em bloco e inline não são mais usadas devida a confusão muito comum que ocorria com os tios de caixas CSS com os mesmo nomes.
Atualmente no HTML 5 existe as seguintes categorias de conteúdo de elementos: conteúdo de metadados; conteúdo do fluxo; conteúdo de seção; conteúdo do título; conteúdo de frase; conteúdo incorporado; conteúdo interativo; raízes de corte; elementos associados ao formulário; elementos listados; elementos que podem ser enviados; elementos reajustáveis; elementos herdados de capitalização automática; elementos rotuláveis; conteúdo palpável e elementos de suporte a script.
Mas no HTML não existe somente os elementos descritos acima, que possuem um tag de abertura, conteúdo e tag de fechamento. Existe os elementos vazios, são compostos de uma única tag que é usada para inserir ou incorporar algo no documento. Por exemplo, à inclusão de imagens com img.
Exemplo:
<body>
<p>Aqui vai seu conteúdo podendo ser de <strong>infinitas formas</strong>.</p>
<img src=./imagens/estrutura-html.png>
</body>
Os elementos podem conter atributos que são informações extras, mas que não devem aparecer no conteúdo. Logo um atributo deve ter um espaço entre ele e o nome do elemento ou atributo anterior; o nome do atributo é seguido de sinal de igual e o valor do atributo deve estar com aspas de abertura e fechamento.
Exemplo:
<body>
<p class=“conteudo-geral”>Aqui vai seu conteúdo podendo ser de <strong>infinitas formas</strong>.</p>
<img src=./imagens/estrutura-html.png>
</body>
Existe também atributos sem valores, são conhecidos como atributos booleanos normalmente irão tornar um elemento relevante ou não, podendo ser usado para ocultar elementos da página até que uma ação seja realizada. Por exemplo, podemos desativar uma caixa de texto inserida na página sem ter que retirar o elemento.
Exemplo:
<body>
<p class=“conteudo-geral”>Aqui vai seu conteúdo podendo ser de <strong>infinitas formas</strong>.</p>
<img src=./imagens/estrutura-html.png>
<input type=”text” disabled>
</body>
Os valores dos atributos na sua grande maioria devem ser inseridos entre as aspas. Você pode usar as aspas simples ou duplas, isso é uma questão de estilo e não ira interferir no seu código, só lembre que as apas devem ser iguais na linha do código, a que começou tem que finalizar.
Até aqui você conheceu um pouco como é formado a estrutura do HTML, já entende que essa estrutura é composta de elementos, que existem diversos tipos de elementos com diversas finalidades.
Ao entender a importância dos elementos na estrutura HTML, você já pode vislumbrar como o HTML é importante para desenvolvimentos dos tipos mais diferentes de projetos e que um bom Dev tem que procurar entender o máximo possível sobre essa linguagem.
