HTML5

Apresentação

Este aula foi planejada para introduzir (ou revisar) os estudantes aos fundamentos do HTML5, partindo dos conceitos mais básicos até elementos mais estruturados e próximos da prática de desenvolvimento de aplicações para a Web. O foco está na compreensão do papel do HTML na construção de páginas e interfaces, no uso correto da estrutura do documento, nas tags mais importantes, na semântica introduzida pelo HTML5 e na criação de formulários.

Objetivos da aula

Ao final desta aula, o estudante deverá ser capaz de:

Compreender o que é HTML5 e qual o seu papel no desenvolvimento Web;
Identificar a estrutura básica de um documento HTML5;
Utilizar corretamente as principais tags de marcação;
Organizar páginas utilizando elementos semânticos do HTML5;
Criar formulários simples e funcionais com os principais controles de entrada.

Competências trabalhadas

Leitura e interpretação de código HTML;
Produção de páginas estáticas estruturadas;
Organização lógica e semântica de conteúdo;
Aplicação de boas práticas introdutórias no desenvolvimento Web;
Preparação para integração posterior com CSS3 e JavaScript.

Recursos necessários

Laboratório com computadores;
Navegador atualizado;
Editor de código, preferencialmente VS Code;
Projetor ou tela para demonstração;
Pasta de aula contendo um arquivo index.html.

Conceitos fundamentais do HTML5

HTML significa HyperText Markup Language. Trata-se de uma linguagem de marcação, não de uma linguagem de programação. Seu objetivo é estruturar o conteúdo de páginas Web por meio de elementos chamados tags.

A ideia central do HTML é indicar ao navegador o significado estrutural de cada parte do conteúdo: títulos, parágrafos, listas, links, imagens, formulários e áreas da página.

A seguir, exemplos introdutórios.

Exemplo 1 — Texto simples em HTML

Meu primeiro conteúdo em HTML.

Explicação

Esse conteúdo isolado pode até ser interpretado pelo navegador, mas não constitui um documento HTML completo. Ele mostra que o navegador consegue exibir texto puro, porém sem estrutura formal. Serve para demonstrar que HTML não é apenas texto visível, mas uma forma organizada de marcação.

Exemplo 2 — Uso de uma tag simples

<p>Este é um parágrafo em HTML.</p>

Explicação

A tag <p> representa um parágrafo.
Temos aqui:

tag de abertura: <p>
conteúdo: Este é um parágrafo em HTML.
tag de fechamento: </p>

Esse modelo abertura + conteúdo + fechamento é a forma mais comum dos elementos HTML.

Exemplo 3 — Título principal

<h1>Título principal da página</h1>

Explicação

A tag <h1> representa o título mais importante da página. Em HTML, os títulos vão de <h1> até <h6>, em ordem hierárquica. O <h1> deve ser usado para o tema principal do conteúdo.

Exemplo 4 — Elemento com atributo

<p title="Informação adicional">Passe o mouse sobre este texto.</p>

Explicação

O atributo title adiciona uma informação complementar ao elemento. Quando o usuário passa o mouse sobre o texto, o navegador exibe essa informação em forma de dica. Esse exemplo mostra que os elementos HTML podem possuir atributos, que são propriedades adicionais.

Exemplo 5 — Documento com mais de um elemento

<h1>Bem-vindo</h1>
<p>Esta página foi criada para estudar HTML5.</p>

Explicação

Aqui há dois elementos distintos:

um título principal;
um parágrafo.

Esse exemplo mostra que documentos HTML são formados por vários elementos organizados em sequência.

Exemplo 6 — HTML organiza conteúdo, não aparência

<h1>Cadastro de Alunos</h1>
<p>Preencha os campos abaixo.</p>

Explicação

Esse trecho estrutura o conteúdo, mas não define cor, tamanho ou posicionamento visual sofisticado. Isso é importante porque:

HTML cuida da estrutura;
CSS cuida da apresentação;
JavaScript cuida do comportamento.

