📚Módulo 3

🎯 Objetivos da Aula

●     Entender o conceito de semântica no HTML e sua importância.

●     Aprender o uso correto das principais tags estruturais (header, main, section, article, aside, footer).

●    Criar uma página semântica completa.

●    Compreender boas práticas para organização, acessibilidade e SEO. 

🧩 1. O que é Semântica no HTML

A palavra “semântica” vem do grego semantikós, que significa “relacionado ao significado”.
  Em HTML, semântica se refere ao significado real das tags — usar um elemento que representa corretamente o conteúdo que ele exibe.

💬 Exemplo comparativo:

<!-- Errado: semântica pobre -->

<div>

  <div>Título do artigo</div>

  <div>Texto do artigo...</div>

</div>

<!-- Correto: semântica clara -->

<article>

  <h2>Título do artigo</h2>

  <p>Texto do artigo...</p>

</article>

👉 Os dois exemplos produzem o mesmo resultado visual,
  mas o segundo “fala a linguagem da web” — os buscadores, leitores de tela e navegadores entendem melhor seu propósito.

🧠 2. Benefícios da Estrutura Semântica

1.    🌍 Melhoria no SEO (buscadores entendem o propósito do conteúdo).

2.    ♿ Acessibilidade aprimorada (softwares leem o que é título, texto, botão etc.).

3.    🧱 Organização e manutenção facilitadas (código mais limpo e compreensível).

⚙️ Compatibilidade futura — o HTML5 foi concebido para valorizar o significado estrutural 

🧱 Principais Tags Semânticas do HTML5

Agora que entendemos o “por quê”, vamos ver as principais tags estruturais.

🏗️ <header> — Cabeçalho da página ou seção

Representa o topo de um documento ou de uma seção específica.
  Geralmente contém logo, título, menu, ou informações introdutórias.

💡 Exemplo:

<header>

  <h1>Meu Site Profissional</h1>

  <nav>

<a href="#">Início</a> |

<a href="#">Serviços</a> |

<a href="#">Contato</a>

  </nav>

</header>

🧭 <nav> — Agrupamento de links de navegação

Usada para menus, barras de navegação e índices de conteúdo.

💡 Normalmente, <nav> é inserida dentro do header, mas também pode ser usada isoladamente.

<nav>

  <ul>

<li><a href="#inicio">Início</a></li>

<li><a href="#sobre">Sobre</a></li>

<li><a href="#servicos">Serviços</a></li>

  </ul>

</nav>

📰 <main> — Conteúdo principal do documento

Essa tag delimita a área central do site.
  Isso ajuda os leitores de tela e indexadores a pularem os menus e irem direto ao conteúdo principal.

💡 Importante: deve existir apenas um <main> por página.

<main>

  <h2>Bem-vindo ao Curso HTML</h2>

  <p>Aqui você aprenderá todos os fundamentos e avançará na prática!</p>

</main>

📄 <article> — Conteúdo independente dentro da página

Usado para itens que fazem sentido sozinhos, como postagens, notícias, depoimentos, produtos etc.

💡 Exemplo:

<article>

  <h2>O que é HTML?</h2>

  <p>HTML é a linguagem que estrutura todo o conteúdo visual da Web.</p>

</article>

Você pode ter vários <article> dentro de uma <section>. 

🧱 <section> — Agrupa blocos de conteúdo relacionados

Representa uma seção temática dentro do documento, como “Serviços”, “Depoimentos”, “Blog”, etc.

💡 Exemplo:

<section id="servicos">

  <h2>Nossos Serviços</h2>

  <article>

    <h3>Desenvolvimento Web</h3>

<p>Sites personalizados com HTML, CSS e JavaScript.</p>

  </article>

  <article>

<h3>Consultoria</h3>

<p>Orientação técnica e estratégias para o seu negócio digital.</p>

  </article>

</section>

🧩 <aside> — Conteúdo complementar

Geralmente usado para barras laterais, anúncios, widgets, links extras etc.

💡 Exemplo:

<aside>

  <h4>Links Úteis</h4>

  <ul>

<li><a href="https://developer.mozilla.org/">MDN Web Docs</a></li>

