TUTORIAL PRÁTICO DE HTML ESTRUTURAL
Disciplina: Programação WEB I
Prof. Alexandre Zordan Durães
Araras-SP
2025
TUTORIAL PRÁTICO DE HTML ESTRUTURAL
Um guia prático para iniciantes em programação WEB
Este documento tem como objetivo fornecer um guia prático
sobre HTML, facilitando o aprendizado dos alunos iniciantes
e apresentando conceitos fundamentais da linguagem.
Autor: Alexandre Zordan Durães
Araras /SP - 2025
RESUMO
Este manual prático de HTML foi desenvolvido para auxiliar estudantes ingressantes no curso
técnico de desenvolvimento de software, proporcionando uma introdução clara e estagiada aos
conceitos fundamentais da linguagem. O material compreende desde a estrutura básica de um
documento HTML até o uso de elementos semânticos, formulários e tabelas, garantindo um
aprendizado progressivo. Além de abordar a aplicação correta das tags e atributos, este
documento apresenta desafios práticos que visam a fixação dos conteúdos. Ao seguir este guia,
espera-se que os alunos possam desenvolver páginas web estruturadas e organizadas,
preparando-se para o aprofundamento em CSS e outras tecnologias relacionadas.
Palavras-chave: HTML, desenvolvimento web, estrutura semântica, tabelas, formulários.
SUMÁRIO
INTRODUÇÃO ........................................................................................................................ 5
1 ESTRUTURA BÁSICA HTML............................................................................................ 6
2 TÍTULOS (<h1> a <h6>) ...................................................................................................... 7
2.1 REGRAS E BOAS PRÁTICAS ....................................................................................... 8
3 PARÁGRAFOS (<p>) ........................................................................................................... 9
3.1 CARACTERÍSTICAS DO <p> ............................................................................... 10
3.2 OUTROS FORMATADORES DE ELEMENTOS .................................................. 11
4 ATRIBUTOS HTML ........................................................................................................... 12
4.1 PRINCIPAIS ATRIBUTOS E SEUS USOS................................................................... 12
id ....................................................................................................................................... 12
class .................................................................................................................................. 12
href .................................................................................................................................... 12
src ..................................................................................................................................... 12
alt ...................................................................................................................................... 12
title .................................................................................................................................... 13
target ................................................................................................................................. 13
disabled ............................................................................................................................. 13
readonly ............................................................................................................................ 13
placeholder ....................................................................................................................... 13
5 TABELAS ............................................................................................................................. 14
5.1 MESCLAGEM DE CÉLULAS ...................................................................................... 15
6 LISTAS ................................................................................................................................. 17
6.1 LISTAS ORDENADAS ................................................................................................. 17
6.2 LISTAS NÃO ORDENADAS........................................................................................ 18
6.3 LISTAS DE DEFINIÇÃO .............................................................................................. 19
7 FORMULÁRIOS <form> ................................................................................................... 20
8 TAGS SEMANTICAS ......................................................................................................... 23
8.1 PRINCIPAIS TAGS SEMÂNTICAS ....................................................................... 23
<header> Cabeçalho da página ou de uma seção ............................................................. 23
<nav> Seção exclusiva para navegação ........................................................................... 23
<main> Conteúdo principal .............................................................................................. 23
<section> Seção de conteúdo ........................................................................................... 24
<article> Conteúdo independente ..................................................................................... 24
<aside> Conteúdo complementar ..................................................................................... 24
<footer> Rodapé da página .............................................................................................. 24
8.2 ESTRUTURA COMPLETA USANDO TAGS SEMÂNTICAS.................................... 25
Por que usar HTML semântico? ....................................................................................... 26
9 DESAFIOS HTML .............................................................................................................. 27
Estrutura e Formatação ......................................................................................................... 27
Links e Imagens .................................................................................................................... 27
Tabelas e Estruturação .......................................................................................................... 27
Formulários e Interatividade................................................................................................. 27
CONCLUSÃO......................................................................................................................... 28
REFERÊNCIAS ..................................................................................................................... 29
5
INTRODUÇÃO
O HTML (HyperText Markup Language) é a base para a construção de páginas web e representa
o primeiro passo para qualquer desenvolvedor que deseja atuar na área de tecnologia. Este
manual prático foi elaborado para auxiliar estudantes ingressantes no curso técnico,
proporcionando uma abordagem clara, acessível e didática sobre a linguagem HTML.
Neste material, exploramos desde os fundamentos da estrutura HTML até o uso de elementos
semânticos, tabelas e formulários, com exemplos aplicados e desafios práticos que estimulam
o aprendizado. A proposta é oferecer um guia estruturado, permitindo que os alunos
desenvolvam suas habilidades de forma gradual e compreendam a importância da marcação
correta na construção de páginas organizadas e funcionais.
A necessidade deste documento surgiu a partir da observação de dificuldades dos alunos ao
ingressarem na programação web. Por isso, seu conteúdo foi elaborado de maneira direta e
objetiva, trazendo explicações claras e práticas que podem ser aplicadas tanto em projetos
acadêmicos quanto profissionais.
Ao longo do manual, os conceitos são apresentados de maneira progressiva, facilitando a
assimilação dos conteúdos e preparando os alunos para o aprofundamento em tecnologias
complementares, como CSS e JavaScript. Com isso, busca-se construir uma base sólida para o
desenvolvimento web, tornando o aprendizado mais dinâmico e eficiente
6
1 ESTRUTURA BÁSICA HTML
Um documento HTML tem uma estrutura básica semelhante a representada a seguir:
Agora, vamos entender cada parte:
ITEM FUNÇÃO
<!DOCTYPE html> Define que o documento está usando a versão HTML5.
Elemento raiz do documento. Tudo que pertence ao HTML deve
<html>
estar dentro dele.
Contém metadados do documento como:
<meta charset="UTF-8"> Codificação de caracteres
<meta name="viewport"
<head>
content="width=device- Responsividade
width, initial-scale=1.0">
<title> Título da página
Contém todo conteúdo visível da página. Aqui colocamos textos,
<body> imagens, links e outros elementos.
Dica importante: No VisuaStudioCode se você digitar “!” (ponto de exclamação) ele monta
esta estrutura completa para economizar seu tempo!
7
2 TÍTULOS (<h1> a <h6>)
O HTML possui seis níveis de títulos, que vão do <h1> (mais importante e maior) até o <h6>
(menos importante e menor). Eles ajudam a organizar o texto e são utilizados para melhorar a
legibilidade da página, além de serem fundamentais para SEO (otimização para mecanismos de
busca).
Aqui está um exemplo de uso dos títulos:
(Código em HTML)
(Resultado no navegador)
8
2.1 REGRAS E BOAS PRÁTICAS
• Cada página deve ter apenas um <h1>, pois ele representa o título principal.
• Os títulos devem seguir uma hierarquia lógica (<h2> deve estar abaixo de <h1>, <h3>
abaixo de <h2> e assim por diante).
• Evite usar títulos apenas para estilização — para isso, o CSS é mais adequado.
9
3 PARÁGRAFOS (<p>)
O elemento <p> é utilizado para definir parágrafos de texto em HTML. Ele ajuda na
organização do conteúdo, separando blocos de informações de forma clara e estruturada.
Exemplo:
(Código em HTML)
(Resultado no navegador)
10
3.1 CARACTERÍSTICAS DO <p>
• Automaticamente adiciona espaçamento antes e depois do texto.
• Pode conter texto, negrito (<b>), itálico (<i>), links (<a>), entre outros.
• Não precisa de uma quebra de linha manual, pois cada <p> já define um novo bloco de
texto.
(Código HTML)
(Resultado no navegador)
11
3.2 OUTROS FORMATADORES DE ELEMENTOS
(Código em HTML)
(Resultado no Browser)
12
4 ATRIBUTOS HTML
Os atributos são essenciais para definir informações adicionais sobre os elementos HTML. Eles
sempre são escritos dentro da tag de abertura e seguem a seguinte estrutura:
<elemento atributo="valor">Conteúdo</elemento>
4.1 PRINCIPAIS ATRIBUTOS E SEUS USOS
id
Define um identificador único para um elemento
class
Permite agrupar elementos sob uma mesma classe, útil para estilização com CSS.
href
Define o destino de um link
src
Especifica o caminho da imagem
alt
Adiciona um texto alternativo para imagens. Geralmente utilizado em narradores
eletrônicos visando acessibilidade
13
title
Exibe um texto ao passar o mouse sobre um elemento.
target
Define como o link será aberto (“_blank” abre em uma nova aba)
disabled
Desativa um elemento interativo, como um botão ou campo de entrada
readonly
Permite visualizar um campo sem editá-lo.
placeholder
Define um texto de sugestão em campos de entrada
14
5 TABELAS
As tabelas em HTML são usadas para organizar informações em linhas e colunas, sendo muito
úteis para apresentar dados de forma estruturada.
Estrutura básica:
Uma tabela em HTML é criada com a tag <table>, e dentro dela usamos:
• <tr> (table row): Define uma linha da tabela.
• <th> (table header): Cria uma célula de cabeçalho, geralmente em negrito.
• <td> (table data): Define uma célula de dados, usada para inserir informações.
Aqui está um exemplo de uma tabela simples:
Código em HTML
15
(Resultado no browser)
Explicação:
O atributo border="1" adiciona uma borda visível à tabela (apenas para testes, no CSS podemos
estilizar melhor).
• <th> representa o cabeçalho da tabela e, por padrão, o texto aparece em negrito e
centralizado.
• <td> são as células comuns que contêm os dados da tabela.
5.1 MESCLAGEM DE CÉLULAS
Se precisar mesclar colunas ou linhas:
• colspan="n": Faz uma célula ocupar n colunas.
• rowspan="n": Faz uma célula ocupar n linhas.
16
Exemplo de tabela com coluna mesclada:
(Código em HTML)
(Resultado no browser)
17
6 LISTAS
As listas em HTML são essenciais para organizar conteúdos de forma estruturada. Existem três
tipos principais de listas:
➢ Listas ordenadas (<ol>) → Numeradas
➢ Listas não ordenadas (<ul>) → Com marcadores
➢ Listas de definição (<dl>) → Usadas para termos e descrições
6.1 LISTAS ORDENADAS
As listas ordenadas são usadas quando a sequência dos itens importa, como rankings, etapas ou
receitas. Cada item é representado por <li> (list item).
<h3>Passos para Criar um Site</h3>
<ol>
<li>Aprender HTML</li>
<li>Estudar CSS</li>
<li>Aprender JavaScript</li>
<li>Construir o projeto</li>
</ol>
(Código em HTML)
(Resultado no browser)
18
6.2 LISTAS NÃO ORDENADAS
As listas não ordenadas são usadas quando a ordem não importa, como lista de compras ou
tópicos gerais.
<h3>Hobbies Populares</h3>
<ul>
<li>Leitura</li>
<li>Música</li>
<li>Esportes</li>
<li>Programação</li>
</ul>
(Código em HTML)
(Resultado no browser)
19
6.3 LISTAS DE DEFINIÇÃO
São utilizadas para apresentar termos e suas respectivas descrições.
<h3>Glossário de Programação</h3>
<dl>
<dt>HTML</dt>
<dd>Linguagem de marcação para criação de páginas web.</dd>
<dt>CSS</dt>
<dd>Usado para estilizar elementos de uma página web.</dd>
<dt>JavaScript</dt>
<dd>Linguagem de programação para interatividade em sites.</dd>
</dl>
(Código em HTML)
(Resultado no browser)
20
7 FORMULÁRIOS <form>
O formulário é criado com a tag <form>, e dentro dele usamos campos de entrada, botões e
outros elementos.
Exemplo de formulário rico em componentes:
<h2>Cadastro de Usuário</h2>
<form action="[Link]" method="post">
<label for="nome">Nome:</label>
<input type="text" id="nome" name="nome" required>
<br><br>
<label for="email">E-mail:</label>
<input type="email" id="email" name="email" required>
<br><br>
<label for="senha">Senha:</label>
<input type="password" id="senha" name="senha" required>
<br><br>
<label for="idade">Idade:</label>
<input type="number" id="idade" name="idade" min="18" max="99">
<br><br>
<label for="genero">Gênero:</label>
<select id="genero" name="genero">
<option value="masculino">Masculino</option>
<option value="feminino">Feminino</option>
<option value="outro">Outro</option>
</select>
<br><br>
<label>Interesses:</label>
<input type="checkbox" id="musica" name="interesses" value="musica">
<label for="musica">Música</label>
<input type="checkbox" id="esporte" name="interesses" value="esporte">
<label for="esporte">Esportes</label>
21
<input type="checkbox" id="tecnologia" name="interesses" value="tecnologia">
<label for="tecnologia">Tecnologia</label>
<br><br>
<label>Escolha seu nível de satisfação:</label>
<input type="radio" id="satisfeito" name="satisfacao" value="satisfeito">
<label for="satisfeito">Satisfeito</label>
<input type="radio" id="indiferente" name="satisfacao" value="indiferente">
<label for="indiferente">Indiferente</label>
<input type="radio" id="insatisfeito" name="satisfacao" value="insatisfeito">
<label for="insatisfeito">Insatisfeito</label>
<br><br>
<label for="comentario">Comentário:</label>
<textarea id="comentario" name="comentario" rows="4" cols="30"></textarea>
<br><br>
<button type="submit">Enviar</button>
<button type="reset">Limpar</button>
</form>
(Código em HTML)
(Resultado no browser)
22
Explicação dos principais componentes:
• <input type="text"> → Campo de texto simples.
• <input type="email"> → Campo específico para e-mail.
• <input type="password"> → Campo para senha, oculta os caracteres digitados.
• <input type="number"> → Campo numérico (aceita valores numéricos).
• <select> → Lista suspensa para selecionar opções.
• <input type="checkbox"> → Caixa de seleção múltipla.
• <input type="radio"> → Botões de seleção única.
• <textarea> → Área de texto para comentários ou mensagens.
• <button type="submit"> → Botão para enviar o formulário.
• <button type="reset"> → Botão para limpar os campos preenchidos.
Formulários tem como finalidade enviar um conjunto de dados de forma organizada por meio
de uma REQUISIÇÃO HTTP
<form action="[Link]" method="post">
Repare que possui um atributo “action” que sinaliza o destinatário desta requisição
([Link]), bem como o método HTTP que será disparado, neste caso POST.
23
8 TAGS SEMANTICAS
As tags semânticas descrevem o significado do conteúdo que contêm, tornando o HTML mais
compreensível. Diferente das <div> e <span>, que não indicam propósito, essas tags ajudam a
estruturar melhor as páginas. Elas ajudam a organizar o conteúdo da página de forma mais clara
e acessível, tanto para desenvolvedores quanto para mecanismos de busca e tecnologias
assistivas.
8.1 PRINCIPAIS TAGS SEMÂNTICAS
<header> Cabeçalho da página ou de uma seção
Geralmente contém logotipos, menus de navegação ou títulos.
<nav> Seção exclusiva para navegação
É utilizada para agrupar links de menu
<main> Conteúdo principal
Define o conteúdo essencial da página, sem incluir menus ou rodapé
24
<section> Seção de conteúdo
Agrupa elementos relacionados dentro do <main>, como blocos de artigos ou categorias.
<article> Conteúdo independente
Usado para posts de blog, notícias, tutoriais, que podem ser lidos separadamente.
<article>
<h2>Aprendendo HTML Semântico</h2>
<p>Criando páginas organizadas e acessíveis...</p>
</article>
<aside> Conteúdo complementar
Inclui informações secundárias, como barras laterais, anúncios e links relacionados.
<footer> Rodapé da página
Normalmente contém informações como contato, direitos autorais e links úteis.
<footer>
<p>© 2025 - Todos os direitos reservados.</p>
<p>Entre em contato pelo email: contato@[Link]</p>
</footer>
25
8.2 ESTRUTURA COMPLETA USANDO TAGS SEMÂNTICAS
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Site com HTML Semântico</title>
</head>
<body>
<header>
<h1>Meu Site Semântico</h1>
<nav>
<ul>
<li><a href="#sobre">Sobre</a></li>
<li><a href="#noticias">Notícias</a></li>
<li><a href="#contato">Contato</a></li>
</ul>
</nav>
</header>
<main>
<section id="sobre">
<h2>Sobre Nós</h2>
<p>Somos um site que explora o uso do HTML semântico.</p>
</section>
<section id="noticias">
<h2>Últimas Notícias</h2>
<article>
<h3>Nova Atualização do HTML</h3>
<p>Várias melhorias para acessibilidade e estruturação de conteúdo.</p>
</article>
<article>
<h3>Benefícios do HTML Semântico</h3>
<p>Páginas mais organizadas e melhor indexadas pelos motores de busca.</p>
</article>
</section>
</main>
<aside>
<h3>Links Úteis</h3>
<ul>
<li><a href="[Link] HTML</a></li>
<li><a href="[Link] HTML</a></li>
</ul>
26
</aside>
<footer>
<p>© 2025 - Todos os direitos reservados.</p>
<p>Contato: <a href="[Link]
</footer>
</body>
</html>
(Código em HTML)
(Resultado no browser)
Por que usar HTML semântico?
✓ Acessibilidade: Melhor compreensão por leitores de tela.
✓ SEO: Motores de busca priorizam páginas bem estruturadas.
✓ Manutenção: Código mais limpo e organizado.
27
9 DESAFIOS HTML
Estrutura e Formatação
1. Crie um documento HTML que exiba "Olá, Mundo!" em um <h1>.
2. Adicione um parágrafo (<p>) com texto sobre um tema que você goste.
3. Insira um título secundário (<h2>) e um parágrafo descritivo sobre você.
4. Formate um texto usando negrito (<b>), itálico (<i>) e sublinhado (<u>).
5. Crie uma lista ordenada e uma lista não ordenada sobre seus hobbies favoritos.
Links e Imagens
6. Adicione um link externo (<a href="URL">) para um site que você gosta.
7. Insira um link interno que direcione para outra página HTML no seu projeto.
8. Coloque uma imagem (<img src="URL">) no seu site e defina um texto alternativo
(alt).
9. Adicione um link em uma imagem para que, ao ser clicada, o usuário seja direcionado
para outro site
10. Crie um botão que, ao ser clicado, redirecione para outro site.
Tabelas e Estruturação
11. Construa uma tabela básica com 3 colunas e 3 linhas.
12. Use colspan e rowspan para mesclar células em uma tabela.
13. Adicione uma tabela estilizada com <thead>, <tbody> e <tfoot>.
14. Crie uma estrutura semântica com <header>, <main>, <section> e <footer>.
15. Desenvolva um <article> com um texto de notícia e uma sidebar com <aside>.
Formulários e Interatividade
16. Faça um formulário com campos de nome, e-mail e senha (<input>).
17. Adicione um campo de seleção (<select>) para escolher um curso.
18. Insira checkboxes e radio buttons para escolhas múltiplas e únicas.
19. Crie um <textarea> onde os usuários possam deixar um comentário.
20. Adicione um botão de envio (<button>) e um botão para limpar (reset)
28
CONCLUSÃO
O estudo de HTML é um dos primeiros passos na jornada de um desenvolvedor web e, por meio
deste manual prático, buscou-se oferecer uma introdução acessível e bem estruturada para
estudantes ingressantes no curso técnico. Ao longo dos capítulos, foram abordados desde os
conceitos fundamentais da linguagem até aspectos mais avançados, como tabelas, formulários
e elementos semânticos, permitindo uma evolução progressiva no aprendizado.
A construção de páginas web bem estruturadas não se baseia apenas na marcação correta dos
elementos, mas também na compreensão de suas funções e boas práticas. Além disso, os
desafios propostos ao longo do manual incentivam a experimentação e aplicação prática dos
conhecimentos adquiridos, tornando o aprendizado mais dinâmico e eficiente.
Com a conclusão deste material, espera-se que os alunos tenham desenvolvido uma base sólida
em HTML e estejam preparados para explorar outras tecnologias complementares, como CSS
e JavaScript. O aprendizado contínuo é essencial na área de tecnologia, e a prática constante
permitirá que os estudantes aprimorem suas habilidades e ampliem suas possibilidades no
mercado.
Que este manual sirva como um guia confiável e um estímulo para futuras descobertas no
mundo do desenvolvimento web. A tecnologia está em constante evolução, e os conhecimentos
adquiridos aqui serão um excelente ponto de partida para criar experiências digitais inovadoras
e acessíveis.
29
REFERÊNCIAS
MOZILLA FOUNDATION. HTML: HyperText Markup Language. MDN Web Docs, 2025.
Disponível em: [Link] Acesso em: 07 maio
2025.
W3SCHOOLS. HTML Tutorial. W3Schools, 2025. Disponível em:
[Link] Acesso em: 07 maio 2025.