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
170
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
Developer Experience (DevEx) no mundo Front-End: Do Ruby ao Next.js
afonsopacifer
0
63
Open Source e Developer Experience
afonsopacifer
1
85
Conhecendo a área de Developer Experience (DevEx)
afonsopacifer
0
72
Do Zero ao Sênior Apenas com Projetos Open Source
afonsopacifer
1
77
Guia para se tornar uma Pessoa Desenvolvedora Front-end Especialista
afonsopacifer
0
79
Recriando o React do Zero em 10 minutos
afonsopacifer
0
81
O CAMINHO PARA SE TORNAR UM(A) MESTRE(A) DOS ESTILOS COM CSS LV 5.
afonsopacifer
0
180
State of JS 2022
afonsopacifer
0
290
Welcome CSS LV5
afonsopacifer
0
220
Other Decks in Programming
See All in Programming
概念モデル→論理モデルで気をつけていること
sunnyone
3
300
ProxyによるWindow間RPC機構の構築
syumai
3
1.2k
AIでLINEスタンプを作ってみた
eycjur
1
230
ユーザーも開発者も悩ませない TV アプリ開発 ~Compose の内部実装から学ぶフォーカス制御~
taked137
0
190
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
420
Namespace and Its Future
tagomoris
6
710
Ruby Parser progress report 2025
yui_knk
1
460
Laravel Boost 超入門
fire_arlo
3
220
個人開発で徳島大学生60%以上の心を掴んだアプリ、そして手放した話
akidon0000
1
150
旅行プランAIエージェント開発の裏側
ippo012
2
930
RDoc meets YARD
okuramasafumi
4
170
そのAPI、誰のため? Androidライブラリ設計における利用者目線の実践テクニック
mkeeda
2
2.8k
Featured
See All Featured
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.7k
Producing Creativity
orderedlist
PRO
347
40k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Unsuck your backbone
ammeep
671
58k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
A designer walks into a library…
pauljervisheath
207
24k
Speed Design
sergeychernyshev
32
1.1k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.7k
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