<li><a href="https://www.w3schools.com/">W3Schools</a></li>

  </ul>

</aside>

🦶 <footer> — Rodapé da página ou de uma seção

Usado para informações finais, como direitos autorais, contatos e créditos.

💡 Exemplo:

<footer>

  <p>&copy; 2024 - Curso HTML do Zero ao Avançado</p>

  <nav>

<a href="#politica">Política de Privacidade</a> |

<a href="#contato">Contato</a>

  </nav>

</footer>

🌟 Explicação geral da estrutura

●     <header> – Identidade visual e navegação principal.

●     <main> – Corpo central da página (onde vive o conteúdo temático).

●     <section> – Agrupamentos de temas dentro do main.

●     <article> – Blocos independentes (cada um pode ser reutilizado).

●     <aside> – Conteúdos complementares (não essenciais).

●     <footer> – Créditos e navegação secundária.

⚙️ Outras tags semânticas úteis

Tag                                        Uso típico

<figure>            →         Agrupar imagens, gráficos ou mídias ilustrativas.

<figcaption>       →      Legenda para a figura.

<time>            →            Define datas e horas.

<address>         →        Exibe informações de contato (endereços físicos ou e-mails).

💡 Exemplo:

<figure>

  <img src="imagens/html_logo.png" alt="Logo do HTML5">

  <figcaption>Imagem ilustrativa do logotipo HTML5</figcaption>

</figure>

🧠 6. Boas práticas para estrutura semântica

1.    Use cada tag de acordo com seu significado real.

2.    Evite <div> e <span> genéricos quando existir uma tag específica.

3.    Sempre mantenha uma hierarquia lógica do conteúdo (h1 → h2 → h3).

4.    Utilize IDs claros para navegação por âncoras internas.

5.    Combine semântica + CSS para garantir forma e função sem misturar papéis.

💻 Exercício Prático 7

Crie um arquivo chamado estrutura_semantica.html contendo:

1.    Um cabeçalho (<header>) com o título e navegação principal.

2.    Um corpo (<main>) com duas seções (<section>): “Sobre o Curso” e “Conteúdos”.

3.    Dentro de “Conteúdos”, adicione três artigos sobre tópicos diferentes (HTML, CSS e JS).

4.    Um aside com links externos e recursos adicionais.

5.    Um rodapé (<footer>) com informação de direitos autorais e links adicionais.

✅ Desafio Extra:

  Use <figure> e <figcaption> para adicionar uma imagem relevante e criar uma legenda semântica.

💬 Conclusão da Aula

Hoje você aprendeu:

●     O conceito e a importância da semântica HTML;

●     As principais tags estruturais do HTML5;

●     Como criar páginas limpas, acessíveis e otimizadas para SEO;

●     Como aplicar boas práticas de organização profissional no código.

🔜 Próxima aula:

  Na Aula 8, vamos aprender a inserir e manipular tabelas — criando estruturas tabulares completas, com cabeçalhos, rodapés, mesclagem de células e muito mais.

🎯 Objetivos da Aula

●     Entender como criar e estruturar tabelas em HTML;

●     Diferenciar cabeçalho, corpo e rodapé de uma tabela;

●     Aprender a mesclar células e cabeçalhos;

●     Aprimorar a acessibilidade das tabelas com boas práticas;

●     Criar um exemplo de tabela profissional.

🧩 Cabeçalhos de tabela (<th>)

Para dar mais significado às colunas, usamos <th> (Table Header),
  que indica que a célula é um título de coluna ou linha.

💡 Exemplo:

<table border="1">

  <tr>

    <th>Nome</th>

    <th>Idade</th>

    <th>Cidade</th>

  </tr>

  <tr>

    <td>João</td>

    <td>25</td>

<td>São Paulo</td>

  </tr>

</table>

Os <th> são exibidos em negrito e centralizados por padrão.
Também ajudam na acessibilidade (informam o significado da célula aos leitores de tela).

⚙️ Separando Cabeçalho, Corpo e Rodapé da Tabela

Tabelas complexas podem ter três partes principais:

Tag                                  Função

<thead>     →       Cabeçalho (títulos das colunas)

<tbody>     →      Corpo (conteúdo principal da tabela)