Exemplo 7 — Comentário em HTML

<!-- Este comentário não aparece na página -->
<p>Texto visível para o usuário.</p>

Explicação

Comentários são usados para registrar observações no código. Eles não são exibidos na página. São úteis para:

documentar trechos;
organizar o desenvolvimento;
facilitar manutenção do código.

Exemplo 8 — Espaços em branco no HTML

<p>Texto     com     vários     espaços.</p>

Explicação

Mesmo que o desenvolvedor escreva vários espaços no código, o navegador geralmente renderiza apenas um espaço visível. Isso mostra que o HTML possui regras próprias de interpretação do conteúdo textual.

Exemplo 9 — Quebra de linha

<p>Linha 1<br>Linha 2</p>

Explicação

A tag <br> força uma quebra de linha dentro do mesmo parágrafo. Ela é uma tag vazia, isto é, não precisa de fechamento separado no HTML5. Deve ser usada quando realmente se deseja uma quebra de linha dentro de um mesmo bloco textual.

Exemplo 10 — Estrutura mínima de conteúdo marcado

<h1>HTML5</h1>
<p>HTML5 é a base estrutural das páginas Web modernas.</p>
<p>Com ele, organizamos textos, imagens, listas, formulários e seções.</p>

Explicação

Esse exemplo reúne três elementos básicos para mostrar a função essencial do HTML: organizar informação de forma compreensível para o navegador, para mecanismos de busca e para tecnologias assistivas.

Estrutura básica de um documento HTML5

Todo documento HTML5 deve seguir uma estrutura formal. Essa estrutura ajuda o navegador a interpretar corretamente o conteúdo, o idioma, a codificação de caracteres e o título da página.

A seguir, apresentam-se dez exemplos progressivos.

Exemplo 1 — Estrutura mínima completa

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <title>Minha Página</title>
</head>
<body>
    <h1>Olá, mundo!</h1>
</body>
</html>

Explicação

Esse é o modelo fundamental de um documento HTML5.

<!DOCTYPE html> informa ao navegador que o documento usa HTML5;
<html lang="pt-BR"> indica que o idioma principal é português do Brasil;
<head> contém metadados;
<meta charset="UTF-8"> define a codificação correta dos caracteres;
<title> define o título exibido na aba do navegador;
<body> contém o conteúdo visível.

Exemplo 2 — Documento com dois parágrafos

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <title>Exemplo de Parágrafos</title>
</head>
<body>
    <h1>Aula de HTML</h1>
    <p>Este é o primeiro parágrafo.</p>
    <p>Este é o segundo parágrafo.</p>
</body>
</html>

Explicação

Mostra como a estrutura básica pode acomodar vários elementos dentro do <body>. O corpo da página é a área onde ficam os elementos visíveis para o usuário.

Exemplo 3 — Inclusão de meta descrição

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="description" content="Página de introdução ao HTML5.">
    <title>Introdução ao HTML5</title>
</head>
<body>
    <h1>Introdução ao HTML5</h1>
    <p>Esta página apresenta conceitos iniciais.</p>
</body>
</html>

Explicação

A meta tag com name="description" fornece uma descrição da página. Ela pode ser utilizada por mecanismos de busca e sistemas de indexação. É uma boa prática estrutural.

Exemplo 4 — Meta viewport para responsividade

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Página Responsiva</title>
</head>
<body>
    <h1>Layout inicial</h1>
    <p>Esta página foi preparada para melhor adaptação em dispositivos móveis.</p>
</body>
</html>

Explicação

A meta tag viewport é importante para o comportamento em celulares e tablets. Embora a adaptação visual dependa principalmente do CSS, essa configuração é parte da base correta de páginas Web modernas.

Exemplo 5 — Estrutura com comentário organizacional

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <title>Estrutura Comentada</title>
</head>
<body>
    <!-- Conteúdo principal da página -->
    <h1>Estrutura HTML5</h1>
    <p>Os comentários ajudam a documentar o código.</p>
</body>
</html>

