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

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

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Afonso Pacifer Afonso Pacifer
January 18, 2023
Programming
210
0

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

Avatar for Afonso Pacifer

Afonso Pacifer

January 18, 2023

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

Other Decks in Programming

See All in Programming
ついに来た！本格的なマルチクラウド時代の Google Cloud
Avatar for maroon1st maroon1st
0
450
色即是空、空即是色、データサイエンス
Avatar for KamoNeggi kamoneggi
1
110
いつか誰かが、と思っていた フロントエンド刷新5年間の実践知
Avatar for Kiichi Sugihara kiichisugihara
1
280
Stage 3 Decorators でできること / できないこと / TSKaigi 2026
Avatar for Susisu susisu
0
110
When benchmarks go bad - what I learned from measuring performance wrong
Avatar for Holly Cummins hollycummins
0
390
Spec-Driven Development with AI Agents (Workshop, May 2026)
Avatar for Anton Arhipov antonarhipov
3
380
PHPでローカル環境用のSSL/TLS証明書を発行することはできるのか？ #phpconkagawa
Avatar for akase244 akase244
0
370
実践ハーネスエンジニアリング：ステアリングループを実例から読み解く / Practical Harness Engineering: Understanding Steering Loops Through Real-World Examples
Avatar for nrs nrslib
5
5.6k
Augmenting AI with the Power of Jakarta EE
Avatar for ivargrimstad ivargrimstad
0
510
書き換えて学ぶTemporal #fukts
Avatar for Hiroyuki ANAI pirosikick
2
380
20年以上続くプロダクトでも使い続けられる静的解析ツールを求めて
Avatar for Atsushi Matsuo matsuo_atsushi
0
150
「OSSがあるなら自作するな」は AI時代も正しいか ── Build vs Adopt の新しい判断基準
Avatar for Kumo Ishikawa kumorn5s
7
2.8k

Featured

See All Featured
Skip the Path - Find Your Career Trail
Avatar for Mark Kilby mkilby
1
120
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
234
18k
We Analyzed 250 Million AI Search Results: Here's What I Found
Avatar for Josh Blyskal joshbly
1
1.3k
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
57
6.8k
Docker and Python
Avatar for Tania Allard trallard
47
3.8k
Building a A Zero-Code AI SEO Workflow
Avatar for Ian Lurie portentint
PRO
0
520
Test your architecture with Archunit
Avatar for Yoan thirion
1
2.2k
エンジニアに許された特別な時間の終わり
Avatar for watany watany
106
240k
世界の人気アプリ100個を分析して見えたペイウォール設計の心得
Avatar for Akihiro Kokubo akihiro_kokubo
PRO
70
39k
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
333
22k
How to Talk to Developers About Accessibility
Avatar for Jason CranfordTeague jct
2
200
Getting science done with accelerated Python computing platforms
Avatar for Jacob Tomlinson jacobtomlinson
2
200

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