Advanced HTML

Advanced HTML for Good Developers

HTML IS SIMPLE & VERY FRIENDLY. BATMANDY

WE MAKE THE MISTAKE OF ASSUMING BECAUSE IT’S SIMPLE IT’S NOT VALUABLE BATMANDY

THERE ARE ~115 USABLE* HTML ELEMENTS BATMANDY

<p> <a> <button> <li> <script> <main> <link> <form> <img> <ul> <div> <section> <input> <h2> <label> <span> <h1> <article> BATMANDY

BATMANDY

<html> … <body> <header> <h1>Some text</h1> </header> <p>A paragraph…</p> <ul> <li>A list item</li> <li>Another item</li> </ul> <p>More content…</p> <hr> …. BATMANDY

THE DOM TREE IS CONSTRUCTED OFF WHAT WE PROVIDE. BATMANDY

TYPE SCRIPT BATMANDY

interface dog { name: string age: number isFluffy: boolean } BATMANDY

WE DETERMINE WHAT WE EXPECT THE CONTENT TO BE BATMANDY

<html> <body> <header> <h1>Dogs: They are good</h1> </header> <main> <h2>Why are dogs good?</h2> <p>All dogs are good, they are the goodest doggies.</p> <figure> <img href=”dog.png” alt=”A white golden retriever, with his head dropping to the side and tongue dangling out of his mouth” /> <figcaption>Michaelangelo AKA “Jello”</figcaption> </figure> </main> </body> </html> BATMANDY

interface dog { name: any age: any isFluffy: any } BATMANDY

<html> <body> <div> <div>Dogs: They are good</div> </div> <div> <div>Why are dogs good?</div> <div>All dogs are good, they are the goodest doggies.</div> <div> <img href=”dog.png” alt=”A golden retriever” /> <div>Michaelangelo AKA “Jello”</div> </div> </div> </body> </html> BATMANDY

IF YOU CHOOSE A GENERIC ELEMENT YOU GET A GENERIC OUTPUT BATMANDY

JUST <DIV> BATMANDY

SEMANTICS BATMANDY

NOT EVERYONE INTERACTS THE SAME BATMANDY

ACCESSIBILITY TREE BATMANDY

BATMANDY

Using HTML correctly is just UX for assistive tech & other technologies. @BATMANDY BATMANDY

SEGWAY BATMANDY

Eric Bailey PERFORMANCE & THE ACCESSIBILITY TREE Check out Eric’s presentation on Notist! noti.st/ericwbailey BATMANDY

Advanced HTML for Good Developers

GOOGLE RECOMMENDS Less than 1,500 nodes Max depth of 32 nodes No parent node with more than 60 child nodes BATMANDY

EVERYTHING ADDS UP

DON’T JUST USE DIVS BATMANDY

<p> <a> <button> <li> <script> <main> <link> <form> <img> <ul> <div> <section> <input> <h2> <label> <span> <h1> <article> BATMANDY

USE THE NAMED ELEMENT FOR WHAT YOU ARE BUILDING BATMANDY

If you have a header, use the <header> element <header>This is a header</header> BATMANDY

HTML is intentionally simple, elements are named to help you out. BATMANDY

Use heading elements in the correct order <h1> <h2> <h3> <h4> <h5> <h6> BATMANDY

BATMANDY

Good Developers HTML and it’s Bene ts H1 fi BATMANDY

<h3>Good Developers</h3> <h1>HTML and it’s Benefits</h1> <div>Good Developers</div> <h1>HTML and it’s Benefits</h1> <span>Good Developers</span> <h1>HTML and it’s Benefits</h1> BATMANDY

<h1> <span>Good Developers</span> HTML and it’s Benefits </h1> BATMANDY

<h1>Good Developers</h1> <h2>HTML and it’s Benefits</h2> BATMANDY

JUST BECAUSE IT’S IN A DESIGN DOES NOT MEAN YOU HAVE TO DO IT. BATMANDY

ALWAYS CONSIDER THE CONTEXT BATMANDY

BATMANDY

Inputs & Dates <label for=“myDate“>Date:</label> <input type=”date” id=”myDate” name=“awesome-date” value=”2023-10-07” /> BATMANDY

USE THE NAMED ELEMENT FOR WHAT YOU ARE BUILDING BATMANDY

USE THE NAMED O M O T S T F T E H E IM YOU ARE BUILDING BATMANDY

DISCOVERABLE vs KNOWN DATES BATMANDY

