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
150

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

Other Decks in Programming

See All in Programming
Ruby's Line Breaks
Avatar for yui-knk yui_knk
4
2.8k
オープンソースコントリビュート入門
Avatar for katsuma _katsuma
0
120
In geheimer Mission: AI Agents entwickeln
Avatar for Jörg Neumann joergneumann
0
100
Boost Your Performance and Developer Productivity with Jakarta EE 11
Avatar for ivargrimstad ivargrimstad
0
770
Making TCPSocket.new "Happy"!
Avatar for Misaki Shioi(塩井美咲/しおい) coe401_
1
3.1k
Beyond_the_Prompt__Evaluating__Testing__and_Securing_LLM_Applications.pdf
Avatar for Mete Atamel meteatamel
0
110
Golangci-lint v2爆誕: 君たちはどうすべきか
Avatar for logica / Takuto Nagami logica0419
1
230
実践Webフロントパフォーマンスチューニング
Avatar for しーぴー cp20
45
10k
generative-ai-use-cases(GenU)の推しポイント ～2025年4月版～
Avatar for Hideyuki Nagata hideg
1
370
GitHub Copilot for Azureを使い倒したい
Avatar for Kento.Yamada ymd65536
1
310
AIコーディングエージェントを 「使いこなす」ための実践知と現在地 in ログラス / How to Use AI Coding Agent in Loglass
Avatar for r-kagaya rkaga
4
1.2k
M5UnitUnified 最新動向 2025/05
Avatar for GOB gob
0
130

Featured

See All Featured
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
357
30k
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
336
57k
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
276
23k
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.3k
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
798
220k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
299
50k
Gamification - CAS2011
Avatar for David Bonilla davidbonilla
81
5.3k
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
46
14k
KATA
Avatar for Megan Lloyd mclloyd
29
14k
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
PRO
53
11k
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
298
20k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
75
5.8k

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