Advanced HTML

A presentation at DDD Perth in October 2023 in Perth WA, Australia by Mandy Michael

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

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

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

BATMANDY

BATMANDY

BATMANDY

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
<link rel=”preconnect” href=“https://gooddogs.com/img”> <link rel=”dns-prefetch” href=“https://gooddogs.com/img”> BATMANDY

RESOURCE HINTS
<link rel=”preconnect” href=”….”> Starts the connection process as soon as possible BATMANDY

RESOURCE HINTS
<link rel=”preconnect” href=”….”> Starts the connection process as soon as possible Only for critical connections BATMANDY

RESOURCE HINTS
<link rel=”dns-prefetch” href=”….”> Starts the DNS lookup https://caniuse.com/?search=dns-prefetch BATMANDY

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

Mandy Michael
@mandy

1 / 98

HTML, the foundation of the web! With so much time being spent on typed javascript, functional programming, unit tests, visual regression testing, tools, frameworks and a drive to write better more efficient code we often forget that the web starts with HTML.

Let’s talk HTML and semantics and why choosing the right HTML elements will help you write more accessible, efficient and maintainable code not just in your HTML but your CSS and Javascript as well.

Most importantly we’ll explore why HTML is so vital in improving your projects overall functionality for people and for bots.

Video