Logo ← Voltar ao Portal da Disciplina Conheça meu trabalho como perito

Disciplina: Usabilidade, desenvolvimento web, mobile e jogos

HTML5 & Semântica

Prof. Dr. Lincoln Sposito

Data: 04 de Março de 2026

Roteiro de Atividades

Agenda do Dia

  • 01 Abertura e Ritual de Entrada (QR Code)
  • 02 Relação entre Estrutura (HTML) e UX
  • 03 Evolução do HTML Visual para o Semântico
  • 04 Anatomia do Documento: Metadados e Viewport
  • 05 Glossário Técnico: Tags de Seccionamento
  • 06 Princípios de Acessibilidade e IHC
  • 07 Intervalo (20 minutos)
  • 08 Formulários e Usabilidade Mobile
  • 09 Demonstração: Live Coding e Boas Práticas
  • 10 Atividade: Análise da Árvore de Elementos (DOM)
  • 11 Debate: Visão dos Autores e Qualidade Técnica
  • 12 Fechamento e Orientações Aula Prática

02 Relação entre Estrutura (HTML) e UX

O Esqueleto do Mundo Digital

O HTML não é uma linguagem de programação, mas de marcação. Ele define a intenção e a hierarquia do conteúdo.

Ele define a intenção e a hierarquia do conteúdo.

O HTML5 funciona como a fundação de qualquer projeto web, estabelecendo a hierarquia que será interpretada pelos navegadores." — Alves (2019)

03 Evolução do HTML Visual para o Semântico

O que é Semântica?

1. A Intenção (Gestão)

Evitar a "divitis". Escolher a peça certa para o propósito certo, assim como na administração se define cargos específicos (Diretor, Analista) em vez de "colaborador genérico".

<nav> em vez de <div>

2. Comunicação (Máquinas)

SEO & Acessibilidade: O Google e leitores de tela não "veem" o design, eles leem o significado. Sem semântica, a interface torna-se uma barreira para a inclusão.

<h1> indica o tópico principal

3. Visão dos Autores

Alves (2019): A semântica é a fundação que reflete a lógica dos dados.

Kalbach (2009): Estrutura lógica reduz a carga cognitiva do usuário.

Exemplo de Comparação:

Sem Semântica (Visual):

<span style="font-size: 24px;">Título</span>

Com Semântica (Significado):

<h1>Título da Aula</h1>

03 Evolução do HTML Visual para o Semântico

Por que a Semântica é a Base?

♿ Acessibilidade

Permite que leitores de tela interpretem a página, removendo barreiras para usuários com deficiência visual (Mota et al., 2023).

🔍 SEO & Máquinas

Motores de busca como o Google indexam o conteúdo com prioridade, entendendo o que é título e o que é corpo de texto.

🛠️ Manutenibilidade

Código limpo e legível. Reduz a carga cognitiva do desenvolvedor e analista (Kalbach, 2009).

// Estrutura Semântica Recomendada (Alves, 2019):

<header> <!-- Cabeçalho e Logo --> </header>
<nav> <!-- Links de Navegação --> </nav>
<main> <!-- O "Core" do Sistema --> </main>
<footer> <!-- Rodapé e Infos Legais --> </footer>

04 Anatomia do Documento: Metadados e Viewport

Anatomia: Metadados e Viewport

O Cérebro (<head>)

Local onde residem os Metadados. São instruções que o usuário não vê, mas que gerenciam como o navegador e os buscadores processam a página.

<meta charset="UTF-8">

Viewport: A Regra de Ouro

Essencial para o Mobile First. Informa ao navegador que a largura do site deve se adaptar à largura da tela do dispositivo (escala 1:1).

name="viewport" content="width=device-width"

Estrutura Base (Boas Práticas):

<!-- Define a versão do HTML -->
<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Título Profissional</title>
  </head>

Visão Técnica: Sem essas tags, o navegador tentará "adivinhar" a codificação e a escala, resultando em textos ilegíveis ou layouts quebrados em dispositivos móveis.

05 Glossário Técnico: Tags de Seccionamento

Estruturando o Conteúdo

