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
180
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
65
Open Source e Developer Experience
afonsopacifer
1
90
Conhecendo a área de Developer Experience (DevEx)
afonsopacifer
0
76
Do Zero ao Sênior Apenas com Projetos Open Source
afonsopacifer
1
80
Guia para se tornar uma Pessoa Desenvolvedora Front-end Especialista
afonsopacifer
0
81
Recriando o React do Zero em 10 minutos
afonsopacifer
0
83
O CAMINHO PARA SE TORNAR UM(A) MESTRE(A) DOS ESTILOS COM CSS LV 5.
afonsopacifer
0
190
State of JS 2022
afonsopacifer
0
290
Welcome CSS LV5
afonsopacifer
0
230
Other Decks in Programming
See All in Programming
O Que É e Como Funciona o PHP-FPM?
marcelgsantos
0
200
NIKKEI Tech Talk#38
cipepser
0
250
Reactive Thinking with Signals and the Resource API
manfredsteyer
PRO
0
110
マンガアプリViewerの大画面対応を考える
kk__777
0
280
bootcamp2025_バックエンド研修_WebAPIサーバ作成.pdf
geniee_inc
0
130
なんでRustの環境構築してないのにRust製のツールが動くの? / Why Do Rust-Based Tools Run Without a Rust Environment?
ssssota
14
46k
Cursorハンズオン実践!
eltociear
2
1.2k
CSC305 Lecture 09
javiergs
PRO
0
310
Leading Effective Engineering Teams in the AI Era
addyosmani
7
640
iOSでSVG画像を扱う
kishikawakatsumi
0
170
Goで実践するドメイン駆動開発 AIと歩み始めた新規プロダクト開発の現在地
imkaoru
4
910
When Dependencies Fail: Building Antifragile Applications in a Fragile World
selcukusta
0
110
Featured
See All Featured
Automating Front-end Workflow
addyosmani
1371
200k
Being A Developer After 40
akosma
91
590k
The Cult of Friendly URLs
andyhume
79
6.6k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
116
20k
Reflections from 52 weeks, 52 projects
jeffersonlam
354
21k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
Side Projects
sachag
455
43k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.7k
GitHub's CSS Performance
jonrohan
1032
470k
How STYLIGHT went responsive
nonsquared
100
5.9k
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