UA1 — HTML: Fundamentos — Responsive Web Development

UA1 — HTML: Fundamentos

HTML (HyperText Markup Language) é a linguagem de marcação que estrutura o conteúdo das páginas web. É a base de tudo na web.

Construindo a Web — guia visual do HTML5

Estrutura mínima de um documento HTML

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Minha Página</title>
  </head>
  <body>
    <h1>Olá, mundo!</h1>
  </body>
</html>

DOCTYPE — por que importa?

O <!DOCTYPE html> informa ao navegador a versão do HTML sendo usada, ativando o modo de renderização correto:

DOCTYPE	Versão
`<!DOCTYPE html>`	HTML5 (recomendado)
`<!DOCTYPE HTML PUBLIC ”-//W3C//DTD HTML 4.01 Strict//EN” …>`	HTML 4.01 Strict
`<!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Strict//EN” …>`	XHTML 1.0 Strict

Tags essenciais

Títulos

h1 a h6 — hierarquia de títulos. Use apenas um h1 por página.

Parágrafos

p — bloco de texto. br para quebra de linha simples.

Links

a href="url" — âncora. target="_blank" abre em nova aba.

Imagens

img src="..." alt="..." — sempre use alt para acessibilidade.

Listas

ul (não ordenada) e ol (ordenada). Itens com li.

Divisões

div (bloco genérico) e span (inline genérico).

Atributos globais importantes

Atributo	Descrição
`id`	Identificador único do elemento na página
`class`	Classe(s) para estilização CSS / seleção JS
`style`	CSS inline (evitar — prefira folhas externas)
`title`	Tooltip ao passar o mouse
`data-*`	Atributos customizados para uso em JS

Boas práticas desde o início

Sempre declare lang no <html>, use charset="UTF-8" e inclua a meta viewport — são os três obrigatórios para qualquer página profissional.

Evolução do HTML

Versão	Ano	Principal contribuição
HTML 1.0	1993	Estrutura básica: links, imagens, texto (criado por Tim Berners-Lee)
HTML 2.0	1995	Formulários; padronizado pela IETF
HTML 3.2	1997	Tabelas, scripts, estilos inline — W3C assume o padrão
HTML 4.01	1999	Separação conteúdo/apresentação, incentiva CSS. Variantes: Strict, Transitional, Frameset
XHTML 1.0	2000	HTML 4.01 com sintaxe XML mais rígida (4 variantes)
HTML5	2014	Tags semânticas, APIs nativas, multimídia sem plugins, DOCTYPE simplificado

Tags de formatação de texto

Tag	Efeito visual	Semântica
`<strong>`	Negrito	Alta importância (semântico)
`<b>`	Negrito	Apenas visual, sem significado
`<em>`	Itálico	Ênfase (semântico)
`<i>`	Itálico	Apenas visual, sem significado
`<del>`	Tachado	Texto removido/excluído
`<ins>`	Sublinhado	Texto inserido
`<mark>`	Destaque amarelo	Texto relevante/marcado
`<small>`	Menor	Texto secundário, copyright
`<sup>` / `<sub>`	Sobrescrito / subscrito	Ex.: x² ou H₂O
`<pre>`	Pré-formatado (monospace)	Respeita espaços e quebras exatamente como digitado
`<code>`	Monospace inline	Trecho de código-fonte

Atributos do elemento `<a>`

Atributo	Descrição	Observação
`href=“url”`	Destino do link	URL completa ou caminho relativo
`target=“_blank”`	Abre em nova aba	Sempre use `rel=“noopener noreferrer”`
`target=“_self”`	Mesma aba (padrão)	—
`title=“texto”`	Dica ao passar o mouse	—
`download=“nome”`	Força download do arquivo	Pode sugerir nome diferente do original
`href=“mailto:…”`	Abre cliente de e-mail	`?subject=Assunto&body=Texto`
`href=“#id”`	Âncora interna (mesma página)	Rola até o elemento com aquele `id`

Lista de definição — `<dl>`

Terceiro tipo de lista HTML: funciona como glossário, sem marcadores ou numeração.

<dl>
  <dt>HTML</dt>             <!-- dt = termo -->
  <dd>Linguagem de marcação de hipertexto.</dd>  <!-- dd = definição -->

  <dt>CSS</dt>
  <dd>Folhas de estilo em cascata.</dd>
</dl>

Tabela — estrutura semântica completa

Tag / Atributo	Função
`<table>`	Contêiner da tabela
`<thead>`	Grupo do cabeçalho (pode ser repetido ao imprimir)
`<tbody>`	Corpo principal da tabela
`<tfoot>`	Rodapé da tabela (totais, notas)
`<tr>`	Linha
`<th>`	Célula de cabeçalho (negrito + centralizado por padrão)
`<td>`	Célula de dados
`colspan=“n”`	Mescla n colunas horizontalmente
`rowspan=“n”`	Mescla n linhas verticalmente

Evite a “div-ite”

Antes do HTML5 os desenvolvedores usavam <div> para tudo, tornando o código ilegível — prática chamada de div-itis. As tags semânticas (<header>, <nav>, <main>, <section>, <article>, <aside>, <footer>) resolvem isso ao dar significado estrutural ao conteúdo, melhorando acessibilidade e SEO. Use <div> apenas quando não existir tag semântica adequada.

Dicas para a prova — UA1

As 4 TAGs básicas: <html>, <head>, <body> e <title>.
Cabeçalhos de título: <h1> até <h6> — não confundir com <title> ou <header>.
Formatos de imagem suportados: GIF, JPG e PNG (não BMP, DOC, PSD, CDR).
Quebra de linha dentro de parágrafo: <br/> — não existe <breake> nem <line>.
Tipos de lista: <ol> (ordenada), <ul> (não ordenada) e <dl> (definição).
<strong> = semântico (importância); <b> = só visual. Idem <em> vs <i>.
thead, tbody, tfoot organizam a tabela; colspan mescla colunas, rowspan mescla linhas.

Referências bibliográficas desta UA

Machado, V. A. Ferramentas de Desenvolvimento Web. Porto Alegre: SAGAH, 2024.
Miletto, E. M.; Bertagnolli, S. C. Desenvolvimento de Software II. Porto Alegre: Bookman, 2014.

UA2 — HTML5