Explicação

Além da estrutura padrão, o comentário serve como apoio de manutenção. É útil em atividades didáticas para mostrar a função de cada bloco.

Exemplo 6 — Título da aba diferente do título visível

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <title>Portal do Curso</title>
</head>
<body>
    <h1>Curso Técnico em Informática para Internet</h1>
</body>
</html>

Explicação

O conteúdo de <title> aparece na aba do navegador. Já o conteúdo de <h1> aparece no corpo da página. Eles podem ser iguais, mas não precisam ser. Cada um possui função própria.

Exemplo 7 — Estrutura com lista no corpo

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <title>Lista de Tecnologias</title>
</head>
<body>
    <h1>Tecnologias Web</h1>
    <ul>
        <li>HTML5</li>
        <li>CSS3</li>
        <li>JavaScript</li>
    </ul>
</body>
</html>

Explicação

Mostra que qualquer conteúdo visível, como listas, títulos e parágrafos, deve ficar dentro de <body>. O <head> não é usado para conteúdo visível ao usuário.

Exemplo 8 — Estrutura com imagem

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <title>Imagem na Página</title>
</head>
<body>
    <h1>Exemplo com imagem</h1>
    <img src="imagem.jpg" alt="Descrição da imagem">
</body>
</html>

Explicação

A imagem faz parte do conteúdo visível e, por isso, fica no <body>. O atributo alt é importante para acessibilidade e para situações em que a imagem não carrega.

Exemplo 9 — Estrutura com link

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <title>Links em HTML</title>
</head>
<body>
    <h1>Site da Escola</h1>
    <p><a href="https://www.example.com">Acessar página institucional</a></p>
</body>
</html>

Explicação

O link é inserido por meio da tag <a>. O atributo href define o endereço de destino. O conteúdo entre <a> e </a> é o texto clicável.

Exemplo 10 — Estrutura mais completa e correta para projetos iniciais

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="description" content="Página inicial do estudo de HTML5.">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Estudo de HTML5</title>
</head>
<body>
    <h1>Estudo de HTML5</h1>
    <p>Este documento segue a estrutura padrão recomendada para páginas HTML5.</p>
</body>
</html>

Explicação

Esse modelo é adequado para praticamente todo exercício introdutório. Ele reúne as principais convenções de base:

declaração de tipo;
idioma;
codificação;
viewport;
título;
conteúdo estruturado no corpo.

Principais tags do HTML5

Nesta etapa, o estudante entra em contato com as tags mais usadas na construção de páginas Web. As tags apresentadas a seguir são essenciais para textos, organização de conteúdo, links, mídia e agrupamento de informação.

Exemplo 1 — Títulos hierárquicos

<h1>Título principal</h1>
<h2>Subtítulo</h2>
<h3>Seção secundária</h3>
<h4>Subseção</h4>
<h5>Detalhe</h5>
<h6>Observação complementar</h6>

Explicação

As tags <h1> a <h6> representam níveis hierárquicos de títulos. Elas não devem ser usadas apenas para “deixar o texto grande”, mas para organizar logicamente o conteúdo. Essa hierarquia é importante para acessibilidade, SEO e leitura estruturada.

Exemplo 2 — Parágrafo

<p>O HTML organiza o conteúdo textual da página em blocos lógicos.</p>

Explicação

A tag <p> representa um parágrafo. Deve ser usada para blocos de texto corrido. É uma das tags mais frequentes em qualquer documento Web.

Exemplo 3 — Negrito semântico e ênfase

<p>O <strong>HTML5</strong> é fundamental para a Web.</p>
<p>É <em>muito importante</em> compreender sua estrutura.</p>

Explicação

<strong> indica forte importância;
<em> indica ênfase.

Essas tags possuem valor semântico, não apenas visual. Em muitos navegadores, aparecem em negrito e itálico, mas sua função principal é indicar significado.

Exemplo 4 — Lista não ordenada

<ul>
    <li>HTML5</li>
    <li>CSS3</li>
    <li>JavaScript</li>
