Documentação Oficial

Para consultas técnicas, recomenda-se utilizar as referências do W3C e da MDN Web Docs.

Sintaxe e Estrutura

Elementos HTML são delimitados por sinais de menor e maior, como <etiqueta>. A maioria funciona em pares — etqiueta de abertura e fechamento —, enquanto algumas são auto-fecháveis, como <br>.

Estrutura Mínima de um Documento

<html lang="pt-BR">
<cabeçalho>
    <meta charset="UTF-8">
    <título>Minha Primeira Página</título>
</cabeçalho>
<corpo>
    Conteúdo visível da página
</corpo>
</html>

Etiquetas Fundamentais

Cabeçalhos Hierárquicos

Disponíveis em seis níveis de importância, de <h1> a <h6>. Cada nível possui peso tipográfico diferente e ocupa linha própria.

<h1>Título Principal</h1>
<h2>Subtítulo</h2>
<h3>Seção</h3>

Parágrafos e Quebras

O elemento <p> agrupa texto em blocos com espaçamento automático. Para quebras de linha sem novo parágrafo, utiliza-se <br>.

<p>Primeiro bloco de texto.</p>
<p>Segundo bloco com<br>quebra forçada.</p>

Formatação Semântica de Texto

Efeito	Etiqueta Preferida	Alternativa
Destaque forte	<strong>	<b>
Ênfase	<em>	<i>
Texto removido	<del>	<s>
Inserção	<ins>	<u>

Separadores e Anotações

<!-- Linha horizontal -->
<hr>

<!-- Comentário oculto -->
<!-- Esta mensagem não aparece na página -->

Caracteres Especiais

Símbolo	Código
Espaço inquebrável	 
<	&lt;
>	&gt;
&	&amp;
©	&copy;
®	&reg;

Contêineres Genéricos

<div> cria blocos de nível de bloco (um por linha), enquanto <span> permite agrupamento em linha (múltiplos por linha).

Multimídia e Ligações

Inserção de Imagens

<img src="caminho/imagem.jpg" alt="Descrição acessível" título="Dica ao passar o mouse" largura="800" altura="600">

Atributos essenciais: origem (obrigatório), texto_alternativo, título, dimensões e borda.

Caminhos de Referência

Tipo	Notação	Exemplo
Mesmo diretório	nome.ext	foto.jpg
Subpasta	pasta/arquivo	imgs/foto.jpg
Diretório superior	../arquivo	../foto.jpg

Hiperligações

<a href="destino.html" alvo="_blank">Texto clicável</a>

Valores para alvo: _self (padrão, mesma janela), _blank (nova aba).

Tipos de Ligações

• Externa: URL completa (https://exemplo.com)
• Interna: caminho relativo (pagina.html)
• Âncora: #identificador para posição na página
• Download: arquivo ou compactado no href
• Funcional: mailto:email para correio

Exemplo de Âncora

<a id="topo"></a>
<!-- conteúdo longo -->
<a href="#topo">Voltar ao topo</a>

Listas

Não Ordenada

<ul>
    <li>Item sem numeração</li>
    <li>Outro elemento</li>
</ul>

Ordenada

<ol>
    <li>Primeiro passo</li>
    <li>Segundo passo</li>
</ol>

Definições

<dl>
    <dt>Termo</dt>
    <dd>Explicação detalhada do conceito</dd>
    <dd>Informação adicional</dd>
</dl>

Tabelas de Dados

Estrutura Básica

<table>
    <tr>
        <td>Célula A1</td>
        <td>Célula B1</td>
    </tr>
</table>

Cabeçalho e Agrupamento

<table>
    <thead>
        <tr><th>Produto</th><th>Preço</th></tr>
    </thead>
    <tbody>
        <tr><td>Caneta</td><td>R$ 2,50</td></tr>
    </tbody>
</table>

União de Células

Atributo	Função
colspan="n"	Expansão horizontal (colunas)
rowspan="n"	Expansão vertical (linhas)

<td colspan="2">Ocupa duas colunas</td>
<td rowspan="3">Ocupa três linhas</td>

Formulários Interativos

Contêiner de Dados

<form ação="/processar" método="post" nome="cadastro">
    <!-- controles do formulário -->
</form>

Campos de Entrada

Tipos de input

Valor de tipo	Comportamento
texto	Linha única de texto
senha	Caracteres mascarados
email	Validação de formato de correio
número	Valores numéricos com limites
data	Seletor de data
cor	Seletor de cor
arquivo	Upload de documentos
radio	Escolha única de grupo
caixa	Múltiplas seleções
intervalo	Controle deslizante
busca	Campo de pesquisa
enviar	Botão de submissão
redefinir	Limpa todos os campos
botão	Ação personalizada via script

Atributos Complementares

<input tipo="texto" nome="usuario" valor="" obrigatório
       placeholder="Digite seu nome" padrão="[A-Za-z]{3,}">

Rótulos e Associação

<rótulo para="campo-id">Descrição clicável</rótulo>
<input tipo="texto" id="campo-id" nome="campo">

Seleção e Texto Longo

Lista Suspensa

<select nome="país">
    <option valor="br" selecionado>Brasil</option>
    <option valor="pt">Portugal</option>
</select>

Área de Texto Expansível

<textarea nome="comentario" linhas="5" colunas="40">
Texto inicial opcional
</textarea>

Estados Especiais

Atributo	Efeito
oculto	Enviado sem exibição
somente_leitura	Visível mas não editável
desabilitado	Inacessível para interação

Elementos de Mídia

Vídeo

<video origem="clip.mp4" controles reproduzir_automaticamente muted>
    <origem src="clip.webm" tipo="video/webm">
</video>

Áudio

<audio origem="musica.mp3" controles loop>
    <origem src="musica.ogg" tipo="audio/ogg">
</audio>

Estruturação Semântica da Página

Elemento	Propósito
<cabeçalho>	Introdução ou navegação superior
<rodapé>	Informações de encerramento
<nav>	Bloco de navegação principal
<seção>	Divisão temática de conteúdo
<artigo>	Conteúdo independente e autocontido
<lateral>	Conteúdo tangencial (barra lateral)

Quadro Embutido

O elemento <iframe> incorpora documentos externos dentro da página atual.

<iframe origem="https://exemplo.com" nome="visualizador"
        largura="100%" altura="600" borda="0">
</iframe>

<a href="outra.html" alvo="visualizador">Carregar dentro do quadro</a>