UA2 — HTML5 — Responsive Web Development

UA2 — HTML5

HTML5 trouxe novas tags semânticas, APIs nativas e suporte a multimídia sem plugins.

Tags Semânticas

Semântica = significado. Tags semânticas descrevem o papel do conteúdo, melhorando acessibilidade e SEO:

<header>  <!-- cabeçalho da página/seção -->
<nav>     <!-- menu de navegação -->
<main>    <!-- conteúdo principal (único por página) -->
<article> <!-- conteúdo independente (post, notícia) -->
<section> <!-- seção temática do conteúdo -->
<aside>   <!-- conteúdo lateral/complementar -->
<footer>  <!-- rodapé da página/seção -->

Estrutura semântica típica

<body>
  <header>
    <nav>...</nav>
  </header>

  <main>
    <section>
      <article>...</article>
    </section>
    <aside>...</aside>
  </main>

  <footer>...</footer>
</body>

Multimídia nativa

<!-- Vídeo -->
<video controls width="640">
  <source src="video.mp4" type="video/mp4">
</video>

<!-- Áudio -->
<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
</audio>

Novas APIs HTML5

Canvas

Área de desenho 2D via JavaScript. Gráficos, jogos, animações.

Geolocation

Acesso à localização do usuário com permissão.

LocalStorage

Armazenamento de dados no navegador sem expiração.

Web Workers

Scripts em background thread — sem travar a UI.

div vs. semânticas — quando usar cada

Situação	Use
Conteúdo com papel claro (nav, header…)	Tag semântica
Container só para layout/estilo	`div`
Texto inline sem papel semântico	`span`

Âncoras — navegação dentro da página

Âncoras direcionam o usuário para um ponto específico dentro da mesma página usando o atributo id:

<!-- 1. Definir o destino com id -->
<h2 id="contato">Contato</h2>

<!-- 2. Link para o destino -->
<a href="#contato">Ir para Contato</a>

<!-- Voltar ao topo -->
<a href="#">Voltar ao topo</a>

Útil em páginas longas: menus de índice no topo que pulam direto para a seção desejada.

Listas aninhadas

Listas podem ser misturadas e aninhadas — uma ul dentro de um li de outra lista, inclusive de tipo diferente:

<ul>
  <li>Cores primárias
    <ol>
      <li>Vermelho</li>
      <li>Azul</li>
      <li>Amarelo</li>
    </ol>
  </li>
  <li>Cores secundárias</li>
</ul>

Comparação: tags semânticas vs `<div>`

Tag semântica	Significado	Equivalente genérico
`<header>`	Cabeçalho da página ou seção	`<div id=“header”>`
`<nav>`	Bloco de navegação principal	`<div id=“nav”>`
`<main>`	Conteúdo principal (único por página)	`<div id=“main”>`
`<section>`	Uma ou mais áreas temáticas da página	`<div class=“section”>`
`<article>`	Conteúdo independente (post, notícia)	`<div class=“article”>`
`<aside>`	Conteúdo complementar / lateral	`<div id=“aside”>`
`<footer>`	Rodapé da página ou seção	`<div id=“footer”>`

Práticas Modernas — HTML5 além do básico

ARIA (Accessible Rich Internet Applications): quando uma tag semântica não existe para o papel desejado, use atributos ARIA — role="banner", aria-label="...", aria-hidden="true". Leitores de tela dependem disso. Web Components: padrão nativo que permite criar tags HTML customizadas (<meu-componente>) encapsulando estrutura, estilo e comportamento — base de frameworks como React e Vue. Lazy loading nativo: <img loading="lazy"> — carrega imagens somente quando elas entram na viewport, sem JavaScript.

Dicas para a prova — UA2

<!DOCTYPE html> (sem número de versão) indica que o documento é HTML5.
<section> define uma ou mais áreas temáticas da página.
<pre> exibe o texto tal qual está digitado no código-fonte, preservando espaços e quebras de linha.
Âncoras (href="#id") direcionam para um ponto dentro da mesma página — não abrem outra URL.
Listas podem ser aninhadas com tipos diferentes: ul dentro de ol e vice-versa.
A tag <main> deve ser única por página; <header> e <footer> podem aparecer em múltiplas seções.

Referências bibliográficas desta UA

Saraiva, M. O. Desenvolvimento de Sistemas com PHP. Porto Alegre: SAGAH, 2018.
Freeman, E.; Robson, E. Use a Cabeça! HTML e CSS. O’Reilly, 2014.

UA1 — HTML: Fundamentos UA3 — Formulários HTML5