<tfoot>       →      Rodapé (dados de resumo ou totais)

💡 Exemplo completo:

<table border="1">

  <thead>

<tr>

      <th>Produto</th>

      <th>Preço</th>

      <th>Quantidade</th>

</tr>

  </thead>

  <tbody>

<tr>

      <td>Mouse</td>

   <td>R$ 50,00</td>

      <td>10</td>

</tr>

<tr>

      <td>Teclado</td>

   <td>R$ 120,00</td>

      <td>5</td>

</tr>

  </tbody>

  <tfoot>

<tr>

   <td colspan="2">Total de Itens</td>

      <td>15</td>

</tr>

  </tfoot>

</table>

O <tfoot> aparece visualmente no final, mas pode ser colocado antes do <tbody> no HTML — os navegadores ajustam automaticamente a exibição.
Observe o uso do colspan="2", que mescla duas células horizontalmente.

🧩 Mesclagem de Células (colspan e rowspan)

👉 colspan

Usado para mesclar colunas.

<td colspan="2">Célula mesclada em duas colunas</td>

👉 rowspan

Usado para mesclar linhas.

<td rowspan="3">Célula ocupando três linhas</td>

💡 Exemplo combinado:

<table border="1">

  <tr>

<th>Nome</th>

<th colspan="2">Contato</th>

  </tr>

  <tr>

    <td>João</td>

    <td>E-mail</td>

    <td>Telefone</td>

  </tr>

</table>

🧭 Adicionando títulos e legendas (<caption>)

Para deixar a tabela mais descritiva, você pode definir um título usando <caption>.

💡 Exemplo:

<table border="1">

  <caption>Relatório de Vendas</caption>

  <thead>

<tr>

      <th>Produto</th>

   <th>Valor Unitário</th>

   <th>Unidades Vendidas</th>

</tr>

  </thead>

  <tbody>

<tr>

      <td>Notebook</td>

   <td>R$ 2500</td>

      <td>3</td>

</tr>

<tr>

      <td>Monitor</td>

   <td>R$ 800</td>

      <td>5</td>

</tr>

  </tbody>

</table>

O <caption> aparece acima da tabela por padrão.

 É importante para acessibilidade e SEO. 

🧠  Tornando tabelas mais acessíveis

Para tabelas grandes, use o atributo scope nas células <th>,
  indicando se o cabeçalho se refere a colunas ou linhas:

<th scope="col">Produto</th>

<th scope="col">Preço</th>

...

<th scope="row">Laptop</th>

Também é boa prática usar o atributo id e headers para conectar dados e títulos em tabelas complexas.

💡 Exemplo:

<table border="1">

  <thead>

<tr>

   <th id="produto">Produto</th>

   <th id="quantidade">Quantidade</th>

   <th id="preco">Preço</th>

</tr>

  </thead>

  <tbody>

<tr>

   <td headers="produto">Mouse</td>

   <td headers="quantidade">10</td>

   <td headers="preco">R$ 50</td>

</tr>

  </tbody>

</table>

🎨  Estilização básica de tabelas com CSS

O HTML define a estrutura; o CSS cuida da aparência.
  Exemplo simples para tornar a tabela legível e agradável:

<style>

table {

  width: 80%;

  border-collapse: collapse;

  margin: 20px auto;

  font-family: Arial, sans-serif;

}

th, td {

  border: 1px solid #999;

  padding: 10px;

  text-align: center;

}

th {

  background-color: #f3f3f3;

}

caption {

  caption-side: top;

  font-weight: bold;

  margin-bottom: 10px;

}

</style>

✅ 9. Boas práticas no uso de tabelas

1.    Use tabelas apenas para dados, e não para layout.

2.    Sempre inclua <th> e <caption> para acessibilidade.

3.    Evite tabelas muito largas — use CSS e responsividade.

4.    Agrupe conteúdo grande usando <thead>, <tbody> e <tfoot>.

5.    Teste em dispositivos móveis (tabelas grandes podem precisar de rolagem horizontal).

💻 Exercício Prático 8

Crie um arquivo chamado tabela_dados.html contendo:

1.    Uma tabela com título (caption): Relatório de Funcionários

