Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

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

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

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
68
Open Source e Developer Experience
Avatar for Afonso Pacifer afonsopacifer
1
98
Conhecendo a área de Developer Experience (DevEx)
Avatar for Afonso Pacifer afonsopacifer
0
78
Do Zero ao Sênior Apenas com Projetos Open Source
Avatar for Afonso Pacifer afonsopacifer
1
84
Guia para se tornar uma Pessoa Desenvolvedora Front-end Especialista
Avatar for Afonso Pacifer afonsopacifer
0
82
Recriando o React do Zero em 10 minutos
Avatar for Afonso Pacifer afonsopacifer
0
90
O CAMINHO PARA SE TORNAR UM(A) MESTRE(A) DOS ESTILOS COM CSS LV 5.
Avatar for Afonso Pacifer afonsopacifer
0
190
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
関数実行の裏側では何が起きているのか？
Avatar for minop1205 minop1205
1
360
Rails Girls Sapporo 2ndの裏側―準備の日々から見えた、私が得たもの / SAPPORO ENGINEER BASE #11
Avatar for はる lemonade_37
2
200
堅牢なフロントエンドテスト基盤を構築するために行った取り組み
Avatar for Shogo Fukami shogo4131
3
1.2k
非同期処理の迷宮を抜ける: 初学者がつまづく構造的な原因
Avatar for PADAone pd1xx
1
350
jakarta-security-jjug-ccc-2025-fall
Avatar for tnagao7 tnagao7
0
100
配送計画の均等化機能を提供する取り組みについて(⽩⾦鉱業 Meetup Vol.21@六本⽊（数理最適化編))
Avatar for 伊豆原基人 izu_nori
0
100
MAP, Jigsaw, Code Golf 振り返り会 by 関東Kaggler会|Jigsaw 15th Solution
Avatar for s.konishi hasibirok0
0
180
AWS CDKの推しポイントN選
Avatar for アキキー akihisaikeda
1
220
connect-python: convenient protobuf RPC for Python
Avatar for Anuraag Agrawal anuraaga
0
320
最新のDirectX12で使えるレイトレ周りの機能追加について
Avatar for Pocol projectasura
0
320
TVerのWeb内製化 - 開発スピードと品質を両立させるまでの道のり
Avatar for TVer Inc. techtver
PRO
3
1.3k
モダンJSフレームワークのビルドプロセス 〜なぜReactは503行、Svelteは12行なのか〜
Avatar for Maple fuuki12
0
160

Featured

See All Featured
The Hidden Cost of Media on the Web [PixelPalooza 2025]
Avatar for Tammy Everts tammyeverts
1
64
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
16
1.8k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
51
51k
Building an army of robots
Avatar for Kyle Neath kneath
306
46k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
37
2.6k
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
97
6.4k
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
225
10k
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
210
24k
Become a Pro
Avatar for Speaker Deck speakerdeck
PRO
30
5.7k
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
52
5.7k
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.5k
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
303
21k

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