Conceitos

HT = HyperText/ Hiper Texto
M = Markup
L = Language

Elementos:

- Abertura da Tag;
- Conteúdo da Tag;
- Fechamento da Tag.

Elementos Vazios:

<img src="" alt="">
<input type="password">
<input type="text">
<input type="button">
<input type="color">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="image">
<input type="radio">
<input type="number">
<input type="checkbox">
Entre outras...

Atributos HTML

- Informação Extra
- Configuração

src = atributo
"" = o que vai ter nesse atributo

<img src="conteúdo vem aqui" alt="">

Atributo Booleano:

Não precisa de conteúdo
<disabled> = Desabilitar um atributo.

Aspas:

- Omissão: pode ocorrer ao usar " = " em alguns casos;
- Simples (pode dar problema com abreviações);
- Duplas (melhor prática).

Usa-se <a> = para links;
href = para onde o link vai;
target="_blank" = abre o link em uma nova guia.

Atributos Globais

<class> além de classificar as Tags, é usada para aplicar estilo css e também para acessar com o Java Script.
<contenteditable> usado para editar o conteúdo da página, porém não é mantido após salvar.
<data-*> usado para expandir os tipos de atributos que podemos usar para fazer mais tarde lógica no Java Script , utilizado em css também.
<hidden> usado para esconder uma Tag.
<id> usado apenas 1 por Tag para identificação, para também mais tarde usar no Java Script e css.
<style> aplica a estilização na Tag, normalmente não se usa-se style dentro da Tag, mas sim em arquivos externos.
<tabindex> usado para ordenar o Tab na página.
<tittle> serve para definir um título para a Tag, quando colocamos o mouse descansando em cima do conteúdo da página.
<strong> deixa em negrito
<b> deixa em negrito
<p> Serve para escrever parágrafos
<em> serve para dar ênfase.

Caracteres Reservados

<br> quebra linha;
&nbsp deixa um pequeno recuo, é cumulativo;
< / &gt o &lt é usado para que apareça < no texto, o &gt é usado para que apareça > no texto;
&quot é usado para que apareça " (aspas duplas) no texto;
&apos é usado para que apareça ' (aspas simples) no texto;

Anatomia de um documento HTML

Para iniciar um documento HTML faremos a abertura dele da seguinte forma:

<!DOCTYPE html>
<html> (elemento root/raiz)
      <head>
           <title>
                  Título da página
           </title>
      </head>
           Pode haver mais configurações da página como por exemplo, utf-8 que diz que o documento aceita a maior parte dos caracteres possíveis.
      <body>
           Conteúdo visual
      </body>
</html>

<!DOCTYPE html> Utilizado para que alguns navegadores identifique que a linguagem que está sendo trabalhada é HTML5.
<html> Ela vai conter dois elementos, sendo eles o <head> e </head>, o <html> é o elemento que dá início à cadeia
<head> Contém informações importantes da página, mas não de fato o que é visto pelo usuário.
<title> Abriga o título da página;
<body> Contém informações, dados, textos que o usuário pode ver;
lang define a linguagem do site/documento;
meta configura metadados como charset="utf-8" para definir os tipos de caracteres permitidos, ou name="viewport" define que o site será visto tanto em dispsitivos móveis quanto em dispsitivos maiores, exemplo desktop;

Para que não tenha que digitar tudo isso sempre ao iniciar um novo documento, basta digitar " ! "
O VSCode entende e completa.