O documento discute a importância da semântica no HTML para aplicações web, mencionando como ela beneficia o SEO, a acessibilidade e boas práticas de desenvolvimento. Explica a diferença entre tags semânticas e não semânticas, assim como atributos globais e especiais do HTML que auxiliam na semântica. Defende que olhar para a semântica permite ter aplicações melhores no longo prazo.

1. Um olhar para o HTML
O poder da
semântica em
aplicações Web

2. Quem é a Gisely?

3. Nivelando
conceitos

4. HTML

5. DOM

6. O QUE É A
SEMÂNTICA DO
HTML

7. MAS POR QUÊ
FALAR DE
SEMÂNTICA DO
HTML?
SEO, Acessibilidade, Narrativa,
Boas Práticas, Manutenção ...

8. SEO

9. A11Y
TREE

10. UM OLHAR SOBRE OS ELEMENTOS
HTML

11. Tags Semânticas
<h1...6> <p> <img> <a> <button> ...
Tags sem Semântica
<div> <span>
CONFORME O
SIGNIFICADO

12. Tags Interativas
<a> <form> <input> <button> ...
Tags sem Interação
<h1...6> <p> <img> <div> <span> ...
CONFORME A
INTERAÇÃO

14. UM OLHAR SOBRE OS ATRIBUTOS
HTML

15. ATRIBUTOS GLOBAIS
Atributos de estilos
style, class, id*
Atributos de foco
tabIndex, accessKey
Atributos de linguagem
lang, dir*
Outros
title

16. ATRIBUTOS ESPECIAIS
Atributos WAI-ARIA
role, aria-required, aria-live, aria-label ...
Atributos Data-*
data-test, data-parent, data-column ...

17. Olhar para semântica é
permitir ter aplicações
melhores a longo prazo

18. ALGUMAS REFERÊNCIAS
LEGAIS
MDN HTML
HTML doc - W3C
DOM doc - W3C
Eloquent Javascript
WCAG 2.1 Documentação
WebAIM - Web Accessibility In Mind
Web Accessibility - curso na Udacity
Web Developers - Acessibilidade

19. OBRIGADA!
Me encontrem nas redes:
https://dev.to/giselylucas
giselylucasb