<article>

Conteúdo autônomo e independente. Pode ser distribuído fora da página (ex: post de blog ou notícia).

<section>

Agrupamento temático. Usada para dividir capítulos, abas ou áreas distintas de um mesmo assunto.

<aside>

Conteúdo tangencial. Sidebar, publicidade ou citações que se relacionam indiretamente ao texto.

<nav>

Bloco de navegação. Deve conter os links principais para o fluxo do usuário no sistema.

"A semântica do HTML é o alicerce para um design de navegação que reduza a carga cognitiva do usuário."

— Kalbach (2009)

Visualização Prática

Aplicação das Tags de Seccionamento

Veja como as tags discutidas anteriormente se organizam para formar a arquitetura de uma página:

<header> & + <nav> (Logo e Menu)
<main>
<article> (Conteúdo 1)
<section> (Tópico Relacionado)
<aside>
(Sidebar)
<footer> (Rodapé e Informações Legais)

Dica do Perito: Observe que o <article> e a <section> estão contidos dentro do <main>. Essa hierarquia é o que permite ao Google e aos leitores de tela entenderem o que é o "coração" da sua página.

06 Princípios de Acessibilidade e IHC

Inclusão e Design Universal

👀 Percepção Digital

O atributo alt não é apenas para falhas de carregamento. É a voz da imagem para leitores de tela.

<img src="logo.png" alt="Logotipo da Empresa X">

⌨️ Operabilidade

A hierarquia de <h1> a <h6> funciona como um mapa para navegação via teclado. Pular níveis quebra a orientação do usuário.

*Referência: Mota et al. (2023)*

Visão de IHC (Interação Humano-Computador)

A semântica correta reduz a distância de execução: o esforço que o usuário faz para entender como interagir com o sistema. Um botão deve ser <button> para que o sistema assistivo anuncie uma "Ação" e não apenas um "Texto".

Preparação: Auditoria Empática

Validando a Integridade Semântica

🎯 O Propósito Técnico

Testar se a Hierarquia (Alves, 2019) e a Navegação Lógica (Kalbach, 2009) resistem à ausência do design. É a base da Empatia Técnica para IHC.

👥 Dinâmica em Duplas

1. O Usuário: Fecha os olhos. Depende 100% da semântica para "enxergar" o sistema.

2. O Navegador: Descreve a página apenas lendo as tags (ex: "Aqui é um nav", "Este é o h1").

Visão de Gestão: Para um Analista, não basta o código "funcionar". Ele precisa ser interoperável e inclusivo (Mota et al., 2023). Auditoria reversa é o padrão ouro de qualidade.

Ação: Teste do Cego

Escolha o Alvo e Audite

g1.com.br

Foco: Notícias, <article> e hierarquia de títulos (H1-H6).

uol.com.br

Foco: Navegação complexa, <nav> e conteúdos em <aside>.

O que observar durante o teste:

Empatia (Item 06): Conseguiu se localizar sem ver?
Estrutura (Item 04): Os títulos criaram um mapa mental?
Semântica (Item 05): As tags definiram as áreas?

"Se o código não explica o que a interface mostra, a usabilidade faliu."

Fechamento da Atividade

O que você observou?

Identifique em qual cenário o site auditado pela sua dupla se encaixa. Estes são os Sinais de Maturidade Semântica:

✅ Cenário de Alta Qualidade

  • Estrutura: O "usuário cego" entendeu a hierarquia de notícias apenas pelos títulos (H1-H6).
  • Navegação: Ficou claro onde terminava o menu (nav) e começava o conteúdo (main).
  • Contexto: O atributo alt descreveu as imagens com precisão.

Resultado: Usabilidade plena e SEO otimizado.

⚠️ Cenário de Baixa Qualidade

  • "Divitis": O navegador só encontrou <div> genéricas, dificultando a localização.
  • Confusão: Conteúdos secundários (anúncios) foram lidos como se fossem principais.
  • Barreira: Imagens sem alt deixaram o usuário "no escuro".

Resultado: Alta carga cognitiva e exclusão digital.

