Upgrade to Pro — share decks privately, control downloads, hide ads and more …

HTML 5.3: O que existe além de a11y e SEO?

Avatar for Afonso Pacifer Afonso Pacifer
January 18, 2023
Programming
0
190

HTML 5.3: O que existe além de a11y e SEO?

Avatar for Afonso Pacifer

Afonso Pacifer

January 18, 2023
Tweet

More Decks by Afonso Pacifer

See All by Afonso Pacifer
Developer Experience (DevEx) no mundo Front-End: Do Ruby ao Next.js
Avatar for Afonso Pacifer afonsopacifer
0
71
Open Source e Developer Experience
Avatar for Afonso Pacifer afonsopacifer
1
110
Conhecendo a área de Developer Experience (DevEx)
Avatar for Afonso Pacifer afonsopacifer
0
85
Do Zero ao Sênior Apenas com Projetos Open Source
Avatar for Afonso Pacifer afonsopacifer
1
91
Guia para se tornar uma Pessoa Desenvolvedora Front-end Especialista
Avatar for Afonso Pacifer afonsopacifer
0
87
Recriando o React do Zero em 10 minutos
Avatar for Afonso Pacifer afonsopacifer
0
96
O CAMINHO PARA SE TORNAR UM(A) MESTRE(A) DOS ESTILOS COM CSS LV 5.
Avatar for Afonso Pacifer afonsopacifer
0
200
State of JS 2022
Avatar for Afonso Pacifer afonsopacifer
0
300
Welcome CSS LV5
Avatar for Afonso Pacifer afonsopacifer
0
230

Other Decks in Programming

See All in Programming
GISエンジニアから見たLINKSデータ
Avatar for nokonoko1203 nokonoko1203
0
190
PostgreSQLで手軽にDuckDBを使う！DuckDB&pg_duckdb入門/osc25hi-duckdb
Avatar for Takahashi Ikki takahashiikki
0
210
tsgolintはいかにしてtypescript-goの非公開APIを呼び出しているのか
Avatar for syumai syumai
7
2.4k
[AtCoder Conference 2025] LLMを使った業務AHCの上⼿な解き⽅
Avatar for terry-u16 terryu16
6
960
生成AI時代を勝ち抜くエンジニア組織マネジメント
Avatar for coconala_engineer coconala_engineer
0
35k
AtCoder Conference 2025「LLM時代のAHC」
Avatar for Yuki Imajuku imjk
2
610
Tinkerbellから学ぶ、Podで DHCPをリッスンする手法
Avatar for Tomofumi Kondo tomokon
0
150
Rubyで鍛える仕組み化プロヂュース力
Avatar for muryoimpl muryoimpl
0
230
re:Invent 2025 のイケてるサービスを紹介する
Avatar for maroon1st maroon1st
0
160
Findy AI+の開発、運用におけるMCP活用事例
Avatar for starfish719 starfish719
0
1.9k
実は歴史的なアップデートだと思う AWS Interconnect - multicloud
Avatar for maroon1st maroon1st
0
280
SQL Server 2025 LT
Avatar for Oda Shinsuke odashinsuke
0
100

Featured

See All Featured
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
304
21k
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.5k
Leadership Guide Workshop - DevTernity 2021
Avatar for David Neal reverentgeek
1
170
Unsuck your backbone
Avatar for Amy Palamountain ammeep
671
58k
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
Avatar for David Neal reverentgeek
1
300
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
35
3.3k
How to make the Groovebox
Avatar for あそなす asonas
2
1.9k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
791
250k
Game over? The fight for quality and originality in the time of robots
Avatar for Wayne Barker wayneb77
1
71
How Software Deployment tools have changed in the past 20 years
Avatar for Geshan Manandhar geshan
0
30k
First, design no harm
Avatar for Per Axbom axbom
PRO
1
1.1k
Organizational Design Perspectives: An Ontology of Organizational Design Elements
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
46

Transcript

  1. afonsopacifer.github.io HTML 5 O que existe além de A11y e

    SEO? .3 1

  2. Afonso Pacifer @afonsopacifer afonsopacifer.github.io DevRel & Front-End Specialist 2

  3. Como está o HTML? O que tem de novo ?

    3

  4. Lek, 4

  5. O Básico HTML === Semântica? 5

  6. fi Semântica https://pt.wikipedia.org/wiki/Semântica Foi explicado brilhantemente pelo Moreno na ultima

    Talk <3 6

  7. Importa Para quem? 7

  8. Existe diferença Div X Button? 8

  9. Live Code https://codepen.io/afonsopacifer/pen/BaPmKXr • Aparência • UI feedbacks (Hover, Active,

    etc…) • Acessível via teclado (tabIndex) •Leitor de tela (Wai-Aria) •Evento click mapeado para teclado 9

  10. Acessibilidade Foi explicado brilhantemente pela Amanda na primeira Talk <3

    10

  11. Sobre empatia A hora de criar um componente que não

    existe no HTML 11

  12. Voltando… 12

  13. HTML 5.1 voltando para 2016 13

  14. A tag dialog https://afonsopacifer.github.io/talks 14

  15. https://codepen.io/afonsopacifer/pen/zYLPBRB <dialog > HTML SP </dialog> open <button> Dialog </button>

    const btn = document.querySelector('button'); const dialog = document.querySelector('dialog'); btn.addEventListener('click', () => { }) dialog.showModal(); 15

  16. HTML Ou Javascript dialog.showModal(); 16

  17. Voltando… 17

  18. O que realmente vale a pena 18

  19. HTML 5 voltando para 2014 19

  20. WHATWG X W3C A treta do HTML 5 VS XHTML

    20

  21. https://www.w3.org/html/logo/ • SEMANTICS •OFFLINE & STORAGE •DEVICE ACCESS •CONNECTIVITY •MULTIMEDIA

    •3D, GRAPHICS & EFFECTS •PERFORMANCE & INTEGRATION •CSS3 HTML 5 Classes 21

  22. https://codepen.io/afonsopacifer/pen/xxJPKab CONNECTIVITY DEMO navigator.getGamepads() 22

  23. (WEB APIS) HTML Ou Javascript TC39 W3C 23

  24. Avançando… 24

  25. https://www.w3.org/html/ Acordo em 2019 25

  26. https://www.w3.org/TR/2021/NOTE-html53-20210128/ HTML 5.3 2021 26

  27. https://html.spec.whatwg.org/multipage/introduction.html HTML 2023 27

  28. https://github.com/whatwg/html Contribua 28

  29. Descubra por você kkkJ O que existe além de A11y

    e SEO? 29

  30. @afonsopacifer Obrigado HTML SP afonsopacifer.github.io 30