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
80
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
Open Source e Developer Experience
afonsopacifer
0
33
Conhecendo a área de Developer Experience (DevEx)
afonsopacifer
0
4
Do Zero ao Sênior Apenas com Projetos Open Source
afonsopacifer
0
13
Guia para se tornar uma Pessoa Desenvolvedora Front-end Especialista
afonsopacifer
0
17
Recriando o React do Zero em 10 minutos
afonsopacifer
0
26
O CAMINHO PARA SE TORNAR UM(A) MESTRE(A) DOS ESTILOS COM CSS LV 5.
afonsopacifer
0
110
State of JS 2022
afonsopacifer
0
200
Welcome CSS LV5
afonsopacifer
0
180
No pain no gain
afonsopacifer
0
150
Other Decks in Programming
See All in Programming
LangChainでWebサイトの内容取得やGitHubソースコード取得
shukob
0
160
Swiftコードバトル必勝法
toshi0383
0
170
[DroidKaigi 2024] Android ViewからJetpack Composeへ 〜Jetpack Compose移行のすゝめ〜 / From Android View to Jetpack Compose: A Guide to Migration
syarihu
1
630
Prompt Cachingは本当に効果的なのか検証してみた.pdf
ttnyt8701
0
530
How to Break into Reading Open Source
kaspth
2
220
REXML改善のその後
naitoh
0
190
2024 컴포즈 정원사
jisungbin
0
150
Lessons by WebAssembly app in production on CDN Edge Computing Service
tetsuharuohzeki
0
210
Boost Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
490
マルチモジュールにおけるテスト最適化
fxwx23
0
210
rbs-inlineを導入してYARDからRBSに移行する
euglena1215
1
290
Debugging: All you need to know (for simultaneous interpreting)
jmatsu
2
800
Featured
See All Featured
Building Your Own Lightsaber
phodgson
101
6k
WebSockets: Embracing the real-time Web
robhawkes
59
7.3k
Optimizing for Happiness
mojombo
375
69k
Writing Fast Ruby
sferik
623
60k
How STYLIGHT went responsive
nonsquared
93
5.1k
Happy Clients
brianwarren
96
6.6k
Navigating Team Friction
lara
183
13k
Intergalactic Javascript Robots from Outer Space
tanoku
268
26k
The Invisible Side of Design
smashingmag
296
50k
Git: the NoSQL Database
bkeepers
PRO
425
64k
Building Adaptive Systems
keathley
36
2.1k
A designer walks into a library…
pauljervisheath
201
24k
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