afonsopacifer.github.ioHTML 5O que existe além de A11y e SEO?.31
View Slide
AfonsoPacifer@afonsopaciferafonsopacifer.github.ioDevRel & Front-End Specialist2
Como está o HTML?O que tem de novo ?3
Lek,4
O BásicoHTML === Semântica?5
fiSemânticahttps://pt.wikipedia.org/wiki/SemânticaFoi explicado brilhantemente peloMoreno na ultima Talk <36
ImportaPara quem?7
Existe diferençaDiv X Button?8
Live Codehttps://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 teclado9
AcessibilidadeFoi explicado brilhantemente pelaAmanda na primeira Talk <310
Sobre empatiaA hora de criar um componente quenão existe no HTML11
Voltando…12
HTML 5.1voltando para 201613
A tagdialoghttps://afonsopacifer.github.io/talks14
https://codepen.io/afonsopacifer/pen/zYLPBRB HTML SP open Dialog const btn = document.querySelector('button');const dialog = document.querySelector('dialog');btn.addEventListener('click', () => {})dialog.showModal();15
HTMLOuJavascriptdialog.showModal();16
Voltando…17
O que realmentevale a pena18
HTML 5voltando para 201419
WHATWG X W3CA treta do HTML 5 VS XHTML20
https://www.w3.org/html/logo/• SEMANTICS•OFFLINE & STORAGE•DEVICE ACCESS•CONNECTIVITY•MULTIMEDIA•3D, GRAPHICS & EFFECTS•PERFORMANCE & INTEGRATION•CSS3HTML 5Classes21
https://codepen.io/afonsopacifer/pen/xxJPKabCONNECTIVITYDEMOnavigator.getGamepads()22
(WEB APIS)HTMLOuJavascriptTC39W3C23
Avançando…24
https://www.w3.org/html/Acordo em201925
https://www.w3.org/TR/2021/NOTE-html53-20210128/HTML 5.3202126
https://html.spec.whatwg.org/multipage/introduction.htmlHTML202327
https://github.com/whatwg/htmlContribua28
Descubra porvocê kkkJO que existe além de A11y e SEO?29
@afonsopaciferObrigado HTML SPafonsopacifer.github.io30