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
82
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
5
Open Source e Developer Experience
afonsopacifer
0
34
Conhecendo a área de Developer Experience (DevEx)
afonsopacifer
0
6
Do Zero ao Sênior Apenas com Projetos Open Source
afonsopacifer
0
14
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
Other Decks in Programming
See All in Programming
tsconfig.jsonの最近の新機能 ファイルパス編
uhyo
6
1.6k
Removing Corepack
yosuke_furukawa
PRO
9
1.1k
XP2024 っていう国際会議に行ってきたよの記 / XP2024 Conference Report
bonotake
4
200
sqlcを利用してsqlに型付けを
kamiyam
0
240
Beyond Laravel Octane - Hyperf for Laravel Artisans
albertcht
1
120
Cloud Adoption Framework にみる組織とクラウド導入戦略
tomokusaba
2
430
CSC305 Lecture 01
javiergs
PRO
1
150
文化が生産性を作る
jimpei
3
540
NANIMACHI
naokiito
0
940
App Router 悲喜交々
quramy
7
380
Pythonによるイベントソーシングへの挑戦と現状に対する考察 / Challenging Event Sourcing with Python and Reflections on the Current State
nrslib
3
1.1k
[PHPカンファレンス沖縄2024]「無理なくできるだけ安全に」テストもないレガシーコードをリファクタリングするテクニック
ikezoemakoto
3
120
Featured
See All Featured
For a Future-Friendly Web
brad_frost
174
9.3k
Design by the Numbers
sachag
278
19k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
Atom: Resistance is Futile
akmur
261
25k
How to name files
jennybc
77
99k
Robots, Beer and Maslow
schacon
PRO
157
8.2k
Bash Introduction
62gerente
608
210k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
26
4k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
44
2k
Art, The Web, and Tiny UX
lynnandtonic
296
20k
GraphQLの誤解/rethinking-graphql
sonatard
65
9.9k
The Brand Is Dead. Long Live the Brand.
mthomps
53
38k
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