Anatomia do HTML
- #HTML
O desenvolvimento em HTML é realizado pela combinação de diversos elementos. Mas existe uma anatomia básica a ser seguida em um documento HTML, um mínimo necessário para que se possa desenvolver um bom documento .
Ao compreender a função desses elementos e como eles interagem com seu projeto, começa a ficar mais fácil pensar em HTML, ressalto que essa é uma estrutura mínima composta por seis elementos:
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8”>
<title> Anatomia HTML</title>
</head>
<body>
<p> Conteúdo do documento</p>
</body>
</html>
O primeiro elemento no código é o doctype <!DOCTYPE html> esse elemento não é uma tag do HTML e sim uma declaração para informar ao navegador qual é a versão do HTML utilizado no arquivo.
Antes da versão 5 do HTML eram feitos declarações extensas do Doctype, atualmente essa declaração não é mais obrigatória, mas a presença dela garante que o navegador se comporte de maneira mais adequada e precisa. Logo seu uso é essencial em qualquer documento ou melhor é sim obrigatório em qualquer documento que valorize as boas práticas, o perfeito funcionamento e a segurança do documento.
O segundo elemento é o html <html></html>, chamado de elemento raiz de um HTML documento ele vai envolver todo conteúdo. Ele é responsável por iniciar e finalizar o documento.
O head <head></head> é o cabeçalho do documento, atua com todo conteúdo que não é visível ao usuário. Vai apresentar a descrição da página e as palavras-chave que vai aparecer nos resultados das buscas, como também o head vai conter metadados sobre o documento, como título e links para scripts e folhas de estilos.
O elemento inline <meta charset=utf-8> vai ficar localizado dentro do head e será responsável pela codificação dos caracteres que o documento irá usar. O UTF-8 inclui a maioria dos caracteres das línguas humanas escritas, é isso mesmo das línguas!
Com isso esse meta charset consegue interpretar com qualquer conteúdo textual que estiver no documento.
o título <title></title> é outro elemento que fica dentro do head do documento, ele será responsável pela nomeação do documento, esse nome irá aparecer na guia do navegador e será usado também quando a página for salva nos favoritos do navegador.
E por último, esse elemento é o responsável por todo conteúdo que irá no seu documento ele é corpo de todo HTML <body></body>, ele é responsável por todo texto, imagens, áudios e vídeos e qualquer outra coisa em seu documento. Só vai existir apenas um documento <body> em todo documento.
Uma coisa importante que você deve ter em mente ao escrever seu código, é que os espaços em branco no HTML serão reduzidos em único espaço quando o código é renderizado.
Mas lembre-se ao usar os espaços você melhorar a legibilidade, logo criar um padrão de formatação é importante principalmente quando essa formatação é composta por boas práticas.
Você já deve ter reparado que os caracteres <, >, “,” e o & fazem parte da sintaxe do HTML, mas se você precisar incluí-los no texto terá que usar a equivalência chamada de referência de caractere. Essa referência de caractere equivalente é iniciada com & (e comercial) e finalizada com um ponto e vírgula (;).
Logo:
- < = <
- > = >
- “ = "
- ‘ = '
- & = &
Outra coisa que ajuda na formatação do seu documento e na compreensão é o uso de comentários ao longo do código, principalmente nos trabalhos colaborativos e/ou em códigos que você já trabalhou a muito tempo.
Para poder usar os comentários no HTML você deverá agrupá-los por meio dos marcadores especiais <!-- -->.
Os elementos apresentados neste texto são considerados o básico para um documento HTML, mas lembre-se que existem diversos outros elementos que irão tornar seu código funcional e atrativo.
Esse é apenas o início de uma longa caminhada.
