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
90
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
6
Open Source e Developer Experience
afonsopacifer
0
42
Conhecendo a área de Developer Experience (DevEx)
afonsopacifer
0
14
Do Zero ao Sênior Apenas com Projetos Open Source
afonsopacifer
1
22
Guia para se tornar uma Pessoa Desenvolvedora Front-end Especialista
afonsopacifer
0
25
Recriando o React do Zero em 10 minutos
afonsopacifer
0
36
O CAMINHO PARA SE TORNAR UM(A) MESTRE(A) DOS ESTILOS COM CSS LV 5.
afonsopacifer
0
120
State of JS 2022
afonsopacifer
0
210
Welcome CSS LV5
afonsopacifer
0
180
Other Decks in Programming
See All in Programming
C#/.NETのこれまでのふりかえり
tomokusaba
1
160
生成 AI を活用した toitta 切片分類機能の裏側 / Inside toitta's AI-Based Factoid Clustering
pokutuna
0
610
約9000個の自動テストの 時間を50分->10分に短縮 Flakyテストを1%以下に抑えた話
hatsu38
24
11k
とにかくAWS GameDay!AWSは世界の共通言語! / Anyway, AWS GameDay! AWS is the world's lingua franca!
seike460
PRO
1
560
Hotwire or React? ~Reactの録画機能をHotwireに置き換えて得られた知見~ / hotwire_or_react
harunatsujita
9
4.1k
Honoの来た道とこれから
yusukebe
19
3.1k
Identifying User Idenity
moro
6
8k
macOS でできる リアルタイム動画像処理
biacco42
7
2k
Nuxtベースの「WXT」でChrome拡張を作成する | Vue Fes 2024 ランチセッション
moshi1121
1
530
Server Driven Compose With Firebase
skydoves
0
400
『ドメイン駆動設計をはじめよう』のモデリングアプローチ
masuda220
PRO
8
440
From Subtype Polymorphism To Typeclass-based Ad hoc Polymorphism- An Example
philipschwarz
PRO
0
170
Featured
See All Featured
Code Reviewing Like a Champion
maltzj
519
39k
Into the Great Unknown - MozCon
thekraken
31
1.5k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
32
1.8k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Unsuck your backbone
ammeep
668
57k
Facilitating Awesome Meetings
lara
49
6k
Building Better People: How to give real-time feedback that sticks.
wjessup
363
19k
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
Optimizing for Happiness
mojombo
376
69k
Become a Pro
speakerdeck
PRO
24
5k
Side Projects
sachag
452
42k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
33k
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