HTML é a linguagem padrão usada para criar e estruturar páginas web. Ele define o conteúdo da página por meio de marcação (tags).

Função principal:

• Estruturar informações: títulos, parágrafos, imagens, links, listas, formulários, tabelas, etc.

• Não define estilo visual – essa função é do CSS.

HTML é hierárquico e aninhado, ou seja, os elementos estão organizados como pai e filho. Por exemplo, uma seção pode conter um título, e esse título pode conter texto. Essa hierarquia cria uma árvore de elementos conhecida como DOM (Document Object Model).

2. Semântica

HTML moderno (especialmente a partir do HTML5) foca na semântica: dar significado ao conteúdo. Por exemplo:

• Usar uma marcação específica para artigos, rodapés, menus de navegação etc.

• Isso facilita o entendimento da página por buscadores, leitores de tela, e até sistemas de IA.

3. Separação de Conteúdo e Estilo

Uma boa prática é manter o HTML puro para estrutura e significado, e deixar a parte visual (cores, tamanhos, alinhamentos) para o CSS. Isso melhora a manutenção, acessibilidade e performance.

São as unidades básicas do HTML. Cada elemento representa algo na página: um título, uma lista, uma citação, uma seção, etc. Elementos podem conter outros elementos, formando estruturas complexas.

2. Atributos

São informações adicionais aplicadas aos elementos, que modificam seu comportamento. Por exemplo, um atributo pode definir:

• Um link para onde um botão leva.

• O texto alternativo de uma imagem.

• O identificador único de um item.

3. Metadados

Na parte "invisível" do HTML, há informações que descrevem a página: título, codificação de caracteres, links para estilos externos, dados para SEO e redes sociais.

Outra categoria é o conteúdo de seção, que serve para organizar a página em blocos significativos. Aqui entram elementos como cabeçalhos, rodapés, seções e áreas de navegação. Essa organização melhora tanto a acessibilidade quanto o entendimento semântico da estrutura da página.

Temos também o conteúdo de agrupamento, que abrange elementos usados para agrupar e organizar outros conteúdos relacionados. Exemplos são parágrafos, listas, blocos de citação e divisões genéricas.

O conteúdo incorporado inclui tudo que é adicionado de fora do documento principal, como imagens, vídeos, áudio e iframes. Esses elementos trazem recursos multimídia para a página e são fundamentais para tornar a web interativa e rica em conteúdo visual.

A categoria de conteúdo interativo é composta por elementos com os quais o usuário pode interagir diretamente, como botões, campos de formulário e links clicáveis. Eles são essenciais para a navegação e para a criação de experiências dinâmicas.

Por fim, o conteúdo de texto engloba todos os elementos que representam diretamente o texto em si, como negrito, itálico, citações, abreviações e trechos de código. Esses elementos ajudam a definir a forma e o significado do conteúdo textual, destacando partes importantes ou atribuindo significados especiais a trechos específicos.

• Web Components: Permitem criar elementos personalizados reutilizáveis.

• HTML Living Standard: É mantido de forma contínua pelo WHATWG, sempre se atualizando.

Ele segue um princípio de cascata: quando há múltiplas regras que se aplicam a um mesmo elemento, o navegador decide qual aplicar com base na especificidade, ordem e importância da regra.

Os seletores indicam quais elementos serão afetados por uma regra. Eles podem ser simples (por tipo, classe ou ID) ou complexos (combinando múltiplas condições).

2. Propriedades

Cada regra CSS define propriedades visuais. Por exemplo:

• Propriedades de texto (cor, fonte, espaçamento entre letras).

• Propriedades de caixa (largura, altura, margens, preenchimento, bordas).

• Propriedades de layout (como o elemento se posiciona em relação aos outros).

3. Modelo de Caixa (Box Model)

Todo elemento HTML, visualmente, é tratado como uma "caixa" com conteúdo, preenchimento (padding), borda e margem. O domínio desse modelo é essencial para criar layouts precisos.

• Inline: diretamente no elemento (menos recomendado).

• Interno: dentro da própria página, mas em bloco separado.

• Externo: em um arquivo .css vinculado ao HTML (a forma mais organizada e escalável).

• Flexbox: organiza elementos em linha ou coluna, com controle de alinhamento e distribuição de espaço.

• Grid Layout: permite criar layouts bidimensionais mais sofisticados, com linhas e colunas controladas de forma precisa.

Essas ferramentas substituíram métodos antigos como floats e tabelas, oferecendo mais controle e responsividade.

• Media Queries: regras que mudam o estilo dependendo da largura da tela, orientação ou tipo de dispositivo.

• Unidades relativas: como em, rem, % e vw/vh, que adaptam melhor o conteúdo ao tamanho do viewport.

• Separar estilo de conteúdo.

• Nomear classes de forma clara.

• Utilizar convenções como BEM (Block Element Modifier) para organização.

• Minimizar redundância e reaproveitar estilos.