Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
HTML 5.3: O que existe além de a11y e SEO?
Search
Afonso Pacifer
January 18, 2023
Programming
0
71
HTML 5.3: O que existe além de a11y e SEO?
Afonso Pacifer
January 18, 2023
Tweet
Share
More Decks by Afonso Pacifer
See All by Afonso Pacifer
Recriando o React do Zero em 10 minutos
afonsopacifer
0
14
O CAMINHO PARA SE TORNAR UM(A) MESTRE(A) DOS ESTILOS COM CSS LV 5.
afonsopacifer
0
87
State of JS 2022
afonsopacifer
0
170
Welcome CSS LV5
afonsopacifer
0
170
No pain no gain
afonsopacifer
0
140
A liberdade vem do Ether
afonsopacifer
0
34
Front-End 101: A resposta sobre “estudar a base”
afonsopacifer
4
540
PRPL pattern na prática com React
afonsopacifer
1
260
Style Strategies in Vue.js
afonsopacifer
2
130
Other Decks in Programming
See All in Programming
自動テスト実行結果の目的を整理する / Organizing objectives of automated test results
twada
PRO
10
2.1k
上手な探索的テストとその上達方法について
matsu802
4
660
自作ソフト(VMagicMirror)がVRMA対応してる話+実装のTips
bakudreameater
0
110
WebComponentsで フレームワークを1ページに共存させる
webuilder240
0
150
Swiftの型推論を学ぼう | Let's Learn About Type Inference in Swift
omochi
2
590
せっかくモデル図描くのなら、嬉しいことが多い方がいいよね!
kuboaki
1
1.8k
OpenAPI を守るのは難しい
ohmori_yusuke
1
140
品質が高いコードって何?Rev2.1
ickx
1
490
OpenTelemetry のサービスという概念について
azukiazusa1
1
410
Understanding Ast By Looking
inouehi
0
120
オブジェクトしこう
okuramasafumi
2
130
フロントエンドパフォーマンス 入門
shouta2
7
1.5k
Featured
See All Featured
Bootstrapping a Software Product
garrettdimon
PRO
302
110k
Code Review Best Practice
trishagee
54
15k
The Cult of Friendly URLs
andyhume
73
5.6k
A Philosophy of Restraint
colly
195
15k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
657
120k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
24
2.2k
The MySQL Ecosystem @ GitHub 2015
samlambert
242
12k
Code Reviewing Like a Champion
maltzj
512
39k
Fashionably flexible responsive web design (full day workshop)
malarkey
397
65k
The Illustrated Children's Guide to Kubernetes
chrisshort
28
46k
JazzCon 2018 Closing Keynote - Leadership for the Reluctant Leader
reverentgeek
178
11k
How to Ace a Technical Interview
jacobian
272
22k
Transcript
afonsopacifer.github.io HTML 5 O que existe além de A11y e
SEO? .3 1
Afonso Pacifer @afonsopacifer afonsopacifer.github.io DevRel & Front-End Specialist 2
Como está o HTML? O que tem de novo ?
3
Lek, 4
O Básico HTML === Semântica? 5
fi Semântica https://pt.wikipedia.org/wiki/Semântica Foi explicado brilhantemente pelo Moreno na ultima
Talk <3 6
Importa Para quem? 7
Existe diferença Div X Button? 8
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
Acessibilidade Foi explicado brilhantemente pela Amanda na primeira Talk <3
10
Sobre empatia A hora de criar um componente que não
existe no HTML 11
Voltando… 12
HTML 5.1 voltando para 2016 13
A tag dialog https://afonsopacifer.github.io/talks 14
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
HTML Ou Javascript dialog.showModal(); 16
Voltando… 17
O que realmente vale a pena 18
HTML 5 voltando para 2014 19
WHATWG X W3C A treta do HTML 5 VS XHTML
20
https://www.w3.org/html/logo/ • SEMANTICS •OFFLINE & STORAGE •DEVICE ACCESS •CONNECTIVITY •MULTIMEDIA
•3D, GRAPHICS & EFFECTS •PERFORMANCE & INTEGRATION •CSS3 HTML 5 Classes 21
https://codepen.io/afonsopacifer/pen/xxJPKab CONNECTIVITY DEMO navigator.getGamepads() 22
(WEB APIS) HTML Ou Javascript TC39 W3C 23
Avançando… 24
https://www.w3.org/html/ Acordo em 2019 25
https://www.w3.org/TR/2021/NOTE-html53-20210128/ HTML 5.3 2021 26
https://html.spec.whatwg.org/multipage/introduction.html HTML 2023 27
https://github.com/whatwg/html Contribua 28
Descubra por você kkkJ O que existe além de A11y
e SEO? 29
@afonsopacifer Obrigado HTML SP afonsopacifer.github.io 30