2.    Use <thead>, <tbody>, <tfoot> e formatação com CSS.

3.    Adicione colunas: Nome, Cargo, Departamento, Salário.

4.    Inclua três funcionários e um total de salários no rodapé.

5.    Use pelo menos um colspan e um rowspan.

✅ Desafio Extra

  Adicione uma coluna com foto de perfil (usando <img>) dentro das células.

💬 Conclusão da Aula

Hoje aprendemos:

●     A construir e estruturar tabelas de forma semântica;

●     A organizar cabeçalhos, corpos e rodapés;

●     A melhorar acessibilidade usando scope e headers;

A deixar as tabelas elegantes e intuitivas com CSS. 

🔜 Próxima aula:

 Na Aula 9, aprenderemos a trabalhar com multimídia —

 inserindo imagens, vídeos, áudios e conteúdo interativo no HTML. 

⚙️ Recursos Visuais e Multimídia

🎯 Objetivos da Aula

●     Inserir imagens em páginas HTML usando <img> e seus atributos;

●     Compreender o uso de formatos otimizados (JPG, PNG, SVG, WEBP);

●     Aprender a usar <audio> e <video> com controles personalizados;

●     Incorporar vídeos e áudios externos (YouTube, Spotify, etc.);

●     Entender boas práticas de acessibilidade para conteúdos multimídia.

🖼️  Inserindo Imagens no HTML

A tag <img> é responsável por exibir imagens.
  Ela é autofechável (não precisa de uma tag de fechamento) e possui alguns atributos essenciais.

📜 Estrutura básica:

<img src="imagens/logo.png" alt="Logotipo da empresa">

Atributo                                                     Função

src                   →                            Caminho da imagem (URL ou arquivo local).

alt                     →                           Texto alternativo para descrição acessível (obrigatório).

width / height            →            Define dimensões da imagem (em pixels).

title                    →                         Exibe uma dica quando o mouse passa sobre a imagem.

Exemplo prático:

<img src="images/html5_logo.png" alt="Logo do HTML5" width="200" title="HTML5 Logo">

🔎 Dica: Sempre use alt! É essencial para SEO e para inclusão de pessoas que usam leitores de tela.

🧱 2. Estrutura de pastas recomendada

/projeto

  ├── index.html

  ├── /imagens

  │ ├── logo.png

  │ ├── banner.jpg

  │ └── icone.svg

💡 Prefira nomes de arquivos em minúsculas e sem espaços, como meu_banner.webp.

🎨 3. Formatos de Imagem e Quando Usar

Formato                   Ideal para                             Vantagem                         Desvantagem

.jpg/.jpeg →  Fotos e imagens com gradientes  →  Leve, compatível → Perde qualidade em compressão

.png       →       Imagens com transparência   →   qualidade e transparência   →  Arquivos mais pesados

.gif           →     Pequenas animações       →        Movimento leve  →       Limitado a 256 cores

.svg         →      Ícones e gráficos vetoriais  →   Escala infinita e leve  →    Pouco usado para fotos

.webp     →      Geral (últimas gerações)  →  Melhor compressão e qualidade  →  Nem todos os

navegadores antigos suportam.

💬 Melhor prática: 

Use SVG para ícones e logos, e WEBP para fotos otimizadas.

🌄 4. Inserindo Figura com Legenda (<figure> e <figcaption>)

Essas tags ajudam a agrupar imagens e legendas de forma semântica.

💡 Exemplo prático:

<figure>

  <img src="imagens/code.jpg" alt="Tela com código de desenvolvimento web">

  <figcaption>Imagem ilustrativa de um desenvolvedor trabalhando em HTML</figcaption>

</figure>

<figure> → agrupa a imagem e a legenda.
<figcaption> → descreve o conteúdo visual.

🔊 5. Inserindo Áudios no HTML

A tag <audio> permite incluir sons e músicas diretamente nas páginas.

📜 Estrutura básica:

<audio src="midia/audio.mp3" controls></audio>

Atributo                                      Função

src            →          Caminho ou URL do arquivo de áudio.

controls     →       Exibe os controles de reprodução (play, pause, volume).

autoplay      →     Inicia automaticamente (uso cuidadoso — pode ser irritante).

