Deve-se adicionar ao topo de um arquivo HTML a versão da linguagem HTML que está sendo usada por aquela página. A última versão do HTML lançada é a versão 5, e informamos isso em nosso arquivo dessa forma:
<!DOCTYPE html>
Não precisamos, no caso da versão 5, dizer que é a versão 5, pois o browser ao "ler" a tag acima já identifica que a versão do html é a última versão lançada. O ponto de exclamação e DOCTYPE escrito em maiúsculas é importante, principalmente para browsers antigos. O "html" pode ser escrito tanto em maiúsculas quanto em minúsculas.
Uma estrutura básica de uma página html tem mais ou menos esse formato:
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<link rel="stylesheet" href="">
<meta charset="UTF-8">
<!--head contents-->
</head>
<body>
<!--body contents-->
</body>
</html>
Relembrando que <!----> são comentários em html (assim como "#blablabla" é um comentário em Python), e servem para orientar o desenvolvedor que está lendo o código.
Qualquer informação sobre a página deve estar dentro da tag <head>. Em <title>, mudamos o título da página que é mostrada na aba do navegador. No caso da aba de tecnologia da Bastter, ficaria <title>Tecnologia - Bastter.com</title>.
A tag <link> com o atributo rel="stylesheet" indica que estou usando um arquivo externo para estilizar minha página, um arquivo CSS, que iremos ver em breve.
<meta charset="UTF-8"> informa a codificação de caracteres usada na minha página. A grande maioria das páginas HTML usa a codificação UTF-8. Caso seja omitido ou usada outra codificação, a página poderá renderizar as letras de uma forma não muito esperada.
Na tag <body> fica o corpo do html, que é o que realmente será renderizado pelo navegador e visto pelo usuário. Em <body> que são usadas as tags que vimos até o momento, dos tópicos 1.1 ao 1.4.
O papel de cada tag acima e de outras tags pode ter parecido bastante abstrato até o momento mas isso fica mais claro com a prática. Iremos ver a utilidade real do assunto abordado nesta página quando começarmos a abordar estilização em tópicos seguintes.
Este foi um post curtinho mas meio que finaliza o assunto HTML em seu aspecto mais cru. Em seguida iremos ver CSS e as tags HTML parecerão menos abstratas.