MAYBE YOU DON’T NEED A DATEPICKER https://adrianroselli.com/2019/07/maybe-you-dont-need-a-date-picker.html BATMANDY

MAKE THE MOST OF BUILT-IN FUNCTIONALITY BATMANDY

<div onclick=”doSomething();”> I am a button </div> BATMANDY

<div tabindex=”0” role=”button” aria-pressed=“button” onclick=”doSomething();”> I am a button </div> const ENTER = 13; const SPACE = 32; myButton.addEventListener(‘keydown’, function(event) { if (event.keyCode === ENTER || event.keyCode === SPACE) { event.preventDefault(); doSomething(event); } }); function toggleButton(button) { button.setAttribute(“aria-pressed”, button.getAttribute(“aria-pressed”) === “true” ? “false” : “true” )}; } function doSomething() { // Your actual code to do what you want )}; BATMANDY

If you need a button, use the <button> element <button>This is a button</button> BATMANDY

FEATURES

<div> <button> Clickable / Tapable Focusable Keyboard Interaction Announce via assistive tech Submit / Reset Forms Disabled attribute Reported to accessibility tree :active, :hover, :focus & :disabled states BATMANDY

A Button CSS Reset By Andy Bell button { display: inline-block; border: none; margin: 0; padding: 0; font-family: sans-serif; font-size: 1rem; line-height: 1; background: transparent; -webkit-appearance: none; } BATMANDY

<div tabindex=”0” role=”button” aria-pressed=“button” onclick=”doSomething();”> I am a button </div> const ENTER = 13; const SPACE = 32; myButton.addEventListener(‘keydown’, function(event) { if (event.keyCode === ENTER || event.keyCode === SPACE) { event.preventDefault(); doSomething(event); } }); function toggleButton(button) { button.setAttribute(“aria-pressed”, button.getAttribute(“aria-pressed”) === “true” ? “false” : “true” )}; } function doSomething() { // Your actual code to do what you want )}; BATMANDY

A Button CSS Reset By Andy Bell button { display: inline-block; border: none; margin: 0; padding: 0; font-family: sans-serif; font-size: 1rem; line-height: 1; background: transparent; -webkit-appearance: none; } BATMANDY

If you need a link, use the <a> element FEATURES

<div> <a> Navigate to a page or view Change url Browser redraw/refresh Focusable Keyboard Interaction Open in new window Reported to accessibility tree :active, :hover, :focus, :link & :visited states BATMANDY

A <a> navigates to a new url, whereas a <button> triggers or toggles something in an interface? BATMANDY

IT’S LIKE USING A PRE-INSTALLED JS LIBRARY. BATMANDY

DON’T FORGET ABOUT THE ATTRIBUTES BATMANDY

ARIA ATTRIBUTES FILL THE GAPS IN STANDARD HTML TO GIVE MORE CONTEXT TO THE ACCESSIBILITY TREE BATMANDY

aria-pressed aria-selected aria-expanded aria-grabbed aria-live aria-hidden aria-labelledby https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes BATMANDY

“ If you’re writing CSS that conveys information. Ask yourself is that information also in the accessibility tree? If not, a bit of ARIA might help. JULIE GRUNDY ” BATMANDY

accept ATTRIBUTE rel=“” accept pattern spellcheck contenteditable BATMANDY

pattern ATTRIBUTE rel=“” accept pattern <input pattern=”\d{4,4}” title=”4 digits”> spellcheck contenteditable BATMANDY

contenteditable ATTRIBUTE rel=“” accept pattern

<p contenteditable>content</p> spellcheck contenteditable BATMANDY

spellcheck ATTRIBUTE rel=“” accept pattern

<p contenteditable spellcheck=”true”> spellcheck contenteditable BATMANDY

rel ATTRIBUTE rel=“” accept pattern spellcheck contenteditable BATMANDY

LOADING & PERFORMANCE BATMANDY

PRELOADING OFF SCREEN IMAGES G N DI AK A O L Y Z A L A BATMANDY

BATMANDY

Native lazy-loading for the web <img src=”img.png” loading=”lazy” /> <picture> <source media=”(min-width: 800px)” … /> <img src=“img.png” loading=“lazy” /> </picture> <iframe src=“img.png” loading=“lazy” />

BATMANDY

Only lazy load images that are not in viewport BATMANDY

LARGEST CONTENTFUL PAINT (LCP) : the render time of the largest image or text block visible within the viewport when the page rst starts loading. fi BATMANDY

Only lazy load images that are not in viewport BATMANDY

Lazy load distance threshold is based on the type of resource and the connection type BATMANDY

Optimising loading <img src=”img.png” loading=”lazy” width=”200” height=“200” fetchpriority=“high” /> BATMANDY

Fetch Priority high: You want the browser to prioritize it low: You want the browser to deprioritize it auto: You want the browser to decide (Default) BATMANDY

fetchpriority sets the relative priority BATMANDY

Fetch Priority <ul class=“carousel”> <li><img src=”img/1.jpg” <li><img src=”img/2.jpg” <li><img src=”img/3.jpg” <li><img src=”img/4.jpg” </ul> fetchpriority=”high”></li> fetchpriority=”low”></li> fetchpriority=”low”></li> fetchpriority=”low”></li> BATMANDY

Fetch Priority <ul class=“my-unecessary-carousel“> <li><img src=”img/1.jpg” fetchpriority=”high”></li> <li><img src=”img/2.jpg” fetchpriority=”low” loading=”lazy”></li> <li><img src=”img/3.jpg” fetchpriority=”low” loading=”lazy”></li> <li><img src=”img/4.jpg” fetchpriority=”low” loading=”lazy”></li> </ul> BATMANDY

Fetch Priority Assign fetchpriority to <iframe> elements Used in JavaScript fetch to prioritize API calls Prioritise resource tags like <script> & <link> BATMANDY

Be more explicit with Resource Hints BATMANDY

RESOURCE HINTS

RESOURCE HINTS

RESOURCE HINTS

RESOURCE HINTS

EVERYTHING ADDS UP

DON’T JUST USE DIVS USE THE NAMED ELEMENTS LEVERAGE BUILT-IN FUNCTIONALITY EXPLORE THE ATTRIBUTES CONVEY INFORMATION & CONTEXT BATMANDY

MAKE IT USEFUL MAKE IT USABLE BATMANDY

HTML IS NOT JUST THE FOUNDATION WE BUILD ON. IT’S VITAL IN MAKING OUR WEBSITES ACCESSIBLE . USABLE & PERFORMANT BATMANDY

HTML IS A HACK FOR MAKING GOOD WEBSITES & APPS BATMANDY

THANKS BURNT TOAST CREATIVE @burnttoastcre8v BATMANDY

THANKS & RESOURCES Julie Grundy - @stringyland.bsky.social Eric Bailey - @social.ericwbailey.website/@eric ‣developer.mozilla.org/docs/Web/HTML ‣https://web.dev/iframe-lazy-loading/ ‣noti.st/ericwbailey/Yfyaxa/the-intersection-of-performance-and-accessibility ‣developers.google.com/web/tools/lighthouse/audits/dom-size ‣medium.com/@mandy.michael/understanding-why-semantic-html-is-important-as-told-by-typescriptbd71ad41e6c4 ‣https://web.dev/fetch-priority/ ‣https://www.smashingmagazine.com/2022/04/boost-resource-loading-new-priority-hint-fetchpriority/ ‣https://adrianroselli.com/2019/07/maybe-you-dont-need-a-date-picker.html ‣https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/frame/ settings.json5;l=963-995 ‣https://web.dev/lcp/ ‣https://addyosmani.com/blog/lazy-loading/ ‣https://www.debugbear.com/blog/resource-hints-rel-preload-prefetch-preconnect BATMANDY

Advanced HTML

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Slide 6

Slide 7

Slide 8

Slide 9

Slide 10

Slide 11

Slide 12

Slide 13

Slide 14

Slide 15

Slide 16

Slide 17

Slide 18

Slide 19

Slide 20

Slide 21

Slide 22

Slide 23

Slide 24

Slide 25

Slide 26

Slide 27

Slide 28

Slide 29

Slide 30

Slide 31

Slide 32

Slide 33

Slide 34

Slide 35

Slide 36

Slide 37

Slide 38

Slide 39

Slide 40

Slide 41

Slide 42

Slide 43

Slide 44

Slide 45

Slide 46

Slide 47

Slide 48

Slide 49

Slide 50

Slide 51

Slide 52

Slide 53

Slide 54

Slide 55

Slide 56

Slide 57

Slide 58

Slide 59

Slide 60

Slide 61

Slide 62

Slide 63

Slide 64

Slide 65

Slide 66

Slide 67

Slide 68

Slide 69

Slide 70

Slide 71

Slide 72

Slide 73

Slide 74

Slide 75