</ul>

Explicação

A tag <ul> cria uma lista não ordenada, normalmente exibida com marcadores.
Cada item da lista é representado por <li>. É adequada quando a sequência dos itens não é prioritária.

Exemplo 5 — Lista ordenada

<ol>
    <li>Ligar o computador</li>
    <li>Abrir o editor de código</li>
    <li>Criar o arquivo HTML</li>
</ol>

Explicação

A tag <ol> cria uma lista ordenada, geralmente numerada. É indicada quando a ordem dos passos importa, como em instruções, processos e algoritmos.

Exemplo 6 — Link

<a href="https://developer.mozilla.org/pt-BR/">Documentação MDN</a>

Explicação

A tag <a> cria um hiperlink. O atributo href indica o endereço de destino. Os links são um dos fundamentos da Web, pois conectam documentos e recursos entre si.

Exemplo 7 — Imagem

<img src="logo.png" alt="Logotipo do curso">

Explicação

A tag <img> insere uma imagem.
Os atributos principais são:

src: caminho do arquivo;
alt: descrição textual da imagem.

O alt é indispensável para acessibilidade e boa prática.

Exemplo 8 — Divisão genérica

<div>
    <h2>Bloco de conteúdo</h2>
    <p>Esta divisão agrupa elementos relacionados.</p>
</div>

Explicação

A tag <div> é um contêiner genérico, usada para agrupar elementos quando não há uma tag semântica mais apropriada. É muito usada em conjunto com CSS e JavaScript.

Exemplo 9 — Span para trecho em linha

<p>O curso de <span>Informática para Internet</span> aborda tecnologias Web.</p>

Explicação

A tag <span> agrupa um pequeno trecho de texto em linha. Diferentemente de <div>, ela não cria um bloco separado. É muito utilizada para estilização pontual ou manipulação via script.

Exemplo 10 — Agrupamento completo de conteúdo básico

<h1>Portal do Aluno</h1>
<p>Bem-vindo ao ambiente de estudos.</p>
<ul>
    <li>Aulas</li>
    <li>Atividades</li>
    <li>Materiais</li>
</ul>
<p><a href="https://www.example.com">Acessar plataforma</a></p>
<img src="aluno.jpg" alt="Imagem ilustrativa do portal do aluno">

Explicação

Este exemplo integra diversas tags fundamentais:

título;
parágrafo;
lista;
link;
imagem.

É um excelente modelo inicial para mostrar como páginas simples já podem ser construídas com HTML básico.

Semântica HTML5

A grande contribuição do HTML5 foi reforçar o uso de elementos semânticos, isto é, tags que descrevem o papel estrutural do conteúdo. Em vez de usar apenas <div> para tudo, o desenvolvedor pode utilizar tags como <header>, <nav>, <main>, <section>, <article>, <aside> e <footer>.

Isso melhora:

organização do código;
acessibilidade;
indexação por mecanismos de busca;
manutenção do projeto.

Exemplo 1 — Cabeçalho com `<header>`

<header>
    <h1>Portal Acadêmico</h1>
    <p>Sistema de apoio ao estudante</p>
</header>

Explicação

A tag <header> representa o cabeçalho de uma página ou de uma seção. Geralmente contém título, subtítulo, logotipo ou elementos introdutórios.

Exemplo 2 — Menu de navegação com `<nav>`

<nav>
    <a href="#inicio">Início</a>
    <a href="#cursos">Cursos</a>
    <a href="#contato">Contato</a>
</nav>

Explicação

A tag <nav> identifica uma área de navegação. Ela deve envolver menus ou conjuntos principais de links internos ou externos.

Exemplo 3 — Conteúdo principal com `<main>`

<main>
    <h2>Conteúdo principal</h2>
    <p>Aqui ficam as informações centrais da página.</p>
</main>

Explicação

A tag <main> representa o conteúdo principal do documento. Deve haver, em regra, apenas um <main> por página. Ela ajuda a identificar aquilo que é mais importante para o usuário.

