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
170

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
63
Open Source e Developer Experience
Avatar for Afonso Pacifer afonsopacifer
1
87
Conhecendo a área de Developer Experience (DevEx)
Avatar for Afonso Pacifer afonsopacifer
0
73
Do Zero ao Sênior Apenas com Projetos Open Source
Avatar for Afonso Pacifer afonsopacifer
1
78
Guia para se tornar uma Pessoa Desenvolvedora Front-end Especialista
Avatar for Afonso Pacifer afonsopacifer
0
79
Recriando o React do Zero em 10 minutos
Avatar for Afonso Pacifer afonsopacifer
0
81
O CAMINHO PARA SE TORNAR UM(A) MESTRE(A) DOS ESTILOS COM CSS LV 5.
Avatar for Afonso Pacifer afonsopacifer
0
180
State of JS 2022
Avatar for Afonso Pacifer afonsopacifer
0
290
Welcome CSS LV5
Avatar for Afonso Pacifer afonsopacifer
0
220

Other Decks in Programming

See All in Programming
気づいて！アプリからのSOS 〜App Store Connect APIで始めるパフォーマンス健康診断〜
Avatar for Wakabayashi Rikuma waka12
0
250
そのpreloadは必要？見過ごされたpreloadが技術的負債として爆発した日
Avatar for mugi mugitti9
2
2.6k
OWASP Kansai DAY 2025.09: OSINTにふれてみよう
Avatar for Tomohiko Morita deka_morita
0
160
Let's Write a Train Tracking Algorithm
Avatar for Chris Trott twocentstudios
0
220
SpecKitでどこまでできる？ コストはどれくらい？
Avatar for Tech Leverages leveragestech
0
370
CSC305 Lecture 01
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
1
380
ИИ-Агенты в каждый дом – Алексей Порядин, PythoNN
Avatar for Sobolev Nikita sobolevn
0
140
Web技術を最大限活用してRAW画像を現像する / Developing RAW Images on the Web
Avatar for TOMIKAWA Sotaro ssssota
2
1k
Platformに“ちょうどいい”責務ってどこ？ 関心の熱さにあわせて考える、責務分担のプラクティス
Avatar for estie | エスティ estie
2
510
defer f()とdefer fの挙動を 誤解していた話
Avatar for kogamochiduki kogamochiduki
2
160
WebエンジニアがSwiftをブラウザで動かすプレイグラウンドを作ってみた
Avatar for uutan1108 ohmori_yusuke
0
160
CSC509 Lecture 01
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
1
430

Featured

See All Featured
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
332
24k
Unsuck your backbone
Avatar for Amy Palamountain ammeep
671
58k
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
40
2.1k
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
9
600
Designing Experiences People Love
Avatar for Jonathan Moore moore
142
24k
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
95
14k
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.2k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
188
55k
Gamification - CAS2011
Avatar for David Bonilla davidbonilla
81
5.4k
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
248
1.3M
The Language of Interfaces
Avatar for Des Traynor destraynor
162
25k
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
513
110k

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