📝 Capítulo 02: Textos, Links, Mídias e Tabelas em HTML5

Módulo 04: HTML5 e CSS3 Moderno • Bloco 1: Fundamentos da Web & HTML5 Semântico

🗺️ Mapa Conceitual do Capítulo

flowchart TD
    subgraph SEMANTIC_TEXT["Semântica Textual & Hiperlinks"]
        HEADINGS["Hierarquia <h1> a <h6> (Linear e Sem Saltos)"]
        EMPHASIS["Ênfase Semântica: <strong> e <em> (Significado Real) vs <b> e <i> (Visual Puro)"]
        TIMETAG["<time datetime='2026-09-28'> (Dados Legíveis por Máquinas)"]
        LINKS["Hiperlinks Seguros: target='_blank' + rel='noopener noreferrer'"]
    end

    subgraph RESPONSIVE_MEDIA["Mídias Responsivas & Performance"]
        PICTURE["<picture>: Art Direction & Formatos Modernos (AVIF / WebP)"]
        IMG_SRCSET["<img> com srcset e sizes (Resolução adaptativa a 1x, 2x, 3x DPR)"]
        CLS_GUARD["width e height explícitos (Prevenção de Cumulative Layout Shift - CLS)"]
        MEDIA_AV["<video> e <audio> com <track kind='subtitles'> (Legendas VTT)"]

        PICTURE --> IMG_SRCSET --> CLS_GUARD
    end

    subgraph TABULAR_DATA["Tabelas Acessíveis (Dados Relacionais)"]
        CAPTION["<caption>: Título Semântico Obrigatório"]
        SECTIONS["<thead> · <tbody> · <tfoot>"]
        SCOPE["<th> com scope='col' ou scope='row' (Navegação em Leitores de Tela)"]
        CAPTION --> SECTIONS --> SCOPE
    end

📝 1. Semântica Textual Profunda e Hiperlinks Seguros

Muitos desenvolvedores utilizam tags com foco puramente estético. No HTML5, cada tag textual expressa uma intenção semântica interpretada por sintetizadores de acessibilidade e robôs de indexação:

Elemento Semântico	Finalidade Estrutural	Equivalente Puramente Visual (Evitar)
`<strong>`	Denota grande importância ou urgência no conteúdo.	`<b>` (Apenas deixa o texto em negrito sem ênfase auditiva)
`<em>`	Ênfase tônica que altera o sentido da frase quando lida em voz alta.	`<i>` (Apenas formatação em itálico ou voz idiomática)
`<mark>`	Texto destacado por relevância em outro contexto (ex.: termos de busca).	`<span class="destaque">`
`<time datetime="...">`	Representa datas e horários padronizados legíveis por algoritmos e calendários.	`<span class="data">`
`<abbr title="...">`	Expansão de siglas e acrônimos para leitores de tela.	`<span>` com texto direto
`<code>` e `<pre>`	Trechos literais de código e blocos pré-formatados preservando quebras de linha.	`<div class="code">`

O Perigo do Reverse Tabnabbing em Links Externos

Ao utilizar target="_blank" para abrir links em uma nova aba, a aba recém-aberta ganha acesso ao objeto window.opener da página original. Um site malicioso pode alterar window.opener.location e redirecionar a aba original do usuário para uma página de Phishing falsa.

<!-- ✅ VULNERABILIDADE ELIMINADA: -->
<a href="https://externo.com" target="_blank" rel="noopener noreferrer">
  Documentação Oficial da W3C
</a>

noopener: Corta o acesso ao ponteiro window.opener, garantindo que o novo processo execute em uma thread separada.
noreferrer: Impede o envio do cabeçalho Referer, não revelando a URL da página de origem ao destino.

🖼️ 2. Imagens Responsivas: `<picture>`, `srcset` e Mitigação de CLS

No desenvolvimento web profissional, nunca se serve uma única imagem gigante de 4000 pixels para todos os dispositivos. Há duas técnicas complementares:

flowchart LR
    subgraph STRATEGIES["Estratégias de Imagem Responsiva"]
        S1["Art Direction / Troca de Formato\nUsa <picture> com <source media='' type=''>"]
        S2["Adaptação de Resolução / DPR\nUsa <img srcset='' sizes=''>"]
    end

1. O Elemento `<picture>` para Direção de Arte e Formatos AVIF/WebP:

Permite que o navegador baixe o formato mais moderno que ele for capaz de decodificar (como AVIF, que entrega até 50% mais compressão que JPEG), caindo gradualmente em fallbacks seguros:

<picture>
  <!-- 1. Tenta formato AVIF de altíssima compressão: -->
  <source srcset="foto-hero.avif" type="image/avif">
  <!-- 2. Fallback para WebP moderno: -->
  <source srcset="foto-hero.webp" type="image/webp">
  <!-- 3. Imagem base de fallback universal com dimensões declaradas: -->
  <img 
    src="foto-hero.jpg" 
    alt="Engenheiro inspecionando servidores em datacenter moderno" 
    width="1200" 
    height="675" 
    loading="lazy" 
    decoding="async">
</picture>

2. A Prevenção Mandatória do CLS (Cumulative Layout Shift):

Se uma imagem não possuir os atributos width e height definidos no HTML, o navegador não sabe qual é a proporção de aspecto (Aspect Ratio) do arquivo antes que o download termine. Quando o arquivo é baixado, o layout da página “pula” repentinamente para abrir espaço, destruindo a pontuação no Core Web Vitals.

Declarar width="1200" e height="675" cria uma reserva geométrica automática no CSS moderno (aspect-ratio: 1200 / 675), garantindo zero saltos visuais.

🎬 3. Mídias Nativas e Acessibilidade com Legendagem (`<track>`)

O HTML5 eliminou plugins proprietários (como Flash) com as tags nativas <video> e <audio>:

<video controls preload="metadata" width="800" height="450" poster="thumb.webp">
  <source src="aula-html.mp4" type="video/mp4">
  <source src="aula-html.webm" type="video/webm">
  
  <!-- Acessibilidade para deficientes auditivos (Padrão WebVTT): -->
  <track 
    kind="subtitles" 
    src="legendas-pt.vtt" 
    srclang="pt-BR" 
    label="Português" 
    default>
  <p>Seu navegador não suporta reprodução nativa de vídeo. <a href="aula-html.mp4">Baixe o vídeo</a>.</p>
</video>

📊 4. Estruturação Canônica de Tabelas de Dados Tabulares

Tabelas devem ser reservadas estritamente para dados relacionais tabulares (planilhas, relatórios financeiros, inventários), e nunca para construir o layout da página:

<table class="tabela-financeira">
  <!-- 1. Legenda obrigatória para leitores de tela e contexto: -->
  <caption>Relatório Comparativo de Receitas e Despesas (2026)</caption>
  
  <colgroup>
    <col class="col-trimestre">
    <col class="col-valores" span="2">
  </colgroup>

  <thead>
    <tr>
      <th scope="col">Período</th>
      <th scope="col">Receita Bruta</th>
      <th scope="col">Despesa Operacional</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <!-- scope="row" vincula a célula de cabeçalho àquela linha inteira: -->
      <th scope="row">1º Trimestre</th>
      <td>R$ 145.000,00</td>
      <td>R$ 82.000,00</td>
    </tr>
    <tr>
      <th scope="row">2º Trimestre</th>
      <td>R$ 180.000,00</td>
      <td>R$ 95.000,00</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <th scope="row">Total Acumulado</th>
      <td>R$ 325.000,00</td>
      <td>R$ 177.000,00</td>
    </tr>
  </tfoot>
</table>

O Atributo scope="col" e scope="row": Permite que usuários de leitores de tela entendam a que cabeçalho cada valor pertence ao navegar de célula em célula por atalhos de teclado.