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
57
Open Source e Developer Experience
afonsopacifer
1
80
Conhecendo a área de Developer Experience (DevEx)
afonsopacifer
0
66
Do Zero ao Sênior Apenas com Projetos Open Source
afonsopacifer
1
74
Guia para se tornar uma Pessoa Desenvolvedora Front-end Especialista
afonsopacifer
0
74
Recriando o React do Zero em 10 minutos
afonsopacifer
0
78
O CAMINHO PARA SE TORNAR UM(A) MESTRE(A) DOS ESTILOS COM CSS LV 5.
afonsopacifer
0
180
State of JS 2022
afonsopacifer
0
280
Welcome CSS LV5
afonsopacifer
0
220
Other Decks in Programming
See All in Programming
JetBrainsのAI機能の紹介 #jjug
yusuke
0
160
バイブコーディングの正体——AIエージェントはソフトウェア開発を変えるか?
stakaya
4
540
MCPで実現できる、Webサービス利用体験について
syumai
7
2.3k
Go製CLIツールをnpmで配布するには
syumai
2
1k
AIのメモリー
watany
12
1.2k
decksh - a little language for decks
ajstarks
4
21k
ご注文の差分はこちらですか? 〜 AWS CDK のいろいろな差分検出と安全なデプロイ
konokenj
4
720
Bedrock AgentCore ObservabilityによるAIエージェントの運用
licux
8
510
대규모 트래픽을 처리하는 프론트 개발자의 전략
maryang
0
110
オホーツクでコミュニティを立ち上げた理由―地方出身プログラマの挑戦 / TechRAMEN 2025 Conference
lemonade_37
1
400
NEWT Backend Evolution
xpromx
1
170
DynamoDBは怖くない!〜テーブル設計の勘所とテスト戦略〜
hyamazaki
0
130
Featured
See All Featured
Into the Great Unknown - MozCon
thekraken
40
1.9k
Designing for humans not robots
tammielis
253
25k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
21
1.4k
Why Our Code Smells
bkeepers
PRO
337
57k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Writing Fast Ruby
sferik
628
62k
How STYLIGHT went responsive
nonsquared
100
5.7k
The Straight Up "How To Draw Better" Workshop
denniskardys
235
140k
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