📘 Manual Didático Completo de HTML5
🔹 1. O que é HTML5?
HTML (HyperText Markup Language) é a linguagem que estrutura o
conteúdo da web.
HTML5 é a versão mais recente, trazendo:
o Semântica → melhor descrição do conteúdo.
o Mídia nativa → vídeo, áudio, gráficos sem plugins.
o APIs integradas → geolocalização, armazenamento local, drag & drop,
canvas etc.
👉 Exemplo de página mínima em HTML5:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Página de Exemplo</title>
</head>
<body>
<h1>Olá, mundo!</h1>
<p>Este é meu primeiro site em HTML5.</p>
</body>
</html>
🔹 2. Estrutura Básica de um Documento
<!DOCTYPE html> → define HTML5.
<html> → raiz do documento.
<head> → informações sobre a página (não visíveis diretamente).
<body> → conteúdo exibido para o usuário.
👉 Exemplo:
<head>
<meta charset="UTF-8"> <!-- Suporte a acentos -->
<meta name="viewport" content="width=device-width, initial-
scale=1.0"> <!-- Responsividade -->
<title>Minha Página</title>
</head>
🔹 3. Texto e Cabeçalhos
<h1> a <h6> → títulos hierárquicos.
<p> → parágrafo.
<strong> → destaque forte (semântico, equivalente a negrito).
<em> → ênfase (semântico, equivalente a itálico).
<mark> → marcação de texto.
<blockquote> → citação em bloco.
<code> → código-fonte.
<pre> → preserva espaçamento e quebras.
👉 Exemplo:
<h1>Título Principal</h1>
<p>Este é um <strong>texto importante</strong> e este é <em>texto em
destaque</em>.</p>
<blockquote>"HTML5 mudou a web."</blockquote>
<pre>
function ola() {
console.log("Olá, mundo!");
}
</pre>
🔹 4. Links e Navegação
<a href="url"> → cria link.
target="_blank" → abre em nova aba.
href="#id" → link interno (âncora).
Pode envolver texto ou imagens.
👉 Exemplo:
<a href="https://www.w3schools.com/html/">Visite o W3Schools</a>
<a href="#sobre">Ir para a seção Sobre</a>
🔹 5. Imagens e Mídias
<img src="caminho" alt="Descrição">
<video> → suporta MP4, WebM, Ogg.
<audio> → suporta MP3, Ogg, WAV.
<iframe> → embutir sites externos (YouTube, mapas etc.).
👉 Exemplo:
<img src="foto.jpg" alt="Descrição da foto" width="300">
<video controls width="400">
<source src="video.mp4" type="video/mp4">
Seu navegador não suporta vídeo.
</video>
<audio controls>
<source src="musica.mp3" type="audio/mpeg">
Seu navegador não suporta áudio.
</audio>
<iframe width="560" height="315"
src="https://www.youtube.com/embed/abc123"></iframe>
🔹 6. Listas
Não ordenada (<ul>): com marcadores.
Ordenada (<ol>): numerada.
Definição (<dl>): termos e descrições.
👉 Exemplo:
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<ol>
<li>Passo 1</li>
<li>Passo 2</li>
</ol>
<dl>
<dt>HTML</dt>
<dd>Linguagem de marcação</dd>
</dl>
🔹 7. Tabelas
<table> → tabela.
<tr> → linha.
<td> → célula.
<th> → cabeçalho.
<caption> → legenda.
👉 Exemplo:
<table border="1">
<caption>Notas dos Alunos</caption>
<tr>
<th>Nome</th>
<th>Nota</th>
</tr>
<tr>
<td>Ana</td>
<td>9.5</td>
</tr>
<tr>
<td>João</td>
<td>8.7</td>
</tr>
</table>
🔹 8. Formulários
<form> → cria formulário.
<input> → diferentes tipos: text, email, password, number, date, range.
<textarea> → texto longo.
<select> → lista suspensa.
<button> → botão.
<label> → rótulo acessível.
👉 Exemplo:
<form action="/enviar" method="post">
<label for="nome">Nome:</label>
<input type="text" id="nome" name="nome" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<label for="idade">Idade:</label>
<input type="number" id="idade" name="idade" min="1" max="120">
<label for="mensagem">Mensagem:</label>
<textarea id="mensagem" name="mensagem"></textarea>
<label for="curso">Escolha um curso:</label>
<select id="curso" name="curso">
<option value="html">HTML</option>
<option value="css">CSS</option>
</select>
<button type="submit">Enviar</button>
</form>
🔹 9. Estrutura Semântica
HTML5 trouxe tags semânticas para dar significado ao conteúdo:
<header> → cabeçalho.
<nav> → navegação.
<main> → conteúdo principal.
<section> → seção temática.
<article> → artigo independente.
<aside> → conteúdo lateral.
<footer> → rodapé.
👉 Exemplo:
<header>
<h1>Meu Site</h1>
<nav>
<a href="#home">Início</a>
<a href="#sobre">Sobre</a>
</nav>
</header>
<main>
<article>
<h2>Notícia</h2>
<p>Conteúdo do artigo...</p>
</article>
</main>
<footer>
<p>© 2025 - Todos os direitos reservados.</p>
</footer>
🔹 10. Novos Recursos do HTML5
Canvas → desenhos e gráficos com JavaScript.
<canvas id="meuCanvas" width="200" height="100"></canvas>
<script>
const c = document.getElementById("meuCanvas");
const ctx = c.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(20, 20, 150, 50);
</script>
SVG → gráficos vetoriais escaláveis.
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3"
fill="red"/>
</svg>
Geolocalização (via JS):
<script>
navigator.geolocation.getCurrentPosition(function(pos) {
alert("Latitude: " + pos.coords.latitude + " | Longitude: " +
pos.coords.longitude);
});
</script>
Local Storage (armazenamento no navegador):
<script>
localStorage.setItem("nome", "Ana");
alert(localStorage.getItem("nome"));
</script>
🔹 11. Boas Práticas
✅ Usar tags semânticas.
✅ Sempre incluir alt em imagens.
✅ Usar meta viewport para responsividade.
✅ Validar o código no W3C Validator.
✅ Escrever código bem identado e organizado.
🔹 12. Exemplo Completo de Página com HTML5
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Manual HTML5</title>
</head>
<body>
<header>
<h1>Exemplo de Página Completa</h1>
<nav>
<a href="#sobre">Sobre</a>
<a href="#contato">Contato</a>
</nav>
</header>
<main>
<section id="sobre">
<h2>Sobre o HTML5</h2>
<p>O HTML5 é a versão mais recente do HTML, trazendo novos
recursos para a web moderna.</p>
</section>
<article>
<h2>Notícia Recente</h2>
<p>Estudos mostram que HTML5 é a base de 99% dos sites
atuais.</p>
</article>
<aside>
<h3>Links Úteis</h3>
<ul>
<li><a href="https://www.w3schools.com/html/">W3Schools
HTML</a></li>
</ul>
</aside>
</main>
<footer>
<p>© 2025 - Manual HTML5</p>
</footer>
</body>
</html>
👉 Esse manual agora cobre todos os pontos essenciais de HTML5, com explicação +
exemplos práticos.
Ele já pode ser usado como apostila de estudos ou guia de referência rápida.
Você prefere que eu organize isso em um arquivo PDF ilustrado (tipo apostila de
curso), ou em um site navegável de exemplo, para praticar direto no navegador?
# Lista completa de tags HTML5 com descrição
# Fonte: especificação HTML Living Standard (WHATWG) - resumida
em português
all_tags = [
("<a>", "Define um hiperlink."),
("<abbr>", "Representa uma abreviação ou acrônimo."),
("<address>", "Fornece informações de contato."),
("<area>", "Define uma área clicável em um mapa de imagem."),
("<article>", "Conteúdo independente e autocontido."),
("<aside>", "Conteúdo secundário ou complementar."),
("<audio>", "Incorpora conteúdo de áudio."),
("<b>", "Texto em negrito sem importância especial."),
("<base>", "Especifica a URL base para links relativos."),
("<bdi>", "Isola parte do texto para controle de direção (bidi)."),
("<bdo>", "Sobrescreve a direção do texto (esquerda-direita ou
direita-esquerda)."),
("<blockquote>", "Bloco de citação de outra fonte."),
("<body>", "Corpo do documento HTML."),
("<br>", "Quebra de linha."),
("<button>", "Botão clicável."),
("<canvas>", "Área para desenho gráfico via scripts."),
("<caption>", "Legenda de uma tabela."),
("<cite>", "Título de uma obra citada."),
("<code>", "Representa código de computador."),
("<col>", "Define uma coluna em uma tabela."),
("<colgroup>", "Agrupa colunas em uma tabela."),
("<data>", "Vincula um valor de dado a um conteúdo legível."),
("<datalist>", "Lista de opções predefinidas para um campo
<input>."),
("<dd>", "Descrição em uma lista de definição."),
("<del>", "Texto que foi removido."),
("<details>", "Seção expansível/recolhível."),
("<dfn>", "Marca a definição de um termo."),
("<dialog>", "Caixa de diálogo ou janela modal."),
("<div>", "Container genérico de bloco."),
("<dl>", "Lista de definição."),
("<dt>", "Termo em uma lista de definição."),
("<em>", "Texto enfatizado."),
("<embed>", "Incorpora conteúdo externo (ex. plugin)."),
("<fieldset>", "Agrupa elementos em um formulário."),
("<figcaption>", "Legenda de uma figura."),
("<figure>", "Conteúdo gráfico, como imagem ou ilustração."),
("<footer>", "Rodapé de uma seção ou página."),
("<form>", "Formulário de entrada de dados."),
("<h1>–<h6>", "Cabeçalhos/títulos de seções."),
("<head>", "Contém metadados do documento."),
("<header>", "Cabeçalho de seção ou página."),
("<hgroup>", "Agrupa cabeçalhos (usado para títulos
compostos)."),
("<hr>", "Linha temática (separador)."),
("<html>", "Elemento raiz do documento HTML."),
("<i>", "Texto em itálico, usado para ênfase diferenciada."),
("<iframe>", "Incorpora outra página HTML."),
("<img>", "Imagem."),
("<input>", "Campo de entrada de dados."),
("<ins>", "Texto inserido."),
("<kbd>", "Indica entrada do usuário (teclado)."),
("<label>", "Rótulo associado a campo de formulário."),
("<legend>", "Legenda para <fieldset>."),
("<li>", "Item de lista."),
("<link>", "Vincula recursos externos (ex. CSS)."),
("<main>", "Conteúdo principal do documento."),
("<map>", "Mapa de imagem."),
("<mark>", "Texto destacado."),
("<meta>", "Metadados do documento."),
("<meter>", "Representa uma medição escalar (ex. progresso
parcial)."),
("<nav>", "Seção de navegação."),
("<noscript>", "Conteúdo alternativo para quando scripts não
estão ativos."),
("<object>", "Conteúdo incorporado como mídia ou applet."),
("<ol>", "Lista ordenada."),
("<optgroup>", "Agrupa opções em uma lista suspensa."),
("<option>", "Opção dentro de <select> ou <datalist>."),
("<output>", "Saída de cálculo ou ação de script."),
("<p>", "Parágrafo."),
("<picture>", "Container para imagens responsivas."),
("<pre>", "Texto pré-formatado."),
("<progress>", "Indicador de progresso de uma tarefa."),
("<q>", "Citação curta em linha."),
("<rp>", "Fornece parênteses para fallback em anotações Ruby."),
("<rt>", "Texto de anotação em Ruby (ex. pronúncia)."),
("<ruby>", "Anotação de pronúncia (ruby annotation)."),
("<s>", "Texto que não é mais relevante ou válido."),
("<samp>", "Saída de programa ou sistema."),
("<script>", "Script embutido ou externo (JavaScript)."),
("<search>", "Define uma área de pesquisa."),
("<section>", "Seção genérica de conteúdo."),
("<select>", "Lista suspensa de opções."),
("<small>", "Texto em tamanho reduzido, notas de rodapé."),
("<source>", "Fonte alternativa de mídia (<audio>, <video>,
<picture>)."),
("<span>", "Container em linha genérico."),
("<strong>", "Texto forte, geralmente em negrito com ênfase."),
("<style>", "Define estilos CSS."),
("<sub>", "Texto subscrito."),
("<summary>", "Título de <details>."),
("<sup>", "Texto sobrescrito."),
("<table>", "Tabela de dados."),
("<tbody>", "Corpo de uma tabela."),
("<td>", "Célula de dados em tabela."),
("<template>", "Conteúdo de template reutilizável."),
("<textarea>", "Área de texto multilinha."),
("<tfoot>", "Rodapé de uma tabela."),
("<th>", "Célula de cabeçalho em tabela."),
("<thead>", "Cabeçalho de uma tabela."),
("<time>", "Representa data ou hora."),
("<title>", "Título do documento (aparece na aba/navegador)."),
("<tr>", "Linha em tabela."),
("<track>", "Faixa de texto (legendas, descrições em
<video>/<audio>)."),
("<u>", "Texto sublinhado, geralmente semântica de anotação não
padrão."),
("<ul>", "Lista não ordenada."),
("<var>", "Representa variável em contexto matemático ou
programação."),
("<video>", "Incorpora vídeo."),
("<wbr>", "Sugere quebra de linha opcional.")
]
df_all = pd.DataFrame(all_tags, columns=["Tag", "Descrição"])
import caas_jupyter_tools
caas_jupyter_tools.display_dataframe_to_user("Lista completa de tags
HTML5", df_all)