💡 Conclusão do Analista: Se o seu site caiu no Cenário B, ele falhou nos princípios de Kalbach (2009) e Mota (2023). Como gestores, nosso papel é garantir que a arquitetura do sistema (HTML) suporte a experiência do cliente (UX).

Fundamentação Científica

Princípios de Navegação e Inclusão

🧭 Kalbach (2009)

Foco: Arquitetura e Carga Cognitiva

  • Previsibilidade: A estrutura semântica permite que o utilizador antecipe onde encontrar a informação.
  • Consistência: Tags corretas criam um mapa mental que reduz o esforço de aprendizagem da interface.
  • Redução de Ruído: Menos "divs" genéricas significam uma navegação mais fluida e intuitiva.

♿ Mota et al. (2023)

Foco: Acessibilidade Tecnológica

  • Perceção Assistiva: Garantia de que conteúdos não textuais (imagens) sejam interpretados via alt.
  • Operabilidade: O uso de tags de seccionamento é o que permite a navegação por voz ou teclado.
  • Robustez: Código padronizado funciona em qualquer dispositivo, eliminando barreiras digitais.

💡 Síntese Técnica: Enquanto Kalbach foca na eficiência da mente humana ao processar a estrutura, Mota foca na capacidade da tecnologia em mediar essa experiência para todos. Como gestores, integramos ambos para garantir Qualidade de Software.

07 Intervalo (20 minutos)

Hora de Recarregar

☕ Café e Networking

Aproveite para trocar percepções rápidas sobre a auditoria. O que mais surpreendeu a sua dupla no G1 ou UOL?

🧠 Descanso Cognitivo

Segundo Kalbach (2009), pausas são essenciais para consolidar novos modelos mentais de navegação.

20:00

Tempo Restante

08 Formulários e Usabilidade Mobile

A Ponte entre Código e Hardware

📱 Teclados Contextuais

A semântica do type define qual teclado o sistema operacional abrirá no mobile. Isso reduz o erro e o tempo de preenchimento.

<input type="tel"> // Teclado Numérico
<input type="email"> // Teclado com @

🎯 Precisão do Toque

O uso da tag <label> vinculada ao input expande a área de clique, essencial para a ergonomia do dedo humano (Mota et al., 2023).

<label for="nome">Nome</label>
<input id="nome" type="text">

Visão do Perito: Gestão de Erros

Em sistemas mobile, o formulário é o ponto de maior carga cognitiva. Utilizar placeholder, required e tipos específicos é uma estratégia de prevenção de erros na fonte, garantindo a integridade dos dados que alimentam o back-end.

09 Demonstração: Live Coding e Boas Práticas

Do Erro à Excelência Técnica

⚠️ O que evitar (Bad Practices)

  • "Divitis": Usar <div> para tudo, matando a semântica.
  • Salto de Títulos: Usar <h3> antes do <h1> por causa do tamanho da fonte.
  • Imagens Mudas: Esquecer o atributo alt.

✅ O que buscar (Best Practices)

  • Indentação: Código limpo facilita a manutenção e auditoria.
  • Hierarquia Lógica: Títulos que funcionam como um sumário.
  • Contexto Mobile: Inputs configurados para o hardware correto.

[CONSOLE DE DEMONSTRAÇÃO]

Vamos construir agora uma estrutura que respeite os princípios de Kalbach e Mota.

> Abrindo Editor...
> Validando Document Type...
> Aplicando Semântica de Seccionamento...

09 Demonstração: Live Coding

Evolução do Código em Tempo Real

❌ ABORDAGEM GENÉRICA (Divitis) 

					


					

						

							✅ HTML5 SEMÂNTICO (Otimizado)
						

						

					

				


				

					
				

			


			
		
		
		

			

				
