A presentation at DDD Perth in 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
BATMANDY
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
interface dog { name: any age: any isFluffy: any } 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
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
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
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 BATMANDYA 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
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 BATMANDYA <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 BATMANDYspellcheck ATTRIBUTE rel=“” accept pattern
<p contenteditable spellcheck=”true”> spellcheck contenteditable BATMANDYrel 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” />
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”> BATMANDYRESOURCE HINTS
<link rel=”preconnect” href=”….”> Starts the connection process as soon as possible BATMANDYRESOURCE HINTS
<link rel=”preconnect” href=”….”> Starts the connection process as soon as possible Only for critical connections BATMANDYRESOURCE HINTS
<link rel=”dns-prefetch” href=”….”> Starts the DNS lookup https://caniuse.com/?search=dns-prefetch BATMANDYEVERYTHING 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
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.