Exemplo 4 — Seção temática com `<section>`

<section>
    <h2>Sobre o curso</h2>
    <p>O curso desenvolve competências em desenvolvimento Web.</p>
</section>

Explicação

A tag <section> delimita uma seção temática do documento. É apropriada quando o conteúdo possui unidade temática e normalmente um título próprio.

Exemplo 5 — Conteúdo independente com `<article>`

<article>
    <h2>Notícia do Curso</h2>
    <p>As inscrições para o minicurso de Web foram abertas.</p>
</article>

Explicação

A tag <article> representa um conteúdo relativamente independente e autossuficiente, como notícia, postagem, artigo ou publicação.

Exemplo 6 — Conteúdo complementar com `<aside>`

<aside>
    <h3>Leitura complementar</h3>
    <p>Consulte a documentação do HTML5 para aprofundamento.</p>
</aside>

Explicação

A tag <aside> indica conteúdo complementar ou lateral, relacionado ao tema principal, mas não pertencente ao núcleo central do texto.

Exemplo 7 — Rodapé com `<footer>`

<footer>
    <p>Desenvolvido para fins educacionais.</p>
</footer>

Explicação

A tag <footer> representa o rodapé da página ou de uma seção. Pode conter autoria, créditos, informações institucionais, links auxiliares ou direitos autorais.

Exemplo 8 — Figura com legenda

<figure>
    <img src="laboratorio.jpg" alt="Laboratório de informática">
    <figcaption>Laboratório utilizado nas aulas práticas.</figcaption>
</figure>

Explicação

<figure> agrupa conteúdo ilustrativo;
<figcaption> fornece sua legenda.

Esse conjunto é semanticamente mais adequado do que apenas colocar uma imagem solta seguida de um parágrafo explicativo.

Exemplo 9 — Marcação de data com `<time>`

<p>Data da atividade: <time datetime="2026-04-09">09 de abril de 2026</time></p>

Explicação

A tag <time> identifica datas e horários. O atributo datetime registra o valor em formato padronizado, útil para máquinas, indexadores e sistemas automatizados.

Exemplo 10 — Estrutura semântica completa

<header>
    <h1>Curso de Desenvolvimento Web</h1>
</header>

<nav>
    <a href="#html">HTML</a>
    <a href="#css">CSS</a>
    <a href="#js">JavaScript</a>
</nav>

<main>
    <section id="html">
        <h2>HTML5</h2>
        <article>
            <h3>Introdução</h3>
            <p>HTML5 é a linguagem de marcação usada para estruturar páginas Web.</p>
        </article>
    </section>

    <aside>
        <h3>Dica</h3>
        <p>Pratique sempre criando arquivos reais no editor.</p>
    </aside>
</main>

<footer>
    <p>Material didático para aula de 90 minutos.</p>
</footer>

Explicação

Esse exemplo demonstra uma página organizada semanticamente. Cada tag possui um papel específico. O código fica mais legível, mais profissional e mais alinhado às práticas modernas de desenvolvimento Web.

Formulários em HTML5

Os formulários são componentes fundamentais no desenvolvimento de aplicações Web, pois permitem a coleta, validação e envio de dados do usuário para um destino específico.

No HTML5, além da estrutura tradicional de formulários, há melhorias importantes:

novos tipos de campos (email, date, number, etc.);
validação nativa pelo navegador;
maior integração com acessibilidade;
melhor experiência do usuário.

Além disso, é essencial compreender que formulários estão diretamente relacionados ao conceito de requisições HTTP, especialmente os métodos GET e POST.

Conceito de envio de dados (requisição HTTP)

Quando o usuário preenche um formulário e clica em “Enviar”, o navegador pode enviar os dados para um servidor através do protocolo HTTP.

Isso ocorre com base em dois atributos principais da tag <form>:

Atributo `action`

Define o destino da requisição.

<form action="/processar">

Atributo `method`

Define o método HTTP utilizado no envio.