Refatoração Técnica

				
Bad Practices vs. Best Practices

				
				

					
					

						

							❌ "DIVITIS" (Genérico / Sem Significado)
						

						

							<div id="topo">

							  <div class="logo">Logo</div>

							  <div class="menu">...</div>

							</div>


							<div id="conteudo-principal">

							  <div class="post">

							    <span style="font-size: 24px;">Título</span>

							    <div>Texto da notícia...</div>

							  </div>

							</div>


							<div id="rodape">Contato</div>
						

						

							Problema: O navegador e o Google veem apenas "caixas" vazias. Acessibilidade zero.
						

					


					

						

							✅ HTML5 SEMÂNTICO (Lógica e Intenção)
						

						

							<header>

							  <h1>Logo</h1>

							  <nav>...</nav>

							</header>


							<main>

							  <article>

							    <h2>Título da Notícia</h2>

							    <p>Texto da notícia...</p>

							  </article>

							</main>


							<footer>Contato</footer>
						

						

							Solução: Cada tag explica sua função. Melhora o SEO, o hardware mobile e o IHC.
						

					


				


				

				

					

						💡 Visão do Analista: Note que no exemplo da esquerda, o estilo visual (tamanho da fonte no span) tenta substituir o significado. No exemplo da direita, a tag <h2> já carrega o significado de "Subtítulo" naturalmente.
					

				


				

					
				

			

		

		

			

				
10 Atividade: Análise da Árvore de Elementos 
(DOM - Document Object Model)

				
Desconstrução do Portal

				
				

					Utilize o seu caderno ou um editor de texto para realizar a engenharia reversa do nosso portal da disciplina:
				


				

					
					

						
🌳 O Desafio: Mapear o DOM

						

							Desenhe a Árvore de Elementos que você imagina que sustenta a página atual. Identifique os "Nós" (Nodes) principais.
						

						
    
							
  • Quem é o elemento Pai (Parent)?
    • 
							
  • Quais são os elementos Filhos (Children)?
    • 
						

					


					

						
🔎 O que procurar?

						

							Aplique o Glossário do Item 05. O portal utiliza as tags corretas para:
						

						

							- Header/Nav (Topo)

							- Main/Section (Conteúdo)

							- Footer (Rodapé)
						

					

				


				

				

					

						💡 Conexão Acadêmica: Segundo Alves (2019), a árvore DOM deve refletir a hierarquia de importância da informação. Se a árvore for "plana" demais (cheia de divs no mesmo nível), a carga cognitiva para o sistema interpretar a página aumenta.
					

				


				

					
				

			

		
		
		

			

				
Entendendo a Estrutura

				
A Anatomia da Árvore (DOM)

				
				

					
					

						

							Imagine o código como uma família ou um organograma. Cada elemento é um "Nó" (ponto de conexão):
						

						
						
    
							
  • 
								🌳 Nó Raiz (Root): O elemento <html>. Ele é o "CEO" ou o patriarca que contém tudo.
							
    • 
							
  • 
								🌿 Nó Pai (Parent): Um elemento que contém outros (ex: o <body> é pai do <main>).
							
    • 
							
  • 
								🍃 Nó Filho (Child): Elementos dentro de um pai (ex: as <li> são filhas da <ul>).
							
    • 
						

					


					

						<html> <!-- Raiz -->

						  <body> <!-- Pai -->

						    <header>

						      <h1>Título</h1>

						    </header>

						    <main>

						      <p>Texto</p>

						    </main>

						  </body>

						</html>
					

				


				

					

						💡 Visão de Gestão: Se a sua árvore tem "galhos" demais sem necessidade (ex: 10 <div> para um único texto), você está criando uma Dívida Técnica e aumentando a carga de processamento do navegador.
					

				


				

					
				

			

		

		

			

				
Mapa de Engenharia Reversa

				
A Árvore DOM em Detalhes

				
				

					Este é o modelo mental que deve guiar a sua análise. Observe a hierarquia dos Nós (Nodes) e como as tags semânticas se ramificam:
				


				

					Diagrama Hierárquico da Árvore DOM para Aula de IHC
				


				

					

						Raiz e Head
						Contêm os metadados e a definição do documento (Item 04).
					

					

						Corpo (Body)
						Onde a navegação lógica e a carga cognitiva são processadas.
					

					

						Folhas (Leaf Nodes)
						As tags finais (p, h2, li) que entregam o conteúdo ao usuário.
					

				


				

					
				

			

		
		
		

			

				
