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
100
Open Source e Developer Experience
Avatar for Afonso Pacifer afonsopacifer
1
150
Conhecendo a área de Developer Experience (DevEx)
Avatar for Afonso Pacifer afonsopacifer
0
120
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
120
Recriando o React do Zero em 10 minutos
Avatar for Afonso Pacifer afonsopacifer
0
130
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
340
Welcome CSS LV5
Avatar for Afonso Pacifer afonsopacifer
0
270

Other Decks in Programming

See All in Programming
PHPで使える日時の表現と、その知り方 #frontend_phpcon_do
Avatar for hideki kinjyo o0h
PRO
0
260
A2UI という光を覗いてみる
Avatar for SatohJohn satohjohn
1
150
AI駆動開発を妨げる技術的負債の解消アプローチ / ai-refactoring-approach
Avatar for MinoDriven minodriven
12
6.6k
ADKを使って簡単にAIエージェントを作ってみよう
Avatar for K1mu21 k1mu21
0
280
Lessons from Spec-Driven Development
Avatar for Simon Martinelli simas
PRO
0
220
Semantic Version 単位で戦略を柔軟に変えて、パッケージアップデートを自動化する
Avatar for daitasu daitasu
1
300
そのテスト、説明できますか？~LWテスト戦略FW~のご紹介
Avatar for Kei Nakahara nakahara
0
160
「なぜそう決めたのか」を残し続ける仕組み ― Notion AI カスタムエージェント × Slack連携による設計判断の自動記録 - NIKKEI Tech Talk #47
Avatar for ニフティ株式会社 niftycorp
PRO
0
230
AIだと陥りがちなJakarta EE最新技術への移行時の落とし穴と解決策
Avatar for tnagao7 tnagao7
0
120
Language Server 使ってる？ 〜VSCode と Zed の場合〜 / Are you using a Language Server? ~For VS Code and Zed~
Avatar for NAGATA Hiroaki handlename
0
800
RTSPクライアントを自作してみた話
Avatar for simotin13 simotin13
0
630
Performance Engineering for Everyone
Avatar for Elena Tanasoiu elenatanasoiu
0
220

Featured

See All Featured
Navigating Algorithm Shifts & AI Overviews - #SMXNext
Avatar for Aleyda Solis aleyda
1
1.3k
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
666
130k
Navigating Team Friction
Avatar for Lara Hogan lara
192
16k
svc-hook: hooking system calls on ARM64 by binary rewriting
Avatar for Akira Moroo retrage
2
310
Mind Mapping
Avatar for Hélio Medeiros helmedeiros
PRO
1
260
Everyday Curiosity
Avatar for Cassini Nazir cassininazir
0
240
Beyond borders and beyond the search box: How to win the global "messy middle" with AI-driven SEO
Avatar for David Carrasco davidcarrasco
3
170
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
370
20k
The Hidden Cost of Media on the Web [PixelPalooza 2025]
Avatar for Tammy Everts tammyeverts
2
330
Efficient Content Optimization with Google Search Console & Apps Script
Avatar for Katarina Dahlin katarinadahlin
PRO
1
630
It's Worth the Effort
Avatar for 3n 3n
188
29k
The innovator’s Mindset - 
Leading Through an Era of Exponential Change - McGill University 2025
Avatar for Jean-Marc De Jonghe jdejongh
PRO
1
210

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