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
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
65
Open Source e Developer Experience
Avatar for Afonso Pacifer afonsopacifer
1
92
Conhecendo a área de Developer Experience (DevEx)
Avatar for Afonso Pacifer afonsopacifer
0
76
Do Zero ao Sênior Apenas com Projetos Open Source
Avatar for Afonso Pacifer afonsopacifer
1
82
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
87
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
290
Welcome CSS LV5
Avatar for Afonso Pacifer afonsopacifer
0
230

Other Decks in Programming

See All in Programming
퇴근 후 1억이 거래되는 서비스 만들기 | 내가 AI를 사용하는 방법
Avatar for Seungmin 마량 maryang
2
540
Core MIDI を勉強して作曲用の電子ピアノ作ってみた！
Avatar for 蛋白（たんぱく・TANPACT） hypebeans
0
100
AI 駆動開発におけるコミュニティと AWS CDK の価値
Avatar for Kenji Kono konokenj
5
380
Introducing RemoteCompose: break your UI out of the app sandbox.
Avatar for Nicolas Roard camaelon
2
530
HTTPじゃ遅すぎる！ SwitchBotを自作ハブで動かして学ぶBLE通信
Avatar for Shoichi Ochi occhi
0
230
AIエージェントでのJava開発がはかどるMCPをAIを使って開発してみた / java mcp for jjug
Avatar for Naoki Kishida kishida
2
110
Vueのバリデーション、結局どれを選べばいい？ ― 自作バリデーションの限界と、脱却までの道のり ― / Which Vue Validation Library Should We Really Use? The Limits of Self-Made Validation and How I Finally Moved On
Avatar for ねぎなす neginasu
3
1.8k
Making Angular Apps Smarter with Generative AI: Local and Offline-capable
Avatar for Christian Liebel christianliebel
PRO
0
110
Phronetic Team with AI - Agile Japan 2025 closing
Avatar for Kenji Hiranabe hiranabe
0
110
Bakuraku E2E Scenario Test System Architecture #bakuraku_qa_study
Avatar for teyamagu teyamagu
PRO
0
660
Dive into Triton Internals
Avatar for Liam Jongsu Kim appleparan
0
480
AI 時代だからこそ抑えたい「価値のある」PHP ユニットテストを書く技術 #phpconfuk / phpcon-fukuoka-2025
Avatar for shogogg shogogg
1
400

Featured

See All Featured
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
615
210k
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
40
2.1k
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
16k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
253
22k
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
46
7.8k
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
246
12k
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
97
6.4k
Fireside Chat
Avatar for paigeccino paigeccino
41
3.7k
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
140
7.2k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.7k
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
5.9k
Designing Experiences People Love
Avatar for Jonathan Moore moore
142
24k

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