11 Debate: Visão dos Autores e Qualidade Técnica

				
A Convergência entre Teoria e Prática

				
				

					
					

						
💬 Dialética IHC

						

							Como a redução da Carga Cognitiva (Kalbach, 2009) impacta diretamente no ROI (Retorno sobre Investimento) de um produto digital?
						

						

							"Um sistema difícil de usar é um sistema caro de manter."
						

					


					

						
🛡️ Ética e Acessibilidade

						

							A visão de Mota et al. (2023): A acessibilidade é um "favor" ao usuário ou um requisito técnico de conformidade legal e qualidade?
						

						
    
							
  • Interoperabilidade de sistemas.
    • 
							
  • Sustentabilidade do código (Clean Code).
    • 
						

					

				


				

					
Pautas de Discussão Aberta:

					

						

							O que acontece com o SEO quando ignoramos a árvore DOM?
						

						

							Semântica no desenvolvimento de Jogos vs. Web Tradicional.
						

					

				


				

					
				

			

		
		
		

			

				
Síntese Estratégica

				
Conclusão: Semântica como Ativo de Negócio

				
				

					

						Após analisarmos a visão de Kalbach (2009) e Mota (2023), consolidamos que o HTML Semântico não é uma escolha estética, mas uma decisão de Engenharia de Qualidade:
					


					

						

							
🚀 Eficiência Operacional

							
Estruturas lógicas reduzem a Carga Cognitiva e o tempo de manutenção, permitindo que o sistema escale sem "dívida técnica".

						


						

							
🌍 Responsabilidade Digital

							
A Acessibilidade integrada ao DOM garante que o produto alcance 100% dos usuários, cumprindo requisitos legais e éticos.

						

					


					

						

							"Um código que não comunica seu significado às máquinas falha em sua missão de servir aos humanos."
						

					

				


				

				

					
				

			

		
		
		

			

				
12 Fechamento e Orientações Aula Prática

				
Próximos Passos: Da Teoria à Prática

				
				

					
					

						

							💻 Laboratório (Prática)
						

						
Data: Quinta-feira (05/03) 

						
							
							
							
							
						
					


					

						

							📚 Conteúdo Teórico II
						

						
Data: Próxima Quarta-feira (11/03)

						
    
							
  • Introdução ao CSS: Estilização de Containers.
    • 
							
  • Box Model: Margens, Bordas e Padding.
    • 
							
  • Relação entre CSS e a Percepção Visual (IHC).
    • 
							
  • Otimização de Assets para Performance.
    • 
						

					

				


				

					

						📌 Checklist para Quinta-feira: Revisem os princípios de Kalbach (2009) e tragam o mapeamento da Árvore DOM que iniciamos hoje. A qualidade do seu código no laboratório será reflexo da clareza da sua estrutura mental.
					

				


				

					

						Dr. Lincoln Sposito | IHC & Desenvolvimento Web

						2026 - Gestão e Tecnologia
					

					
				

			

		
		
		

			

				
Verificação de Aprendizado

				
Validação da Integridade Semântica

				
				

					Com base nos princípios de Kalbach e Mota vistos hoje, você sente segurança para estruturar um documento HTML semântico?
				

				
				

					

					
				


				

					

						📊 Dashboard do Perito (GA4 Real-time)
					

					

						Dr. Lincoln, acesse Relatórios > Tempo Real e aplique o filtro: 
						
							Event Name = aprendizado_semantica
						
					

					

						*Esta coleta de dados permite ajustar a carga cognitiva da aula prática na quinta-feira.*
					

				


				

					Seu voto é anônimo e utilizado apenas para fins de melhoria didática.
				

			

		

		

			

				
					Métrica de Experiência (UX)
				
				
				
O que achou da aula de hoje?

				

					Seu feedback anônimo é o nosso KPI de Qualidade. Ele alimenta o dashboard de satisfação em tempo real para ajustes na próxima aula.
				

				
				

				

				

					

						Módulo: HTML5 & Semântica | Referência: 04/03/2026