loop         →          Recomeça automaticamente quando termina.

muted        →       Começa sem som.

preload       →      Define como o navegador carrega o áudio (auto, metadata, none).

💡 Exemplo completo:

<audio controls loop preload="metadata">

  <source src="midia/musica.mp3" type="audio/mpeg">

  <source src="midia/musica.ogg" type="audio/ogg">

  Seu navegador não suporta o elemento de áudio.

</audio>

Dica: Sempre use <source> para oferecer vários formatos compatíveis.
Boa prática: nunca force autoplay em páginas públicas — é melhor permitir o clique do usuário.

🎥 6. Inserindo Vídeos no HTML

A tag <video> é semelhante ao áudio.
  Permite exibir vídeos locais ou hospedados externamente.

📜 Estrutura básica:

<video src="midia/video.mp4" controls></video>

Atributo                                                           Função

width, height         →                               Define o tamanho do player.

controls                    →                               Mostra controles (play, pause, etc.).

poster                        →                               Define uma imagem de capa (thumbnail) antes de começar.

autoplay, loop, muted, preload   →   Funcionam da mesma forma que no <audio>.

💡 Exemplo avançado:

<video width="640" height="360" controls poster="imagens/thumb.jpg">

  <source src="midia/aula.mp4" type="video/mp4">

  <source src="midia/aula.webm" type="video/webm">

  Seu navegador não suporta vídeos HTML5.

</video>

🔹 Use múltiplos formatos para garantir compatibilidade.

 🔹 O atributo poster cria uma “thumbnail” até o vídeo começar. 

▶️ 7. Incorporando Vídeos Externos (YouTube, Vimeo, etc.)

É possível incorporar players externos com a tag <iframe> (iFrame = “frame embutido”).

💡 Exemplo do YouTube:

<iframe width="560" height="315"

  src="https://www.youtube.com/embed/dQw4w9WgXcQ"

  title="Vídeo no YouTube"

  frameborder="0"

  allowfullscreen>

</iframe>

🔹 A URL precisa estar no formato /embed/.
🔹 Você pode configurar permissões extras com o atributo allow= (por exemplo, "autoplay; clipboard-write; encrypted-media").

🎧 8. Incorporando Áudios Externos (Spotify, SoundCloud, etc.)

Esses serviços fornecem códigos de incorporação semelhantes ao YouTube.

💡 Exemplo (Spotify):

<iframe style="border-radius:12px"

  src="https://open.spotify.com/embed/track/xyz"

  width="300" height="80" frameborder="0" allow="autoplay; clipboard-write; encrypted-media"></iframe>

💬 Sempre verifique as políticas de uso e direitos autorais antes de incorporar conteúdo externo.

⚙️ 9. Acessibilidade em Multimídia

Para tornar sua página acessível, siga estas boas práticas:

1.    Sempre use alt em imagens;

2.    Evite autoplay;

3.    Inclua legendas e transcrições quando usar áudio ou vídeo;

4.    Descreva imagens complexas com <figcaption>;

5.    Forneça alternativas textuais ou contextuais (por exemplo, um resumo de um vídeo em texto).

💻 Exercício Prático 9

Crie um arquivo chamado midia.html com:

1.    Uma imagem principal e legenda usando <figure> e <figcaption>;

2.    Um áudio tocando em loop com controles;

3.    Um vídeo local com poster e botão de play;

4.    Um vídeo incorporado do YouTube;

5.    Um rodapé com créditos e direitos autorais.

✅ Desafio Extra:  

Adicione controle de volume e exiba a transcrição do áudio em texto logo abaixo para acessibilidade.

💬 Conclusão da Aula

Hoje você aprendeu:

●     A inserir imagens, áudios e vídeos no HTML;

●     A definir formatos otimizados e acessíveis;

●     A usar elementos semânticos como <figure> e <figcaption>;

●     A incorporar conteúdos de plataformas externas com segurança;

●     A aplicar boas práticas de usabilidade e acessibilidade audiovisual.

🔜 Próxima aula:

 Na Aula 10, aprenderemos sobre Listas Avançadas e Menus Complexos,

 combinando listas ordenadas, não ordenadas e de definição com estilos modernos.