<form action="/processar" method="get">

<form action="/processar" method="post">

Diferença entre GET e POST

GET

Envia dados na URL;
Pode ser visualizado na barra do navegador;
Usado para consultas e buscas;
Pode ser armazenado em cache e favoritado.

Exemplo de resultado:

/buscar?nome=joao&idade=20

POST

Envia dados no corpo da requisição;
Não aparece diretamente na URL;
Usado para envio de dados sensíveis ou persistentes;
Comum em cadastros e autenticação.

Estrutura básica de um formulário

Exemplo 1 — Formulário mínimo com GET

<form action="/buscar" method="get">
    <input type="text" name="q">
    <button type="submit">Buscar</button>
</form>

Explicação

method="get" envia os dados na URL;
o nome do campo (name="q") será usado como parâmetro;
ao enviar, a URL pode ficar: /buscar?q=valor.

Exemplo 2 — Formulário com POST

<form action="/cadastro" method="post">
    <input type="text" name="nome">
    <button type="submit">Enviar</button>
</form>

Explicação

method="post" envia os dados no corpo da requisição;
adequado para envio de dados persistentes.

Elementos de entrada de dados

Exemplo 3 — Campo de texto

<label for="nome">Nome:</label>
<input type="text" id="nome" name="nome">

Explicação

Campo padrão para entrada de texto curto.

Exemplo 4 — Campo obrigatório com validação

<input type="text" name="nome" required>

Explicação

O atributo required impede o envio do formulário se o campo estiver vazio.

Exemplo 5 — Campo de e-mail

<input type="email" name="email">

Explicação

Valida automaticamente o formato de e-mail.

Exemplo 6 — Campo de senha

<input type="password" name="senha">

Explicação

Oculta os caracteres digitados.

Exemplo 7 — Campo numérico

<input type="number" name="idade" min="0" max="120">

Explicação

Permite apenas valores numéricos dentro de um intervalo definido.

Exemplo 8 — Campo de data

<input type="date" name="data">

Explicação

Fornece um seletor de data no navegador.

Exemplo 9 — Caixa de seleção (checkbox)

<label>
    <input type="checkbox" name="aceite">
    Aceito os termos
</label>

Explicação

Permite marcar ou desmarcar opções independentes.

Exemplo 10 — Botões de opção (radio)

<label><input type="radio" name="turno" value="manha"> Manhã</label>
<label><input type="radio" name="turno" value="tarde"> Tarde</label>

Explicação

Permite selecionar apenas uma opção dentro do mesmo grupo (name).

Exemplo 11 — Lista suspensa

<select name="curso">
    <option value="ads">ADS</option>
    <option value="redes">Redes</option>
</select>

Explicação

Permite escolher um item de uma lista pré-definida.

Exemplo 12 — Área de texto

<textarea name="mensagem" rows="4" cols="40"></textarea>

Explicação

Campo para textos longos.

Exemplo 13 — Placeholder

<input type="text" name="nome" placeholder="Digite seu nome">

Explicação

Exibe um texto de orientação dentro do campo.

Exemplo 14 — Campo com valor padrão

<input type="text" name="cidade" value="Caruaru">

Explicação

Define um valor inicial no campo.

Exemplo 15 — Botão de envio

<button type="submit">Enviar</button>

Explicação

Dispara o envio do formulário.

Formulário completo integrando conceitos

Exemplo 16 — Formulário completo com POST

<form action="/processar-dados" method="post">

    <label for="nome">Nome:</label><br>
    <input type="text" id="nome" name="nome" required><br><br>

    <label for="email">E-mail:</label><br>
    <input type="email" id="email" name="email" required><br><br>

    <label for="idade">Idade:</label><br>
    <input type="number" id="idade" name="idade" min="0" max="120"><br><br>

    <p>Turno:</p>
    <label><input type="radio" name="turno" value="manha"> Manhã</label>
    <label><input type="radio" name="turno" value="tarde"> Tarde</label><br><br>

    <label>
        <input type="checkbox" name="aceite" required>
        Aceito os termos
    </label><br><br>

    <label for="curso">Curso:</label><br>
    <select id="curso" name="curso">
        <option value="ads">ADS</option>
        <option value="redes">Redes</option>
    </select><br><br>

    <label for="mensagem">Mensagem:</label><br>
    <textarea id="mensagem" name="mensagem" rows="4"></textarea><br><br>

    <button type="submit">Enviar</button>

