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
79
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
Do Zero ao Sênior Apenas com Projetos Open Source
afonsopacifer
0
7
Guia para se tornar uma Pessoa Desenvolvedora Front-end Especialista
afonsopacifer
0
15
Recriando o React do Zero em 10 minutos
afonsopacifer
0
21
O CAMINHO PARA SE TORNAR UM(A) MESTRE(A) DOS ESTILOS COM CSS LV 5.
afonsopacifer
0
110
State of JS 2022
afonsopacifer
0
190
Welcome CSS LV5
afonsopacifer
0
180
No pain no gain
afonsopacifer
0
150
A liberdade vem do Ether
afonsopacifer
0
39
Front-End 101: A resposta sobre “estudar a base”
afonsopacifer
4
550
Other Decks in Programming
See All in Programming
大規模マルチテナントを解決するYugabyteDBという選択肢
nnaka2992
1
250
SDCon2024: Enabling DevOps and Team Topologies thru architecture: architecting for fast flow
cer
PRO
0
780
「2024年版 Kotlin サーバーサイドプログラミング実践開発」の補講 〜O/Rマッパー編〜
n_takehata
2
260
初心者がおさえておきたいAWS CDKのベストプラクティス 2024
konokenj
15
7.3k
Architectures with Lightweight Stores: New Rules and Options
manfredsteyer
PRO
0
100
Prompt FlowによるLLMアプリケーション開発
yuto2000
1
1k
日付と正規化
megmogmog1965
0
140
小さな開発会社を作った理由
polidog
0
1.9k
AHC035解説
terryu16
0
730
Webエディタライブラリ 「CodeMirror」から学ぶ Webアプリ開発のテクニック
ryosukeigarashi
0
250
20240706_CDKConf
takuyay0ne
0
1.2k
Javaの現状2024夏 / Java current status 2024 summer
kishida
4
1.4k
Featured
See All Featured
GraphQLとの向き合い方2022年版
quramy
36
13k
Testing 201, or: Great Expectations
jmmastey
33
6.9k
How STYLIGHT went responsive
nonsquared
93
5k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
12
3.8k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
BBQ
matthewcrist
82
9k
Stop Working from a Prison Cell
hatefulcrawdad
266
20k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
19k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Build The Right Thing And Hit Your Dates
maggiecrowley
28
2.2k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
17
1.5k
How GitHub Uses GitHub to Build GitHub
holman
471
290k
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