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 · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
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
87
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
110
Guia para se tornar uma Pessoa Desenvolvedora Front-end Especialista
Avatar for Afonso Pacifer afonsopacifer
0
100
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
210
State of JS 2022
Avatar for Afonso Pacifer afonsopacifer
0
320
Welcome CSS LV5
Avatar for Afonso Pacifer afonsopacifer
0
260

Other Decks in Programming

See All in Programming
PicoRuby for IoT: Connecting to the Cloud with MQTT
Avatar for Y_uuu yuuu
2
550
事業会社でのセキュリティ長期インターンについて
Avatar for inlet-back masachikaura
0
250
Making the RBS Parser Faster
Avatar for Soutaro Matsumoto soutaro
0
370
Claude Code × Gemini × Ebitengine ゲーム制作素人WebエンジニアがGoでゲームを作った話
Avatar for webzawa webzawa
0
140
実践ハーネスエンジニアリング #MOSHTech
Avatar for Takuma Kajikawa kajitack
7
6.5k
書籍「ユーザーストーリーマッピング」が私のバイブル
Avatar for asumikam asumikam
3
350
mruby on C#: From VM Implementation to Game Scripting (RubyKaigi 2026)
Avatar for hadashiA hadashia
2
490
Radical Imagining - LIFT 2025-2027 Policy Agenda
Avatar for LIFT lift1998
0
350
TiDBのアーキテクチャから学ぶ分散システム入門 〜MySQL互換のNewSQLは何を解決するのか〜 / tidb-architecture-study
Avatar for DPon dznbk
1
180
感情を設計する
Avatar for nakamichi ichimichi
5
1.5k
Don't Prompt Harder, Structure Better
Avatar for Yusuke Kita kitasuke
0
760
レガシーPHP転生 〜父がドメインエキスパートだったのでDDD+Claude Codeでチート開発します〜
Avatar for panda_program panda_program
0
960

Featured

See All Featured
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
348
40k
Ten Tips & Tricks for a 🌱 transition
Avatar for Manu Carrasco Molina stuffmc
0
99
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
225
10k
The Straight Up "How To Draw Better" Workshop
Avatar for Dennis Kardys denniskardys
239
140k
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
25
1.9k
Crafting Experiences
Avatar for Bethany Jepchumba bethany
1
110
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1370
200k
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
55
8.1k
KATA
Avatar for Megan Lloyd mclloyd
PRO
35
15k
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
6
1.1k
Building AI with AI
Avatar for Ines Montani inesmontani
PRO
1
900
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
270
14k

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