</form>

Explicação do formulário completo

Este exemplo integra:

uso de POST para envio de dados;
campos variados (texto, e-mail, número);
validação com required;
seleção única (radio);
seleção múltipla (checkbox);
lista suspensa (select);
campo de texto longo (textarea);
botão de envio.

Ele representa um modelo realista de formulário inicial em aplicações Web.

Observações pedagógicas importantes

O HTML não processa dados — ele apenas coleta e envia;
O processamento ocorre em:
- linguagens de backend (Node.js, PHP, Python, etc.);
- ou scripts JavaScript no cliente;
O entendimento de GET e POST prepara o aluno para:
- desenvolvimento backend;
- APIs;
- integração com bancos de dados.

Conclusão do tópico

Os formulários representam o ponto de transição entre:

páginas estáticas (HTML puro);
aplicações dinâmicas (integração com servidor e scripts).

Compreender:

estrutura de campos,
validação básica,
e envio via HTTP (GET e POST)

é essencial para evoluir no desenvolvimento Web moderno.

8. Exemplo integrador final da aula

A seguir, apresenta-se um exemplo mais completo reunindo conceitos fundamentais, estrutura básica, principais tags, semântica HTML5 e formulário.

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="description" content="Página introdutória sobre HTML5.">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Aula de HTML5</title>
</head>
<body>

    <header>
        <h1>Introdução ao HTML5</h1>
        <p>Material didático para desenvolvimento Web</p>
    </header>

    <nav>
        <a href="#conceitos">Conceitos</a> |
        <a href="#tags">Tags</a> |
        <a href="#formulario">Formulário</a>
    </nav>

    <main>
        <section id="conceitos">
            <h2>Conceitos Fundamentais</h2>
            <p>HTML5 é a linguagem de marcação utilizada para estruturar páginas Web.</p>
        </section>

        <section id="tags">
            <h2>Principais Tags</h2>
            <ul>
                <li>Títulos com h1 até h6</li>
                <li>Parágrafos com p</li>
                <li>Links com a</li>
                <li>Imagens com img</li>
                <li>Listas com ul, ol e li</li>
            </ul>

            <figure>
                <img src="html5.png" alt="Logotipo do HTML5">
                <figcaption>Exemplo ilustrativo de uso de imagem com legenda.</figcaption>
            </figure>
        </section>

        <section id="formulario">
            <h2>Cadastro de Interesse</h2>
            <form action="#" method="post">
                <label for="nome">Nome:</label><br>
                <input type="text" id="nome" name="nome" required><br><br>

                <label for="email">E-mail:</label><br>
                <input type="email" id="email" name="email" required><br><br>

                <label for="mensagem">Mensagem:</label><br>
                <textarea id="mensagem" name="mensagem" rows="4" cols="40"></textarea><br><br>

                <button type="submit">Enviar</button>
            </form>
        </section>
    </main>

    <aside>
        <h3>Dica de estudo</h3>
        <p>Pratique criando pequenos arquivos HTML e abrindo-os diretamente no navegador.</p>
    </aside>

    <footer>
        <p>Conteúdo educacional para disciplina de desenvolvimento Web.</p>
    </footer>

</body>
</html>

Explicação do exemplo integrador

Esse documento reúne os elementos centrais da aula:

usa a estrutura correta de um documento HTML5;
aplica metadados importantes;
utiliza elementos semânticos do HTML5;
apresenta conteúdo textual e lista;
inclui imagem com legenda;
incorpora um formulário simples.

Atividade prática sugerida para os estudantes

Proposta

Crie uma página HTML com o tema “Meu perfil acadêmico”, contendo obrigatoriamente:

estrutura completa do documento HTML5;
um título principal;
dois parágrafos;
uma lista com três tecnologias de interesse;
uma imagem com atributo alt;
uma estrutura semântica com header, main e footer;
um formulário contendo nome, e-mail e mensagem.
Critérios de observação em sala

Encerramento da aula

Ao final da aula, é importante reforçar que:

o HTML5 é a base estrutural de qualquer aplicação Web;
páginas bem estruturadas facilitam o trabalho com CSS3 e JavaScript;
semântica não é detalhe, mas parte da qualidade profissional do código;
praticar pequenos exemplos é a melhor forma de consolidar a aprendizagem.

Observação técnica final

Todos os exemplos apresentados nesta aula foram organizados de forma compatível com a sintaxe do HTML5 e podem ser utilizados diretamente em editor de código para execução e demonstração em navegador.

Fim da Aula 01

Linguagem e Técnica de Programação II – Aula 01

HTML5

Apresentação

Objetivos da aula

Competências trabalhadas

Recursos necessários

Conceitos fundamentais do HTML5

Exemplo 1 — Texto simples em HTML

Explicação

Exemplo 2 — Uso de uma tag simples

Explicação

Exemplo 3 — Título principal

Explicação

Exemplo 4 — Elemento com atributo

Explicação

Exemplo 5 — Documento com mais de um elemento

Explicação

Exemplo 6 — HTML organiza conteúdo, não aparência

Explicação

Exemplo 7 — Comentário em HTML

Explicação

Exemplo 8 — Espaços em branco no HTML

Explicação

Exemplo 9 — Quebra de linha

Explicação

Exemplo 10 — Estrutura mínima de conteúdo marcado

Explicação

Estrutura básica de um documento HTML5

Exemplo 1 — Estrutura mínima completa

Explicação

Exemplo 2 — Documento com dois parágrafos

Explicação

Exemplo 3 — Inclusão de meta descrição

Explicação

Exemplo 4 — Meta viewport para responsividade

Explicação

Exemplo 5 — Estrutura com comentário organizacional

Explicação

Exemplo 6 — Título da aba diferente do título visível

Explicação

Exemplo 7 — Estrutura com lista no corpo

Explicação

Exemplo 8 — Estrutura com imagem

Explicação

Exemplo 9 — Estrutura com link

Explicação

Exemplo 10 — Estrutura mais completa e correta para projetos iniciais

Explicação

Principais tags do HTML5

Exemplo 1 — Títulos hierárquicos

Explicação

Exemplo 2 — Parágrafo

Explicação

Exemplo 3 — Negrito semântico e ênfase

Explicação

Exemplo 4 — Lista não ordenada

Explicação

Exemplo 5 — Lista ordenada

Explicação

Exemplo 6 — Link

Explicação

Exemplo 7 — Imagem

Explicação

Exemplo 8 — Divisão genérica

Explicação

Exemplo 9 — Span para trecho em linha

Explicação

Exemplo 10 — Agrupamento completo de conteúdo básico

Explicação

Semântica HTML5

Exemplo 1 — Cabeçalho com <header>

Explicação

Exemplo 2 — Menu de navegação com <nav>

Explicação

Exemplo 3 — Conteúdo principal com <main>

Explicação

Exemplo 4 — Seção temática com <section>

Explicação

Exemplo 5 — Conteúdo independente com <article>

Explicação

Exemplo 1 — Cabeçalho com `<header>`

Exemplo 2 — Menu de navegação com `<nav>`

Exemplo 3 — Conteúdo principal com `<main>`

Exemplo 4 — Seção temática com `<section>`

Exemplo 5 — Conteúdo independente com `<article>`

Exemplo 6 — Conteúdo complementar com `<aside>`

Exemplo 7 — Rodapé com `<footer>`

Exemplo 9 — Marcação de data com `<time>`

Atributo `action`

Atributo `method`