Notes for HTML - Overview - Condensed
By Scott Granneman & Jans Carton
Find the presentation at http://www.granneman.com/presentations/
## Slide 2
Slides: https://granneman.com/downloads/web-dev/HTML-Overview-Condensed.pdf
Notes: https://granneman.com/downloads/web-dev/HTML-Overview-Condensed.txt
## Slide 3
https://www.granneman.com/presentations/all-presentations
## Slide 5
Some HTML elements are conveniences for avoiding writing CSS (e.g., , , ) or for structure (
& )
Some CSS inserts content (e.g., ::before & ::after) or modifies behavior (e.g., animate & transition)
Some JavaScript modifies HTML & CSS to change meaning or presentation, not for behavior
Wikipedia contributors. “Separation of concerns”. Wikipedia, The Free Encyclopedia, 20 Mar. 2024, https://en.wikipedia.org/wiki/Separation_of_concerns. Web. 15 Apr. 2024.
## Slide 7
HTML 4.01: Raggett, Dave et al. “Index of Elements”. World Wide Web Consortium [W3C]. HTML 4.01 Specification, 24 Dec 1999, https://www.w3.org/TR/html401/index/elements.html. Web. 24 Oct 2023.
HTML5
Hickson, Ian et al. “4 The elements of HTML”. WHATWG. HTML Living Standard, 24 Oct 2023, https://html.spec.whatwg.org/#semantics. Web. 24 Oct 2023.
MDN contributors. “HTML elements reference”. MDN Web Docs, 11 July 2023, https://developer.mozilla.org/en-US/docs/Web/HTML/Element. Web. 24 Oct 2023.
112 elements (as of 24 Oct 2023): a, abbr, address, area, article, aside, audio, b, base, bdi, bdo, blockquote, body, br, button, canvas, caption, cite, code, col, colgroup, data, datalist, dd, del, details, dfn, dialog, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, head, header, hgroup, hr, html, i, iframe, img, input, ins, kbd, label, legend, li, link, main, map, mark, menu, meta, meter, nav, noscript, object, ol, optgroup, option, output, p, picture, pre, progress, q, rp, rt, ruby, s, samp, script, search, section, select, slot, small, source, span, strong, style, sub, summary, sup, table, tbody, td, template, textarea, tfoot, th, thead, time, title, tr, track, u, ul, var, video, wbr
w3c. html.json. webref, commit 670aa860d2fedea6b7b3663e9a8f158b02dac81a, World Wide Web Consortium [W3C], 24 Mar 2023. GitHub, https://github.com/w3c/webref/blob/main/ed/elements/html.json.
29 obsolete elements (as of 24 Oct 2023): acronym, applet, basefont, bgsound, big, blink, center, dir, font, frame, frameset, isindex, keygen, listing, marquee, menuitem, multicol, nextid, nobr, noembed, noframes, param, plaintext, rb, rtc, spacer, strike, tt, xmp
Hickson, Ian et al. “16.2 Non-conforming features”. WHATWG. HTML Living Standard, 24 Oct 2023, https://html.spec.whatwg.org/#non-conforming-features. Web. 24 Oct 2023.
MDN adds 3 more obsolete elements: content, image, shadow
MDN contributors. “Obsolete and deprecated elements”. MDN Web Docs, 11 July 2023, https://developer.mozilla.org/en-US/docs/Web/HTML/Element#obsolete_and_deprecated_elements. Web. 24 Oct 2023.
~2020 (?), it was 115 elements, with 31 obsolete or deprecated
## Slide 12
WHATWG. “4.1.1 The html element”. HTML Living Standard, 29 Mar. 2022, https://html.spec.whatwg.org/multipage/semantics.html#the-html-element. Web. 29 Mar. 2022.
## Slide 13
WHATWG. “4.2.1 The head element”. HTML Living Standard, 29 Mar. 2022, https://html.spec.whatwg.org/multipage/semantics.html#the-head-element. Web. 29 Mar. 2022.
## Slide 15
WHATWG. “4.3.1 The body element”. HTML Living Standard, 29 Mar. 2022, https://html.spec.whatwg.org/multipage/sections.html#the-body-element. Web. 29 Mar. 2022.
MDN contributors. “: The Document Body element”. MDN Web Docs, 21 Apr 2022, https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body. Web. 8 July 2022.
## Slide 20
Granneman, Scott. Linux Phrasebook, Second Edition. Indianapolis, IN: Addison-Wesley (2016). iii, 478.
## Slide 21
Full list of metadata elements: base, link, meta, noscript, script, style, template, title.
Hickson, Ian et al. “3.2.5.2.1 Metadata content”. WHATWG, HTML Living Standard, 19 Mar 2023, https://html.spec.whatwg.org/multipage/dom.html#metadata-content. Web. 19 Mar 2023.
## Slide 22
WHATWG. “4.2.5 The meta element”. HTML Living Standard, 3 Feb. 2022, http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#the-meta-element. Web. 6 Feb. 2022.
## Slide 23
shrink-to-fit: Aderinokun, Ire. “The Problem with iOS Safari and shrink-to-fit”. bitsofcode, 5 Apr. 2016, https://bitsofco.de/ios-safari-and-shrink-to-fit/. Web. 30 Mar 2022.
## Slide 24
WHATWG. “4.2.2 The title element”. HTML Living Standard, 3 Feb. 2022, http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#the-title-element. Web. 6 Feb. 2022.
## Slide 25
The H.P. Lovecraft Wiki contributors. “The Call of Cthulhu”. The H.P. Lovecraft Wiki, 7 Apr. 2023, https://lovecraft.fandom.com/wiki/The_Call_of_Cthulhu. Web. 20 Apr. 2024.
## Slide 26
“On-Page Ranking Factors”. Moz, https://moz.com/learn/seo/on-page-factors. Web. 28 December 2021.
“Title Tag”. Moz, https://moz.com/learn/seo/title-tag. Web. 28 December 2021.
## Slide 27
Granneman, Scott. “The title page of the 3rd edition of the Encyclopedia Brittanica [1797]”. Chainsaw on a Tire Swing, 4 July 2015, https://chainsawonatireswing.com/2015/07/04/title-page-of-3rd-edition-of-encyclopedia-brittanica/. Web. 21 December 2021.
## Slide 29
Dgar [@dgar@aus.social]. “A SEO expert walks into a bar, tavern, pub, grill, public house, irish bar, bartender, drinks, beer, wine, liquor.”. Mastodon. aus.social, 18 Mar. 2024, https://aus.social/@dgar/112117108915253951. Web. 18 Mar. 2024.
MDRivet. “Crowd Laughing.wav”. Freesound, 9 Apr. 2015, https://freesound.org/people/MDRivet/sounds/269461/. Web. 18 Mar. 2024.
Licensed CC0 1.0: https://creativecommons.org/publicdomain/zero/1.0/.
## Slide 32
“Inland Bearded Dragon”. Saint Louis Zoo, 1 Feb. 2019, https://web.archive.org/web/20190201120255/https://www.stlzoo.org/animals/abouttheanimals/reptiles/lizards/inlandbeardeddragon. Web. 6 Feb 2022.
## Slide 35
WHATWG. “4.3.6 The h1, h2, h3, h4, h5, and h6 elements”. HTML Living Standard, 29 Mar. 2022, http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements. Web. 29 Mar. 2022.
MDN contributors. “
–
: The HTML Section Heading elements”. MDN Web Docs, 2 Feb. 2022, https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements. Web. 13 Feb 2022.
## Slide 36
WebSanity. “HTML: Simple Webpage, Corrected & No Deprecations”. CodePen, 20 Dec. 2021, https://codepen.io/websanity/pen/jOGwKxB?editors=1000. Web. 20 Dec. 2021.
## Slide 37
WebSanity. “HTML: Simple Webpage, Corrected & No Deprecations”. CodePen, 20 Dec. 2021, https://codepen.io/websanity/pen/jOGwKxB?editors=1000. Web. 20 Dec. 2021.
## Slide 39
Surowiecki, James. “Content and its Discontents”. The New Yorker, 20 Oct 2014, https://www.newyorker.com/magazine/2014/10/20/content-discontents. Web. 30 Jan 2022.
## Slide 40
AllMusic. “Ben Branch & The Operation Breadbasket Orchestra Songs, Albums, Reviews, Bio & More | AllMusic”. AllMusic, 2022, https://www.allmusic.com/artist/ben-branch-the-operation-breadbasket-orchestra-mn0000157434. Web. 30 Jan 2022.
## Slide 41
WHATWG. “4.4.1 The p element”. HTML Living Standard, 3 Feb. 2022, http://www.whatwg.org/specs/web-apps/current-work/multipage/grouping-content.html#the-p-element. Web. 6 Feb. 2022.
MDN contributors. “
: The Paragraph element”. MDN Web Docs, 18 Feb. 2022, https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p. Web. 3 Apr 2022.
## Slide 42
WebSanity. “HTML: p element”. CodePen, 1 May 2014, https://codepen.io/websanity/pen/zYBPmo?editors=1000. Web. 6 Feb 2022.
## Slide 44
WebSanity. “HTML: p element”. CodePen, 1 May 2014, https://codepen.io/websanity/pen/zYBPmo?editors=1000. Web. 6 Feb 2022.
## Slide 45
WebSanity. “HTML: p element”. CodePen, 1 May 2014, https://codepen.io/websanity/pen/zYBPmo?editors=1000. Web. 6 Feb 2022.
## Slide 46
WebSanity. “HTML: p element”. CodePen, 1 May 2014, https://codepen.io/websanity/pen/zYBPmo?editors=1000. Web. 6 Feb 2022.
## Slide 50
All will validate. 1st one is best because it’s easy to scan down your code & make sure you closed all start tags. 2nd is OK if you have a very short amount of content. 3rd one is bad form & makes no sense.
## Slide 55
Christian’s Rule
When you save your file in some editors with auto-formatting on, it will format like this, which you do not want
## Slide 56
Free-floating text might not go in a
— e.g., you might use a
,
, or
— but it has to go into something
## Slide 57
“4.5.27 The br element”. HTML Living Standard, WHATWG, 3 Feb. 2022, http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-br-element. Web. 6 Feb. 2022.
MDN contributors. “ : The Line Break element”. MDN Web Docs, 2 Oct. 2021, https://developer.mozilla.org/en-US/docs/Web/HTML/Element/br. Web. 3 Apr 2022.
## Slide 58
WebSanity. “HTML: br element”. CodePen, 24 Apr. 2014, https://codepen.io/websanity/pen/YzWQEE?editors=1000. Web. 6 Feb 2022.
Frost, Robert. Excerpt from “Stopping by Woods on a Snowy Evening”. Poetry Foundation, 5 Feb. 2022, https://www.poetryfoundation.org/poems/42891/stopping-by-woods-on-a-snowy-evening. Web. 6 Feb 2022.
## Slide 61
WebSanity. “HTML: br element - problems with 2 br in a row”. CodePen, 27 June 2020, https://codepen.io/websanity/pen/pogrqgv?editors=1100. Web. 6 Feb 2022.
Lovecraft, H. P. Excerpt from“The Dunwich Horror”. Lovecraft Stories, http://www.lovecraft-stories.com/story/the-dunwich-horror. Web. 6 Feb 2022.
FIXME change screenshots?
## Slide 62
WebSanity. “HTML: br element - problems with 2 br in a row”. CodePen, 27 June 2020, https://codepen.io/websanity/pen/pogrqgv?editors=1100. Web. 6 Feb 2022.
Lovecraft, H. P. Excerpt from“The Dunwich Horror”. Lovecraft Stories, http://www.lovecraft-stories.com/story/the-dunwich-horror. Web. 6 Feb 2022.
## Slide 63
“13.1.2 Elements”. HTML Living Standard, WHATWG, 3 Feb. 2022, https://html.spec.whatwg.org/multipage/syntax.html#void-elements. Web. 6 Feb. 2022.
MDN contributors. “Empty element”. MDN Web Docs, 7 Oct. 2021, https://developer.mozilla.org/en-US/docs/Glossary/Empty_element. Web. 3 Apr 2022.
## Slide 64
“13.1.2 Elements”. HTML Living Standard, WHATWG, 3 Feb. 2022, https://html.spec.whatwg.org/multipage/syntax.html#void-elements. Web. 6 Feb. 2022.
MDN contributors. “Empty element”. MDN Web Docs, 7 Oct. 2021, https://developer.mozilla.org/en-US/docs/Glossary/Empty_element. Web. 3 Apr 2022.
For more on void elements, see our presentations Web Development: The Absolute Basics & HTML Overview in Categorization
## Slide 65
The first adds additional new line to the start of the paragraph, which never makes sense (if you want additional margining above a paragraph, use CSS)
With thanks to the great Ogden Nash
TODO: CodePen this
## Slide 66
Chris’s Rule
## Slide 67
WebSanity. “HTML: Your first webpage”. CodePen, 30 June 2022, https://codepen.io/websanity/pen/yLKyxmr?editors=1000. Web. 30 June 2022.
Smith, Linell Nash, editor. The Best of Ogden Nash. Chicago: Iver R. Dee (2007). 163.
## Slide 68
WebSanity. “HTML: Your first webpage”. CodePen, 30 June 2022, https://codepen.io/websanity/pen/yLKyxmr?editors=1000. Web. 30 June 2022.
Smith, Linell Nash, editor. The Best of Ogden Nash. Chicago: Iver R. Dee (2007). 163.
## Slide 77
WHATWG. “4.3.6 The h1, h2, h3, h4, h5, and h6 elements”. HTML Living Standard, 29 Mar. 2022, http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements. Web. 29 Mar. 2022.
MDN contributors. “
–
: The HTML Section Heading elements”. MDN Web Docs, 2 Feb. 2022, https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements. Web. 13 Feb 2022.
## Slide 78
WebSanity. “Setting up a WebSanity Server: Linode”. WebSanity Tech Wiki, 2 Mar. 2016. Web. 2 Mar. 2016.
Muller, Britney & the MOZ staff. “On-Page SEO”. MOZ, https://moz.com/beginners-guide-to-seo/on-page-seo. Web. 13 Feb 2022.
FIXME add screenshot showing accessibility
## Slide 79
WebSanity. “Setting up a WebSanity Server: Linode”. WebSanity Tech Wiki, 2 Mar. 2016. Web. 2 Mar. 2016.
Muller, Britney & the MOZ staff. “On-Page SEO”. MOZ, https://moz.com/beginners-guide-to-seo/on-page-seo. Web. 13 Feb 2022.
## Slide 80
WebSanity. “Setting up a WebSanity Server: Linode”. WebSanity Tech Wiki, 2 Mar. 2016. Web. 2 Mar. 2016.
Muller, Britney & the MOZ staff. “On-Page SEO”. MOZ, https://moz.com/beginners-guide-to-seo/on-page-seo. Web. 13 Feb 2022.
## Slide 81
WebSanity. “Setting up a WebSanity Server: Linode”. WebSanity Tech Wiki, 2 Mar. 2016. Web. 2 Mar. 2016.
Muller, Britney & the MOZ staff. “On-Page SEO”. MOZ, https://moz.com/beginners-guide-to-seo/on-page-seo. Web. 13 Feb 2022.
## Slide 82
WebSanity. “Setting up a WebSanity Server: Linode”. WebSanity Tech Wiki, 2 Mar. 2016. Web. 2 Mar. 2016.
Muller, Britney & the MOZ staff. “On-Page SEO”. MOZ, https://moz.com/beginners-guide-to-seo/on-page-seo. Web. 13 Feb 2022.
## Slide 83
WebSanity. “HTML: h1–h6 elements”. CodePen, 25 Apr. 2014, http://codepen.io/websanity/pen/ptgzc. Web. 25 Apr. 2014.
## Slide 84
WHATWG. “4.3.6 The h1, h2, h3, h4, h5, and h6 elements”. HTML Living Standard, 29 Mar. 2022, http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements. Web. 29 Mar. 2022.
MDN contributors. “
–
: The HTML Section Heading elements”. MDN Web Docs, 2 Feb. 2022, https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements. Web. 13 Feb 2022.
WebSanity. “HTML: h1–h6 elements”. CodePen, 25 Apr. 2014, http://codepen.io/websanity/pen/ptgzc. Web. 25 Apr. 2014.
## Slide 85
WHATWG. “4.3.6 The h1, h2, h3, h4, h5, and h6 elements”. HTML Living Standard, 29 Mar. 2022, http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements. Web. 29 Mar. 2022.
MDN contributors. “
–
: The HTML Section Heading elements”. MDN Web Docs, 2 Feb. 2022, https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements. Web. 13 Feb 2022.
WebSanity. “HTML: h1–h6 elements”. CodePen, 25 Apr. 2014, http://codepen.io/websanity/pen/ptgzc. Web. 25 Apr. 2014.
## Slide 86
WHATWG. “4.3.6 The h1, h2, h3, h4, h5, and h6 elements”. HTML Living Standard, 29 Mar. 2022, http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements. Web. 29 Mar. 2022.
MDN contributors. “
–
: The HTML Section Heading elements”. MDN Web Docs, 2 Feb. 2022, https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements. Web. 13 Feb 2022.
Daggett, John & Myles C. Maxfield & Chris Lilley. “3.5. Font size: the font-size property”. CSS Fonts Module Level 3, 20 Sept. 2018, https://www.w3.org/TR/css-fonts-3/#font-size-prop. Web. 30 Mar. 2022.
WebSanity. “HTML: h1–h6 elements”. CodePen, 25 Apr. 2014, http://codepen.io/websanity/pen/ptgzc. Web. 25 Apr. 2014.
## Slide 87
WHATWG. “4.3.6 The h1, h2, h3, h4, h5, and h6 elements”. HTML Living Standard, 29 Mar. 2022, http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements. Web. 29 Mar. 2022.
MDN contributors. “
–
: The HTML Section Heading elements”. MDN Web Docs, 2 Feb. 2022, https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements. Web. 13 Feb 2022.
Daggett, John & Myles C. Maxfield & Chris Lilley. “3.5. Font size: the font-size property”. CSS Fonts Module Level 3, 20 Sept. 2018, https://www.w3.org/TR/css-fonts-3/#font-size-prop. Web. 30 Mar. 2022.
WebSanity. “HTML: h1–h6 elements”. CodePen, 25 Apr. 2014, http://codepen.io/websanity/pen/ptgzc. Web. 25 Apr. 2014.
## Slide 88
WHATWG. “4.3.6 The h1, h2, h3, h4, h5, and h6 elements”. HTML Living Standard, 29 Mar. 2022, http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements. Web. 29 Mar. 2022.
MDN contributors. “
–
: The HTML Section Heading elements”. MDN Web Docs, 2 Feb. 2022, https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements. Web. 13 Feb 2022.
## Slide 90
Daggett, John & Myles C. Maxfield & Chris Lilley. “3.5. Font size: the font-size property”. CSS Fonts Module Level 3, 20 Sept. 2018, https://www.w3.org/TR/css-fonts-3/#font-size-prop. Web. 30 Mar. 2022.
## Slide 91
Daggett, John & Myles C. Maxfield & Chris Lilley. “3.5. Font size: the font-size property”. CSS Fonts Module Level 3, 20 Sept. 2018, https://www.w3.org/TR/css-fonts-3/#font-size-prop. Web. 30 Mar. 2022.
## Slide 92
Muller, Britney & the MOZ staff. “On-Page SEO”. MOZ, https://moz.com/beginners-guide-to-seo/on-page-seo. Web. 13 Feb 2022.
## Slide 93
Butterick, Matthew. “Headings”. Butterick’s Practical Typography, 16 July 2023, https://practicaltypography.com/headings.html. Web. 1 Aug 2023.
## Slide 94
WHATWG. “3.2.5.2.4 Heading content”. HTML Living Standard, 8 July 2022, https://html.spec.whatwg.org/#heading-content. Web. 8 July 2022.
## Slide 95
Brealey, Richard A., Stewart C. Myers, & Franklin Allen. Principles of Corporate Finance, 10th Edition. New York: McGraw-Hill (2010). 9.
## Slide 102
WebSanity. “HTML: headings create implied sections”. CodePen, 3 Aug. 2020, https://codepen.io/websanity/pen/BwbYVp?editors=1000. Web. 3 Aug. 2020.
## Slide 103
WebSanity. “HTML: headings create implied sections”. CodePen, 3 Aug. 2020, https://codepen.io/websanity/pen/BwbYVp?editors=1000. Web. 3 Aug. 2020.
## Slide 105
WHATWG. “4.3.6 The h1, h2, h3, h4, h5, and h6 elements”. HTML Living Standard, 29 Mar. 2022, http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements. Web. 29 Mar. 2022.
MDN contributors. “
–
: The HTML Section Heading elements”. MDN Web Docs, 2 Feb. 2022, https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements. Web. 13 Feb 2022.
## Slide 106
WebSanity. “HTML: h1-h6 ordering”. CodePen, 25 Apr. 2014, http://codepen.io/websanity/pen/AoapB. Web. 25 Apr. 2014.
## Slide 109
Google gives extra weight to words inside headings; Google gives no extra weight to words inside paragraphs
FIXME screenshot
## Slide 110
Hickson, Ian et al. “4.3.7 The hgroup element”. WHATWG, HTML Living Standard, 19 Mar 2023, https://html.spec.whatwg.org/multipage/sections.html#the-hgroup-element. Web. 19 Mar 2023.
MDN contributors. “”. MDN Web Docs, 23 Feb 2023, https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hgroup. Web. 19 Mar 2023.
## Slide 111
WebSanity. “HTML: hgroup element”. CodePen, 7 Apr 2025, https://codepen.io/websanity/pen/eYLLNPe?editors=1000. Web. 7 Apr 2025.
## Slide 112
WebSanity. “HTML: hgroup element, Britannica example”. CodePen, 19 Mar 2023, https://codepen.io/websanity/pen/mdGGJLY?editors=1000. Web. 19 Mar 2023.
## Slide 113
WebSanity. “HTML: hgroup element, Britannica example: Live Preview”. CodePen, 19 Mar 2023, https://codepen.io/websanity/live/mdGGJLY. Web. 19 Mar 2023.
## Slide 117
WebSanity. “HTML: 3 kinds of lists”. CodePen, 27 Nov. 2021, https://codepen.io/websanity/pen/bGobgBy?editors=1000. Web. 27 Nov. 2021.
## Slide 119
WHATWG. “4.4.8 The li element”. HTML Living Standard, 31 Mar. 2022, https://html.spec.whatwg.org/multipage/grouping-content.html#the-li-element. Web. 3 Apr 2022.
MDN contributors. “
: The List Item element”. MDN Web Docs, 7 Nov. 2021, https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li. Web. 3 Apr 2022.
## Slide 120
WebSanity. “HTML: ul, ol, & li elements”. CodePen, 26 Sept. 2019, https://codepen.io/websanity/pen/xxKeLeZ?editors=1000. Web. 26 Sept. 2019.
## Slide 122
WHATWG. “4.4.6 The ul element”. HTML Living Standard, 31 Mar. 2022, https://html.spec.whatwg.org/multipage/grouping-content.html#the-ul-element. Web. 3 Apr 2022.
MDN contributors. “
: The Unordered List element”. MDN Web Docs, 7 Nov. 2021, https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul. Web. 3 Apr 2022.
## Slide 123
WebSanity. “HTML: ul & li elements”. CodePen, 27 Apr. 2014, https://codepen.io/websanity/pen/MWeZdE?editors=1000. Web. 27 Apr. 2014.
## Slide 124
WHATWG. “4.4.5 The ol element”. HTML Living Standard, 31 Mar. 2022, https://html.spec.whatwg.org/multipage/grouping-content.html#the-ol-element. Web. 3 Apr 2022.
MDN contributors. “: The Ordered List element”. MDN Web Docs, 18 Feb. 2022, https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol. Web. 3 Apr 2022.
## Slide 125
WebSanity. “HTML: ol & li elements”. CodePen, 1 May 2014, https://codepen.io/websanity/pen/dyXwxL?editors=1000. Web. 1 May 2014.
Wikipedia contributors. “Gnomes (South Park)”. Wikipedia, The Free Encyclopedia, 20 Nov. 2021, https://en.wikipedia.org/w/index.php?title=Gnomes_(South_Park)&oldid=1056283403. Web. 9 Feb. 2022.
## Slide 126
a (lowercase letters), A (uppercase letters), i (lowercase Roman numerals), I (uppercase Roman numerals), & 1 (Arabic numerals)
WHATWG. “4.4.5 The ol element”. HTML Living Standard, 31 Mar. 2022, https://html.spec.whatwg.org/multipage/grouping-content.html#the-ol-element. Web. 3 Apr 2022.
MDN contributors. “: The Ordered List element”. MDN Web Docs, 18 Feb. 2022, https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol. Web. 3 Apr 2022.
## Slide 127
WebSanity. “HTML: ol element with reversed attribute”. CodePen, 29 Oct. 2024, https://codepen.io/websanity/pen/zYPoKav?editors=1000. Web. 29 Oct. 2024.
## Slide 128
WebSanity. “HTML: ol element with start attribute”. CodePen, 5 Feb. 2022, https://codepen.io/websanity/pen/zYPooYo?editors=1000. Web. 5 Feb. 2022.
## Slide 129
Deveria, Alexis [@Fyrd]. “Reversed attribute of ordered lists”. Can I use…, https://caniuse.com/ol-reversed. Web. 9 Feb 2022.
## Slide 131
WebSanity. “HTML: ol element, nested & simplified”. CodePen, 26 Dec. 2021, https://codepen.io/websanity/pen/yLzPRVm?editors=1000. Web. 26 Dec. 2021.
## Slide 133
For another example, see https://codepen.io/websanity/pen/Jheac?editors=1000
## Slide 134
WebSanity. “HTML: ol element, nested & simplified”. CodePen, 26 Dec. 2021, https://codepen.io/websanity/pen/yLzPRVm?editors=1000. Web. 26 Dec. 2021.
## Slide 135
WebSanity. “HTML: ol element, nested & simplified”. CodePen, 26 Dec. 2021, https://codepen.io/websanity/pen/yLzPRVm?editors=1000. Web. 26 Dec. 2021.
## Slide 136
WebSanity. “HTML: ol element, nested & simplified”. CodePen, 26 Dec. 2021, https://codepen.io/websanity/pen/yLzPRVm?editors=1000. Web. 26 Dec. 2021.
## Slide 137
WebSanity. “HTML: ol element, nested & simplified”. CodePen, 26 Dec. 2021, https://codepen.io/websanity/pen/yLzPRVm?editors=1000. Web. 26 Dec. 2021.
## Slide 138
WebSanity. “HTML: ol element, nested & simplified”. CodePen, 26 Dec. 2021, https://codepen.io/websanity/pen/yLzPRVm?editors=1000. Web. 26 Dec. 2021.
## Slide 139
WebSanity. “HTML: ol element, nested & simplified”. CodePen, 26 Dec. 2021, https://codepen.io/websanity/pen/yLzPRVm?editors=1000. Web. 26 Dec. 2021.
## Slide 140
WebSanity. “HTML: ol element, nested & simplified”. CodePen, 26 Dec. 2021, https://codepen.io/websanity/pen/yLzPRVm?editors=1000. Web. 26 Dec. 2021.
## Slide 141
WebSanity. “HTML: ol element, nested & simplified”. CodePen, 26 Dec. 2021, https://codepen.io/websanity/pen/yLzPRVm?editors=1000. Web. 26 Dec. 2021.
## Slide 142
WebSanity. “HTML: ol element, nested & simplified”. CodePen, 26 Dec. 2021, https://codepen.io/websanity/pen/yLzPRVm?editors=1000. Web. 26 Dec. 2021.
## Slide 143
WebSanity. “HTML: ol element, nested & simplified”. CodePen, 26 Dec. 2021, https://codepen.io/websanity/pen/yLzPRVm?editors=1000. Web. 26 Dec. 2021.
## Slide 144
WebSanity. “HTML: ol element, nested & simplified”. CodePen, 26 Dec. 2021, https://codepen.io/websanity/pen/yLzPRVm?editors=1000. Web. 26 Dec. 2021.
## Slide 145
WebSanity. “HTML: ol elements nested”. CodePen, 27 Apr. 2014, http://codepen.io/websanity/pen/DpGHo. Web. 27 Apr. 2014.
## Slide 146
WebSanity. “HTML: ul elements nested”. CodePen, 27 Apr. 2014, http://codepen.io/websanity/pen/GthmI. Web. 27 Apr. 2014.
## Slide 148
WebSanity. “HTML: ol & ul elements nested together”. CodePen, 27 Apr. 2014, http://codepen.io/websanity/pen/mIkfw. Web. 27 Apr. 2014.
## Slide 149
Eddie’s Rule
## Slide 152
WHATWG. “13.1.4 Character references”. HTML Living Standard, 3 Feb. 2022, https://html.spec.whatwg.org/multipage/syntax.html#character-references. Web. 6 Feb. 2022.
MDN contributors. “Entity”. MDN Web Docs, 18 Feb 2022, https://developer.mozilla.org/en-US/docs/Glossary/Entity. Web. 8 July 2022.
## Slide 154
WHATWG. “13.1.4 Character references”. HTML Living Standard, 3 Feb. 2022, https://html.spec.whatwg.org/multipage/syntax.html#character-references. Web. 6 Feb. 2022.
MDN contributors. “Entity”. MDN Web Docs, 18 Feb 2022, https://developer.mozilla.org/en-US/docs/Glossary/Entity. Web. 8 July 2022.
## Slide 155
Wikipedia contributors. "List of XML and HTML character entity references”. Wikipedia, The Free Encyclopedia, 3 Apr. 2022, https://en.wikipedia.org/w/index.php?title=List_of_XML_and_HTML_character_entity_references&oldid=1080815017. Web. 4 Apr. 2022.
lhunt. “Character Entity Reference Chart”. W3C Public CVS Repository, 2009, https://dev.w3.org/html5/html-author/charref. Web. 4 Apr 2022.
## Slide 156
Wikipedia contributors. "List of XML and HTML character entity references”. Wikipedia, The Free Encyclopedia, 3 Apr. 2022, https://en.wikipedia.org/w/index.php?title=List_of_XML_and_HTML_character_entity_references&oldid=1080815017. Web. 4 Apr. 2022.
lhunt. “Character Entity Reference Chart”. W3C Public CVS Repository, 2009, https://dev.w3.org/html5/html-author/charref. Web. 4 Apr 2022.
## Slide 157
WHATWG. “13.1.4 Character references”. HTML Living Standard, 3 Feb. 2022, https://html.spec.whatwg.org/multipage/syntax.html#character-references. Web. 6 Feb. 2022.
MDN contributors. “Entity”. MDN Web Docs, 18 Feb 2022, https://developer.mozilla.org/en-US/docs/Glossary/Entity. Web. 8 July 2022.
## Slide 158
Wikipedia contributors. "List of XML and HTML character entity references”. Wikipedia, The Free Encyclopedia, 3 Apr. 2022, https://en.wikipedia.org/w/index.php?title=List_of_XML_and_HTML_character_entity_references&oldid=1080815017. Web. 4 Apr. 2022.
lhunt. “Character Entity Reference Chart”. W3C Public CVS Repository, 2009, https://dev.w3.org/html5/html-author/charref. Web. 4 Apr 2022.
¶ is the pilcrow, or paragraph sign
## Slide 159
WebSanity. “HTML: character entities”. CodePen, 4 Apr. 2021, http://codepen.io/websanity/pen/sypxK. Web. 4 Apr 2022.
## Slide 160
WHATWG. “13.1.4 Character references”. HTML Living Standard, 3 Feb. 2022, https://html.spec.whatwg.org/multipage/syntax.html#character-references. Web. 6 Feb. 2022.
MDN contributors. “Entity”. MDN Web Docs, 18 Feb 2022, https://developer.mozilla.org/en-US/docs/Glossary/Entity. Web. 8 July 2022.
## Slide 162
“Unicode Table (Decimal)”. Tama Software, 2007, https://www.tamasoft.co.jp/en/general-info/unicode-decimal.html. Web. 24 Oct 2023.
## Slide 163
Wikipedia contributors. "List of XML and HTML character entity references”. Wikipedia, The Free Encyclopedia, 3 Apr. 2022, https://en.wikipedia.org/w/index.php?title=List_of_XML_and_HTML_character_entity_references&oldid=1080815017. Web. 4 Apr. 2022.
## Slide 165
Wikipedia contributors. “Hexadecimal”. Wikipedia, The Free Encyclopedia, 21 Oct. 2023, https://en.wikipedia.org/wiki/Hexadecimal. Web. 26 Oct. 2023.
## Slide 166
“UTF-8 Browser Test for Unicode Block ‘Latin-1 Supplement’”. FileFormat.Info, https://www.fileformat.info/info/unicode/block/latin_supplement/utf8test.htm. Web. 5 Aug. 2020.
Capitalization of letters does not matter — usually all letters are capitalized, but you don’t have to
## Slide 167
Wikipedia contributors. “List of XML and HTML character entity references”. Wikipedia, The Free Encyclopedia, 15 Jul. 2020, https://en.wikipedia.org/w/index.php?title=List_of_XML_and_HTML_character_entity_references&oldid=967855330. Web. 6 Aug. 2020.
## Slide 168
The Basic Latin block, the 1st in Unicode, contains all the letters & control codes of ASCII: 128 characters, including C0 controls (e.g., null, bell, backspace, line feed, & escape), ASCII punctuation & symbols, ASCII digits, both uppercase & lowercase letters of English alphabet, & the delete control character (, 2020-08-06)
“UTF-8 Browser Test for Unicode Block ‘Basic Latin’”. FileFormat.Info, https://www.fileformat.info/info/unicode/block/basic_latin/utf8test.htm. Web. 5 Aug. 2020.
## Slide 169
“UTF-8 Browser Test for Unicode Block ‘Latin-1 Supplement’”. FileFormat.Info, https://www.fileformat.info/info/unicode/block/latin_supplement/utf8test.htm. Web. 5 Aug. 2020.
Capitalization of letters does not matter — usually all letters are capitalized, but you don’t have to
## Slide 170
↑ is 2191 • ↬ is 21aC • ⇉ is 21c9 • ⇦ is 21e6
“UTF-8 Browser Test for Unicode Block ‘Arrows’”. FileFormat.Info, https://www.fileformat.info/info/unicode/block/arrows/utf8test.htm. Web. 5 Aug. 2020.
## Slide 171
↑ is 2191 • ↬ is 21aC • ⇉ is 21c9 • ⇦ is 21e6
“UTF-8 Browser Test for Unicode Block ‘Arrows’”. FileFormat.Info, https://www.fileformat.info/info/unicode/block/arrows/utf8test.htm. Web. 5 Aug. 2020.
## Slide 172
↑ is 2191 • ↬ is 21aC • ⇉ is 21c9 • ⇦ is 21e6
“UTF-8 Browser Test for Unicode Block ‘Arrows’”. FileFormat.Info, https://www.fileformat.info/info/unicode/block/arrows/utf8test.htm. Web. 5 Aug. 2020.
## Slide 173
↑ is 2191 • ↬ is 21aC • ⇉ is 21c9 • ⇦ is 21e6
“UTF-8 Browser Test for Unicode Block ‘Arrows’”. FileFormat.Info, https://www.fileformat.info/info/unicode/block/arrows/utf8test.htm. Web. 5 Aug. 2020.
## Slide 174
↑ is 2191 • ↬ is 21aC • ⇉ is 21c9 • ⇦ is 21e6
“UTF-8 Browser Test for Unicode Block ‘Arrows’”. FileFormat.Info, https://www.fileformat.info/info/unicode/block/arrows/utf8test.htm. Web. 5 Aug. 2020.
## Slide 175
Wikipedia contributors. "List of XML and HTML character entity references”. Wikipedia, The Free Encyclopedia, 3 Apr. 2022, https://en.wikipedia.org/w/index.php?title=List_of_XML_and_HTML_character_entity_references&oldid=1080815017. Web. 4 Apr. 2022.
## Slide 176
Wikipedia contributors. “List of XML and HTML character entity references”. Wikipedia, The Free Encyclopedia, 15 Jul. 2020, https://en.wikipedia.org/w/index.php?title=List_of_XML_and_HTML_character_entity_references&oldid=967855330. Web. 6 Aug. 2020.
## Slide 177
Wikipedia contributors. “List of XML and HTML character entity references”. Wikipedia, The Free Encyclopedia, 15 Jul. 2020, https://en.wikipedia.org/w/index.php?title=List_of_XML_and_HTML_character_entity_references&oldid=967855330. Web. 6 Aug. 2020.
## Slide 178
WebSanity. “HTML: character entities”. CodePen, 4 Apr 2022, https://codepen.io/websanity/pen/ZEpRrR?editors=1000. Web. 8 July 2022.
Wikipedia contributors. “List of XML and HTML character entity references”. Wikipedia, The Free Encyclopedia, 15 Jul. 2020, https://en.wikipedia.org/w/index.php?title=List_of_XML_and_HTML_character_entity_references&oldid=967855330. Web. 6 Aug. 2020.
## Slide 179
Wikipedia contributors. “Non-breaking space”. Wikipedia, The Free Encyclopedia, 19 Feb 2022, https://en.wikipedia.org/wiki/Non-breaking_space. Web. 8 July 2022.
Wikipedia contributors. “List of XML and HTML character entity references”. Wikipedia, The Free Encyclopedia, 15 Jul. 2020, https://en.wikipedia.org/w/index.php?title=List_of_XML_and_HTML_character_entity_references&oldid=967855330. Web. 6 Aug. 2020.
## Slide 180
WebSanity. “HTML: nbsp character entity”. CodePen, 5 May 2014, https://codepen.io/websanity/pen/xxEzWB?editors=1000. Web. 8 July 2022.
## Slide 181
Wikipedia contributors. “List of XML and HTML character entity references”. Wikipedia, The Free Encyclopedia, 15 Jul. 2020, https://en.wikipedia.org/w/index.php?title=List_of_XML_and_HTML_character_entity_references. Web. 6 Aug. 2020.
## Slide 182
“Unicode Character Search”. FileFormat.Info, http://www.fileformat.info/info/unicode/char/search.htm. Web. 6 Aug. 2020.
## Slide 183
“Unicode Character Search”. FileFormat.Info, http://www.fileformat.info/info/unicode/char/search.htm. Web. 6 Aug. 2020.
## Slide 184
“Unicode Character Search”. FileFormat.Info, http://www.fileformat.info/info/unicode/char/search.htm. Web. 6 Aug. 2020.
## Slide 185
Marcuse, Andrew. “Unicode Character Search”. FileFormat.Info, https://www.fileformat.info/info/unicode/char/search.htm. Web. 23 Mar 2024.
## Slide 186
Marcuse, Andrew. “Unicode Character Search”. FileFormat.Info, https://www.fileformat.info/info/unicode/char/search.htm?q=airplane. Web. 23 Mar 2024.
## Slide 187
Marcuse, Andrew. “Browser Test Page for Unicode Character ‘AIRPLANE’ (U+2708)”. FileFormat.Info, https://www.fileformat.info/info/unicode/char/2708/index.htm. Web. 23 Mar 2024.
## Slide 188
Marcuse, Andrew. “Browser Test Page for Unicode Character ‘AIRPLANE’ (U+2708)”. FileFormat.Info, https://www.fileformat.info/info/unicode/char/2708/browsertest.htm. Web. 23 Mar 2024.
## Slide 189
Marcuse, Andrew. “Browser Test Page for Unicode Character ‘AIRPLANE’ (U+2708)”. FileFormat.Info, https://www.fileformat.info/info/unicode/char/2708/browsertest.htm. Web. 23 Mar 2024.
## Slide 190
Marcuse, Andrew. “Browser Test Page for Unicode Character ‘AIRPLANE’ (U+2708)”. FileFormat.Info, https://www.fileformat.info/info/unicode/char/2708/browsertest.htm. Web. 23 Mar 2024.
## Slide 191
“Unicode Blocks”. FileFormat.Info, http://www.fileformat.info/info/unicode/block/index.htm. Web. 6 Aug. 2020.
## Slide 216
Wikipedia contributors. “Character Map (Windows)”. Wikipedia, The Free Encyclopedia, 29 Aug. 2023, https://en.wikipedia.org/wiki/Character_Map_%28Windows%29. Web. 9 Nov. 2023.
## Slide 217
Wikipedia contributors. “Character Map (Windows)”. Wikipedia, The Free Encyclopedia, 29 Aug. 2023, https://en.wikipedia.org/wiki/Character_Map_%28Windows%29. Web. 9 Nov. 2023.
## Slide 231
Wikipedia contributors. “Character Map (Windows)”. Wikipedia, The Free Encyclopedia, 29 Aug. 2023, https://en.wikipedia.org/wiki/Character_Map_%28Windows%29. Web. 9 Nov. 2023.
🤢🔥 = sick burn!
## Slide 235
the blowup [@theblowup]. “Overflowing garbage can”. Unsplash, 17 Nov. 2020, https://unsplash.com/photos/t06aN6vewaQ. Web. 11 Feb 2022.
Licensed from Unsplash: https://unsplash.com/license.
## Slide 251
Raycast: https://www.raycast.com
Alfred: https://www.alfredapp.com (clipboard manager requires the Powerpack, which is $42)
Clipboard Fusion: https://www.clipboardfusion.com
## Slide 259
⌥ = Option/Alt
⇧ = Shift
## Slide 262
CSS - Typography covers a few special kinds of spaces & punctuation marks where you really need to use character entities
## Slide 264
i2 = −1 defined imaginary numbers
## Slide 265
Mooney, Kate. “The Em Dash Divides”. The New York Times (August 14, 2019). https://www.nytimes.com/2019/08/14/style/em-dash-punctuation.html.
## Slide 266
Minus sign is slightly thinner than en dash & has a sliver of space between itself & adjacent characters
## Slide 268
TODO: Add ?
## Slide 269
WHATWG. “4.4.2 The hr element”. HTML Living Standard, 11 Feb. 2022, http://www.whatwg.org/specs/web-apps/current-work/multipage/grouping-content.html#the-hr-element. Web. 13 Feb 2022.
MDN contributors. “: The Thematic Break (Horizontal Rule) element”. MDN Web Docs, 2 Oct. 2021, https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hr. Web. 13 Feb 2022.
## Slide 270
WebSanity. “HTML: hr element”. CodePen, 26 Apr. 2014, https://codepen.io/websanity/pen/abZjgW?editors=1000. Web. 26 Apr. 2014.
## Slide 272
WHATWG. “4.4.4 The blockquote element”. HTML Living Standard, 11 Feb. 2022, http://www.whatwg.org/specs/web-apps/current-work/multipage/grouping-content.html#the-blockquote-element. Web.
MDN contributors. “
: The Block Quotation element”. MDN Web Docs, 2 Oct. 2021, https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote. Web. 13 Feb 2022.
## Slide 273
WebSanity. “HTML: blockquote element”. CodePen, 3 Jan. 2022, https://codepen.io/websanity/pen/KKXZLXE?editors=1000. Web. 3 Jan. 2022.
## Slide 274
WebSanity. “HTML: blockquote element”. CodePen, 3 Jan. 2022, https://codepen.io/websanity/pen/KKXZLXE?editors=1000. Web. 3 Jan. 2022.
## Slide 276
WebSanity. “Awesome Blockquote Styling with CSS Live Preview”. CodePen, 29 Oct. 2024, https://codepen.io/websanity/live/jOgzqzN. Web. 29 Oct 2024.
See https://codepen.io/websanity/pen/jOgzqzN?editors=1100 for code.
Forked from: Max. “Awesome Blockquote Styling with CSS”. CodePen, https://codepen.io/maxds/pen/nzmMyO?editors=1100. Web. 29 Oct. 2024.
## Slide 277
Putman, Harm. “Blockquote”. CodePen, https://codepen.io/harmputman/pen/vYVvNb?editors=1000. Web. 29 Oct 2024.
## Slide 278
Clift, Jonathan. “Clean and simple blockquote style”. CodePen, https://codepen.io/cliftwalker/pen/XJaEXY?editors=1000. Web. 29 Oct 2024.
## Slide 279
Sargsyan, Tigran. “Blockquote Styling”. CodePen, 23 Aug. 2020, https://codepen.io/tiggr/details/MWyJJEz. Web. 29 Oct 2024.
## Slide 280
Yabsley, Paul. “Blockquote module for Ofsted inspection excerpt”. CodePen, https://codepen.io/paulyabsley/pen/vYYpyJ?editors=1000. Web. 29 Oct 2024.
## Slide 281
Mugtaba G. “Blockquote Style”. CodePen, https://codepen.io/Oddward/pen/YzKJmKa?editors=1000. Web. 29 Oct 2024.
## Slide 282
Rivett, Fred. “CodePen Search”. CodePen, https://codepen.io/fredrivett/pen/bGZZNg?editors=1000. Web. 29 Oct 2024.
## Slide 283
Shaw, Katherine G. “Speech Bubble Blockquote with Sassy Right Triangles”. CodePen, https://codepen.io/KatherineGShaw/pen/MKGPbX?editors=1000. Web. 29 Oct 2024.
## Slide 284
There are 2 exceptions:
(see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pre) & (see Character References for more)
## Slide 285
WHATWG. “4.4.14 The main element”. HTML Living Standard, 3 Feb. 2022, http://www.whatwg.org/specs/web-apps/current-work/multipage/grouping-content.html#the-main-element. Web. 9 Feb 2022.
MDN contributors. “”. MDN, 2 Oct. 2021, https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main. Web. 9 Feb 2022.
## Slide 286
WHATWG. “4.4.14 The main element”. HTML Living Standard, 3 Feb. 2022, http://www.whatwg.org/specs/web-apps/current-work/multipage/grouping-content.html#the-main-element. Web. 9 Feb 2022.
MDN contributors. “”. MDN, 2 Oct. 2021, https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main. Web. 9 Feb 2022.
## Slide 287
WHATWG. “4.4.14 The main element”. HTML Living Standard, 3 Feb. 2022, http://www.whatwg.org/specs/web-apps/current-work/multipage/grouping-content.html#the-main-element. Web. 9 Feb 2022.
MDN contributors. “”. MDN, 2 Oct. 2021, https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main. Web. 9 Feb 2022.
## Slide 289
MDN contributors. “”. MDN, 2 Oct. 2021, https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main.html. Web. 9 Feb 2022.
Deveria, Alexis [@Fyrd]. “HTML5 semantic elements”. Can I use…, https://caniuse.com/html5semantic. Web. 9 Feb 2022.
## Slide 290
David O'Brien [@se_davidobrien@mastodon.scot]. “Saying ‘No-one using our service has accessibility needs’ is a bit like saying ‘We don't need a ramp, no-one in a wheelchair has ever come up the stairs’.”. *Mastodon*. mastodon.scot, 14 Mar. 2025, https://mastodon.scot/@se_davidobrien/114161547614556118. Web. 16 Mar. 2025.
## Slide 295
WHATWG. “3.2.6 Global attributes”. HTML Living Standard, 19 Mar 2023, https://html.spec.whatwg.org/multipage/dom.html#global-attributes. Web. 19 Mar 2023.
MDN contributors. “Global attributes”. MDN Web Docs, 1 July 2022, https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes. Web. 8 July 2022.
MDN contributors. “Using ARIA: Roles, states, and properties”. MDN Web Docs, 17 May 2022, https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques. Web. 8 July 2022.
In April 2021, there were 27 global attributes & 63 JavaScript event handlers; as of March 2023, there were 24 global attributes & 70 JavaScript event handlers
## Slide 297
WHATWG. “3.2.6 Global attributes”. HTML Living Standard, 8 July 2022, https://html.spec.whatwg.org/multipage/dom.html#classes. Web. 8 July 2022.
MDN contributors. “class”. MDN Web Docs, 17 May 2022, https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class. Web. 8 July 2022.
## Slide 298
WHATWG. “3.2.6.1 The title attribute”. HTML Living Standard, 8 July 2022, https://html.spec.whatwg.org/multipage/dom.html#the-title-attribute. Web. 8 July 2022.
MDN contributors. “title”. MDN Web Docs, 27 Apr 2022, https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title. Web. 8 July 2022.
## Slide 299
WebSanity. “HTML global attribute: title”. CodePen, 8 Apr. 2025, https://codepen.io/websanity/pen/dypzrw?editors=1000. Web. 8 Apr. 2025.
## Slide 300
WHATWG. “3.2.6.1 The title attribute”. HTML Living Standard, 8 July 2022, https://html.spec.whatwg.org/multipage/dom.html#the-title-attribute. Web. 8 July 2022.
MDN contributors. “title”. MDN Web Docs, 27 Apr 2022, https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title. Web. 8 July 2022.
## Slide 301
WHATWG. “3.2.6.1 The title attribute”. HTML Living Standard, 8 July 2022, https://html.spec.whatwg.org/multipage/dom.html#the-title-attribute. Web. 8 July 2022.
MDN contributors. “title”. MDN Web Docs, 27 Apr 2022, https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/title. Web. 8 July 2022.
## Slide 305
WHATWG. “4.4.5 The ol element”. HTML Living Standard, 8 July 2022, https://html.spec.whatwg.org/multipage/grouping-content.html#the-ol-element. Web. 8 July 2022.
## Slide 306
WHATWG. “4.10.5 The input element”. HTML Living Standard, 8 July 2022, https://html.spec.whatwg.org/multipage/input.html#the-input-element. Web. 8 July 2022.
## Slide 309
WHATWG. “3.2.6.6 Embedding custom non-visible data with the data-* attributes”. HTML Living Standard, 8 July 2022, https://html.spec.whatwg.org/multipage/dom.html#attr-data-*. Web. 8 July 2022.
MDN contributors. “data-*”. MDN Web Docs, 2 Oct 2021, https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-*. Web. 8 July 2022.
## Slide 311
A string is a “sequence of alphanumeric text or other symbols”
Attribute values are always strings: https://html.spec.whatwg.org/#attributes
## Slide 313
WHATWG. “4.4.5 The ol element”. HTML Living Standard, 8 July 2022, https://html.spec.whatwg.org/multipage/grouping-content.html#the-ol-element. Web. 8 July 2022.
## Slide 315
WHATWG. “4.4.5 The ol element”. HTML Living Standard, 8 July 2022, https://html.spec.whatwg.org/multipage/grouping-content.html#the-ol-element. Web. 8 July 2022.
## Slide 317
WHATWG. “4.4.5 The ol element”. HTML Living Standard, 8 July 2022, https://html.spec.whatwg.org/multipage/grouping-content.html#the-ol-element. Web. 8 July 2022.
WHATWG. “2.3.2 Boolean attributes”. HTML Living Standard, 8 July 2022, https://html.spec.whatwg.org/#boolean-attribute. Web. 8 July 2022.
MDN contributors. “HTML attribute reference”. MDN Web Docs, 27 Apr 2022, https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes#boolean_attributes. Web. 8 July 2022.
## Slide 318
WebSanity. “HTML: Boolean attributes”. CodePen, 22 June 2020, https://codepen.io/websanity/pen/gOPggVr?editors=1000. Web. 8 July 2022.
## Slide 319
$ curl -s "https://html.spec.whatwg.org" | grep -C 3 "boolean\s*attribute"
## Slide 322
“There must never be two or more attributes on the same start tag whose names are an ASCII case-insensitive match for each other.”
Source: WHATWG. “13.1.2.3 Attributes”. HTML Living Standard, 8 July 2022, https://html.spec.whatwg.org/multipage/syntax.html#attributes-2. Web. 8 July 2022.
“duplicate-attribute: This error occurs if the parser encounters an attribute in a tag that already has an attribute with the same name. The parser ignores all such duplicate occurrences of the attribute.”
Source: WHATWG. “13.2.2 Parse errors”. HTML Living Standard, 8 July 2022, https://html.spec.whatwg.org/multipage/parsing.html#parse-errors. Web. 8 July 2022.
## Slide 326
MDN contributors. “Semantics”. MDN Web Docs, 7 Oct 2021, https://developer.mozilla.org/en-US/docs/Glossary/Semantics. Web. 8 July 2022.
WHATWG. “3.2.1 Semantics”. HTML Living Standard, 29 Mar. 2022, https://html.spec.whatwg.org/#semantics-2. Web. 8 July 2022.
## Slide 327
MDN contributors. “Semantics”. MDN Web Docs, 7 Oct 2021, https://developer.mozilla.org/en-US/docs/Glossary/Semantics. Web. 8 July 2022.
WHATWG. “3.2.1 Semantics”. HTML Living Standard, 29 Mar. 2022, https://html.spec.whatwg.org/#semantics-2. Web. 8 July 2022.
## Slide 337
FIXME
## Slide 338
FIXME
## Slide 341
The appearance to a viewer would be the same, but the non-semantic code on the right has a different structure (only 1 object in the document tree, not 2 as on the left) AND a different meaning (it’s not 2 paragraphs, it’s 1)
## Slide 342
The appearance to a viewer would be the same, but the non-semantic code on the right has a different structure (only 1 object in the document tree, not 2 as on the left) AND a different meaning (it’s not 2 paragraphs, it’s 1)
## Slide 348
MDN contributors. “Semantics”. MDN Web Docs, 7 Oct 2021, https://developer.mozilla.org/en-US/docs/Glossary/Semantics. Web. 8 July 2022.
WHATWG. “3.2.1 Semantics”. HTML Living Standard, 29 Mar. 2022, https://html.spec.whatwg.org/#semantics-2. Web. 8 July 2022.
## Slide 349
“HTML/New HTML5 Elements”. W3C Wiki, 18 Nov. 2011, https://www.w3.org/wiki/HTML/New_HTML5_Elements. Web. 4 Apr 2022.
:
Hickson, Ian et al. “4.4.15 The search element”. WHATWG. HTML Living Standard, 24 Oct 2023, https://html.spec.whatwg.org/multipage/grouping-content.html#the-search-element. Web. 25 Oct 2023.
MDN contributors. “: The generic search element”. MDN Web Docs, 13 Sep 2023, https://developer.mozilla.org/en-US/docs/Web/HTML/Element/search. Web. 25 Oct 2023.
## Slide 350
“In Finland planners are known to visit their parks immediately after the first snowfall, when the existing paths are not visible. People naturally choose desire lines, which are then clearly indicated by their footprints and can be used to guide the routing of paths.”
Source: “3.3 Public Space: The Lost River Park”, found in Earls Court Project Application 1, Royal Borough of Kensington & Chelsea Cultural Strategy, June 2011, pg. 95. https://www.rbkc.gov.uk/idoxWAM/doc/Other-777167.pdf?extension=.pdf&id=777167&location=VOLUME2&contentType=application/pdf&pageCount=1.
Joly, Gordon. “Two Desire Paths, Battersea Park.” Flickr, 23 Sept. 2006, https://www.flickr.com/photos/loopzilla/251134757/in/pool-desire_paths/. Web. 14 Sept. 2016.
Licensed CC BY-SA 2.0: https://creativecommons.org/licenses/by-sa/2.0/.
## Slide 351
“In Finland planners are known to visit their parks immediately after the first snowfall, when the existing paths are not visible. People naturally choose desire lines, which are then clearly indicated by their footprints and can be used to guide the routing of paths.”
Source: “3.3 Public Space: The Lost River Park”, found in Earls Court Project Application 1, Royal Borough of Kensington & Chelsea Cultural Strategy, June 2011, pg. 95. https://www.rbkc.gov.uk/idoxWAM/doc/Other-777167.pdf?extension=.pdf&id=777167&location=VOLUME2&contentType=application/pdf&pageCount=1.
Joly, Gordon. “Two Desire Paths, Battersea Park.” Flickr, 23 Sept. 2006, https://www.flickr.com/photos/loopzilla/251134757/in/pool-desire_paths/. Web. 14 Sept. 2016.
Licensed CC BY-SA 2.0: https://creativecommons.org/licenses/by-sa/2.0/.
## Slide 352
“In Finland planners are known to visit their parks immediately after the first snowfall, when the existing paths are not visible. People naturally choose desire lines, which are then clearly indicated by their footprints and can be used to guide the routing of paths.”
Source: “3.3 Public Space: The Lost River Park”, found in Earls Court Project Application 1, Royal Borough of Kensington & Chelsea Cultural Strategy, June 2011, pg. 95. https://www.rbkc.gov.uk/idoxWAM/doc/Other-777167.pdf?extension=.pdf&id=777167&location=VOLUME2&contentType=application/pdf&pageCount=1.
Joly, Gordon. “Two Desire Paths, Battersea Park.” Flickr, 23 Sept. 2006, https://www.flickr.com/photos/loopzilla/251134757/in/pool-desire_paths/. Web. 14 Sept. 2016.
Licensed CC BY-SA 2.0: https://creativecommons.org/licenses/by-sa/2.0/.
## Slide 353
Granneman, R. Scott. “20070630_badlands_like_grand_canyon”. 30 June 2007. Author’s personal collection.
## Slide 354
Granneman, Scott. “Gus walking on a path in the Badlands”. 30 June 2007. Author’s personal collection.
Licensed CC BY-SA 4.0: https://creativecommons.org/licenses/by-sa/4.0/.
## Slide 355
Granneman, Scott. “Gus walking on a path in the Badlands”. 30 June 2007. Author’s personal collection.
Licensed CC BY-SA 4.0: https://creativecommons.org/licenses/by-sa/4.0/.
## Slide 356
“Wildstone Media”. Internet Archive. Wildstone Media, 10 Aug. 2014, https://web.archive.org/web/20150629005858/https://wildstonemedia.com/. Web. 16 Apr. 2024.
## Slide 359
Looking through your code, the semantic elements on the right would be far easier to understand
Structurally & visually, the semantic elements on the right are exactly like those on the left, but they have meaning that those on the left do not
## Slide 362
FIXME: should have
inside it
## Slide 363
WHATWG. “4.3.10 The address element”. HTML Living Standard, 3 Feb. 2022, http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-address-element. Web. 9 Feb 2022.
MDN contributors. “
: The Contact Address element”. MDN, 21 Jan. 2022, https://developer.mozilla.org/en-US/docs/Web/HTML/Element/address. Web. 9 Feb 2022.
## Slide 364
Boston Consulting Group. “Careers Blog”. Boston Consulting Group, 16 Feb 2023, https://careers.bcg.com/blog. Web. 19 Feb 2023.
## Slide 366
WebSanity. “HTML: address element”. CodePen, 24 July 2020, https://codepen.io/websanity/pen/jOWJZaj?editors=1000. Web. 24 July 2020.
Lovecraft, H. P. “At the Mountains of Madness”. The H. P. Lovecraft Archive, 20 Aug. 2009, https://www.hplovecraft.com/writings/texts/fiction/mm.aspx. Web. 1 May 2014.
## Slide 367
WebSanity. “HTML: address element”. CodePen, 24 July 2020, https://codepen.io/websanity/pen/jOWJZaj?editors=1000. Web. 24 July 2020.
Lovecraft, H. P. “At the Mountains of Madness”. The H. P. Lovecraft Archive, 20 Aug. 2009, https://www.hplovecraft.com/writings/texts/fiction/mm.aspx. Web. 1 May 2014.
## Slide 368
WebSanity. “HTML: address element”. CodePen, 24 July 2020, https://codepen.io/websanity/pen/jOWJZaj?editors=1000. Web. 24 July 2020.
Lovecraft, H. P. “At the Mountains of Madness”. The H. P. Lovecraft Archive, 20 Aug. 2009, https://www.hplovecraft.com/writings/texts/fiction/mm.aspx. Web. 1 May 2014.
## Slide 369
WebSanity. “HTML: address element”. CodePen, 24 July 2020, https://codepen.io/websanity/pen/jOWJZaj?editors=1000. Web. 24 July 2020.
Lovecraft, H. P. “At the Mountains of Madness”. The H. P. Lovecraft Archive, 20 Aug. 2009, https://www.hplovecraft.com/writings/texts/fiction/mm.aspx. Web. 1 May 2014.
## Slide 370
Emily’s Rule
## Slide 371
WebSanity. “HTML: address element may contain additional text”. CodePen, 1 May 2014, http://codepen.io/websanity/pen/djmCE. Web. 1 May 2014.
Lovecraft, H. P. “The Case of Charles Dexter Ward”. The H. P. Lovecraft Archive, 20 Aug. 2009, https://www.hplovecraft.com/writings/texts/fiction/cdw.aspx. Web. 1 May 2014.
## Slide 375
WHATWG. “4.5.2 The em element”. HTML Living Standard, 3 Feb. 2022, http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-em-element. Web. 9 Feb 2022.
MDN contributors. “: The Emphasis element”. MDN Web Docs, 2 Oct. 2021, https://developer.mozilla.org/en-US/docs/Web/HTML/Element/em. Web. 13 Feb 2022.
## Slide 376
WebSanity. “HTML: em element”. CodePen, 11 Sept. 2014, https://codepen.io/websanity/pen/GRqwWy?editors=1000. Web. 11 Sept. 2014.
## Slide 377
WHATWG. “4.5.20 The i element”. HTML Living Standard, 3 Feb. 2022, http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-i-element. Web. 9 Feb 2022.
MDN contributors. “: The Idiomatic Text element”. MDN Web Docs, 2 Oct. 2021, https://developer.mozilla.org/en-US/docs/Web/HTML/Element/i. Web. 13 Feb 2022.
## Slide 378
WebSanity. “HTML: i element”. CodePen, 30 Nov 2022, https://codepen.io/websanity/pen/oNLQzY?editors=1000. Web. 30 Nov 2022.
## Slide 379
WHATWG. “4.5.3 The strong element”. HTML Living Standard, 3 Feb. 2022, http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-strong-element. Web. 9 Feb 2022.
MDN contributors. “: The Strong Importance element”. MDN Web Docs, 2 Oct. 2021, https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong. Web. 13 Feb 2022.
## Slide 380
WebSanity. “HTML: strong element”. CodePen, 27 Apr 2014, https://codepen.io/websanity/pen/VwjVpb?editors=1000. Web. 27 Apr 2014.
## Slide 381
WHATWG. “4.5.21 The b element”. HTML Living Standard, 3 Feb. 2022, http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-b-element. Web. 9 Feb 2022.
MDN contributors. “: The Bring Attention To element”. MDN Web Docs, 2 Oct. 2021, https://developer.mozilla.org/en-US/docs/Web/HTML/Element/b. Web. 13 Feb 2022.
## Slide 382
WHATWG. “4.5.21 The b element”. HTML Living Standard, 3 Feb. 2022, http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-b-element. Web. 9 Feb 2022.
MDN contributors. “: The Bring Attention To element”. MDN Web Docs, 2 Oct. 2021, https://developer.mozilla.org/en-US/docs/Web/HTML/Element/b. Web. 13 Feb 2022.
## Slide 383
WebSanity. “HTML: b element”. CodePen, 27 Apr. 2014, https://codepen.io/websanity/pen/KKMrNE?editors=1000. Web. 27 Apr. 2014.
Why is that text bold? Because it’s more important? Because it should be strongly emphasized? Or because it looks nice bold?
Lovecraft, H. P. “At the Mountains of Madness”. The H. P. Lovecraft Archive, 20 Aug. 2009, https://www.hplovecraft.com/writings/texts/fiction/mm.aspx. Web. 1 May 2014.
Wikipedia contributors. “Heartbleed”. Wikipedia, The Free Encyclopedia, 8 Feb. 2022, https://en.wikipedia.org/w/index.php?title=Heartbleed&oldid=1070692249. Web. 9 Feb. 2022.
## Slide 385
WHATWG. “4.5.5 The s element”. MDN Web Docs, 11 Feb. 2022, http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-s-element. Web. 13 Feb 2022.
MDN contributors. “: The Strikethrough element”. MDN Web Docs, 12 Oct. 2021, https://developer.mozilla.org/en-US/docs/Web/HTML/Element/s. Web. 13 Feb 2022.
## Slide 386
WebSanity. “HTML: s element”. CodePen, 13 July 2020, http://codepen.io/websanity/pen/xynaj. Web. 13 Feb 2022.
## Slide 387
WHATWG. “4.5.22 The u element”. HTML Living Standard, 3 Feb. 2022, http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-u-element. Web. 9 Feb 2022.
MDN contributors. “: The Unarticulated Annotation (Underline) element”. MDN Web Docs, 2 Oct. 2021, https://developer.mozilla.org/en-US/docs/Web/HTML/Element/u. Web. 13 Feb 2022.
## Slide 388
WebSanity. “HTML: u element”. CodePen, 2 May 2014, https://codepen.io/websanity/pen/YzGrqo?editors=1000. Web. 2 May 2014.
## Slide 389
Schröter, Fritz. 1945–46, https://1.bp.blogspot.com/-lDHkH919w48/TavRb0BbjaI/AAAAAAAAA9k/tVqkSuW8698/s1600/POW2.jpg. Messenger, Robert. “Typewriter Book Written in US POW Camp”. oz.Typewriter: The Wonderful World of Typewriters, 18 Apr. 2011, https://oztypewriter.blogspot.com/2011/04/typewriter-book-written-in-us-pow-camp.html. Web. 11 Sept. 2014.
Fair use.
## Slide 391
“The Selectric Typewriter”. *IBM*. IBM 100: Icons of Progress, 16 Mar 2011, https://web.archive.org/web/20191002202520/https://www.ibm.com/ibm/history/ibm100/us/en/icons/selectric/. Web. 7 Nov 2023.
Fair use. Modified by converting to the WebP format.
## Slide 392
“The Selectric Typewriter”. *IBM*. IBM 100: Icons of Progress, 16 Mar 2011, https://web.archive.org/web/20191002202520/https://www.ibm.com/ibm/history/ibm100/us/en/icons/selectric/. Web. 7 Nov 2023.
“Learn”. Type Balls, 2019, https://typeballs.com/learn/. Web. 7 Nov 2023.
Fair use. Modified by converting to the WebP format.
## Slide 393
Gerhyrah’s Rule
## Slide 396
WHATWG. “4.5.4 The small element”. HTML Living Standard, 3 Feb. 2022, http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-small-element. Web. 9 Feb 2022.
MDN contributors. “: the side comment element”. MDN Web Docs, 2 Oct. 2021, https://developer.mozilla.org/en-US/docs/Web/HTML/Element/small. Web. 13 Feb 2022.
## Slide 397
WebSanity. “HTML: small element”. CodePen, 14 Nov. 2024, https://codepen.io/websanity/pen/yLaJJZ?editors=100. Web. 14 Nov. 2024.
## Slide 398
WebSanity. “HTML: small element”. CodePen, 14 Nov. 2024, https://codepen.io/websanity/pen/yLaJJZ?editors=100. Web. 14 Nov. 2024.
## Slide 399
WHATWG. “4.5.4 The small element”. HTML Living Standard, 3 Feb. 2022, http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-small-element. Web. 9 Feb 2022.
## Slide 400
WebSanity. “HTML: h2-h6 are not subheadings 2”. CodePen, 21 Oct. 2017, https://codepen.io/websanity/pen/eYzKqa?editors=1000. Web. 21 Oct. 2017.
## Slide 401
WebSanity. “HTML: h2-h6 are not subheadings 2”. CodePen, 21 Oct. 2017, https://codepen.io/websanity/pen/eYzKqa?editors=1000. Web. 21 Oct. 2017.
## Slide 402
WebSanity. “HTML: h2-h6 are not subheadings 2”. CodePen, 21 Oct. 2017, https://codepen.io/websanity/pen/eYzKqa?editors=1000. Web. 21 Oct. 2017.
## Slide 408
Wikipedia contributors. “Raster graphics”. Wikipedia, The Free Encyclopedia, 24 June 2022, https://en.wikipedia.org/wiki/Raster_graphics. Web. 8 Jul. 2022.
## Slide 409
Enfield, Susan. “How Many Photos Will be Taken in 2022?”. Mylio, 9 Mar 2022, https://news.mylio.com/how-many-photos-taken-in-2022/. Web. 21 Feb 2023.
## Slide 410
Tonchino. “File:Vector-based example.svg”. Wikipedia, 11 Jan. 2013, https://en.wikipedia.org/wiki/File:Vector-based_example.svg. Web. 4 Apr 2022.
Note that this is a PNG version of the SVG file.
## Slide 411
Tonchino. “File:Vector-based example.svg”. Wikipedia, 11 Jan. 2013, https://en.wikipedia.org/wiki/File:Vector-based_example.svg. Web. 4 Apr 2022.
Note that this is a PNG version of the SVG file.
## Slide 412
Tonchino. “File:Vector-based example.svg”. Wikipedia, 11 Jan. 2013, https://en.wikipedia.org/wiki/File:Vector-based_example.svg. Web. 4 Apr 2022.
Note that this is a PNG version of the SVG file.
## Slide 413
Tonchino. “File:Vector-based example.svg”. Wikipedia, 11 Jan. 2013, https://en.wikipedia.org/wiki/File:Vector-based_example.svg. Web. 4 Apr 2022.
Note that this is a PNG version of the SVG file.
## Slide 414
WebSanity. “Raster vs. Vector”. CodePen, 2 July 2022, https://codepen.io/websanity/pen/OJQdmdr?editors=1000. Web. 2 Jul 2022.
## Slide 415
WebSanity. “Raster vs. Vector”. CodePen, 2 July 2022, https://codepen.io/websanity/pen/OJQdmdr?editors=1000. Web. 2 Jul 2022.
## Slide 416
WebSanity. “Raster vs. Vector”. CodePen, 2 July 2022, https://codepen.io/websanity/pen/OJQdmdr?editors=1000. Web. 2 Jul 2022.
## Slide 418
Adobe Photoshop: https://www.adobe.com/products/photoshop.html
Microsoft Paint: https://apps.microsoft.com/store/detail/paint/9PCFS5B6T72H?hl=en-us&gl=US
“Paint.NET - Free Software for Digital Photo Editing”. Paint.NET, 19 Feb 2023, https://getpaint.net/. Web. 21 Feb 2023.
Mueller, Gus. “Acorn 7 | Full Featured Photo Editor for the Mac”. Flying Meat, 2023, https://flyingmeat.com/acorn/. Web. 21 Feb 2023.
“Pixelmator Pro”. Pixelmator, 21 Dec 2022, https://www.pixelmator.com/pro/. Web. 21 Feb 2023.
“Affinity Photo – award-winning photo editing software”. Serif, https://affinity.serif.com/en-us/photo/. Web. 2 Mar 2022.
## Slide 420
Wikipedia contributors. “Vector graphics”. Wikipedia, The Free Encyclopedia, 26 June 2022, https://en.wikipedia.org/wiki/Vector_graphics. Web. 8 July 2022.
## Slide 422
WebSanity. “HTML - SVG example”. CodePen, 7 June 2015, http://codepen.io/websanity/pen/xGdLxJ?editors=100. Web. 4 Apr 2022.
## Slide 423
WebSanity. “SVG Yin Yang”. CodePen, 15 Jan. 2021, https://codepen.io/websanity/pen/poEqPNN?editors=1000. Web. 4 Apr 2022.
## Slide 424
WebSanity. “HSL Color Wheel: Tones”. CodePen, 23 July 2020, https://codepen.io/websanity/pen/QWNMRq?editors=1000. Web. 19 Feb 2022.
## Slide 425
WebSanity. “HSL Color Wheel: Tones”. CodePen, 23 July 2020, https://codepen.io/websanity/pen/QWNMRq?editors=1000. Web. 19 Feb 2022.
## Slide 426
WebSanity. “Raster vs. Vector”. CodePen, 2 July 2022, https://codepen.io/websanity/pen/OJQdmdr?editors=1000. Web. 2 Jul 2022.
## Slide 427
WebSanity. “Raster vs. Vector”. CodePen, 2 July 2022, https://codepen.io/websanity/pen/OJQdmdr?editors=1000. Web. 2 Jul 2022.
## Slide 428
WebSanity. “Raster vs. Vector”. CodePen, 2 July 2022, https://codepen.io/websanity/pen/OJQdmdr?editors=1000. Web. 2 Jul 2022.
## Slide 429
Tonchino. “File:Vector-based example.svg”. Wikipedia, 11 Jan. 2013, https://en.wikipedia.org/wiki/File:Vector-based_example.svg. Web. 4 Apr 2022.
## Slide 430
Tonchino. “File:Vector-based example.svg”. Wikipedia, 11 Jan. 2013, https://en.wikipedia.org/wiki/File:Vector-based_example.svg. Web. 4 Apr 2022.
## Slide 431
Tonchino. “File:Vector-based example.svg”. Wikipedia, 11 Jan. 2013, https://en.wikipedia.org/wiki/File:Vector-based_example.svg. Web. 4 Apr 2022.
## Slide 432
Tonchino. “File:Vector-based example.svg”. Wikipedia, 11 Jan. 2013, https://en.wikipedia.org/wiki/File:Vector-based_example.svg. Web. 4 Apr 2022.
## Slide 434
FIXME: add screenshots
## Slide 435
“Industry-leading vector graphics software | Adobe Illustrator”. Adobe, 20 Feb 2023, https://www.adobe.com/products/illustrator.html. Web. 23 Feb 2023.
duarte.framos et al. “Draw Freely”. Inkscape, https://inkscape.org/. Web. 23 Feb 2023.
“Graphic Design, Illustration and Technical Software”. CorelDRAW, https://www.coreldraw.com/en/. Web. 23 Feb 2023.
“The Most Intuitive and Precise Illustration Software in the Galaxy”. Vectornator, https://www.vectornator.io/. Web. 23 Feb 2023.
“Affinity Designer: award-winning graphic design software”. Serif, https://affinity.serif.com/en-us/designer/. Web. 23 Feb 2023.
“Pixelmator Pro”. Pixelmator, 21 Dec 2022, https://www.pixelmator.com/pro/. Web. 21 Feb 2023.
Foksa, Jarosław. “Boxy SVG Editor”. Boxy SVG, https://boxy-svg.com/. Web. 23 Feb 2023.
## Slide 436
WHATWG. “4.8.3 The img element”. HTML Living Standard, 4 Apr. 2022, https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element. Web. 3 Apr 2022.
MDN contributors. “: The Image Embed element”. MDN Web Docs, 29 Mar. 2022, https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img. Web. 3 Apr 2022.
## Slide 438
If you are not using responsive design, & you do not specify a width & height (either using these attributes or in CSS), then your webpage will reflow the content as images load, which doesn’t look great & can be disconcerting for the user
WHATWG. “4.8.3 The img element”. HTML Living Standard, 4 Apr. 2022, https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element. Web. 3 Apr 2022.
MDN contributors. “: The Image Embed element”. MDN Web Docs, 29 Mar. 2022, https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img. Web. 3 Apr 2022.
## Slide 439
WHATWG. “4.8.4.4 Requirements for providing text to act as an alternative for images”. HTML Living Standard, 4 Apr. 2022, https://html.spec.whatwg.org/multipage/images.html#alt. Web. 4 Apr 2022.
WHATWG. “4.8.3 The img element”. HTML Living Standard, 4 Apr. 2022, https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element. Web. 3 Apr 2022.
MDN contributors. “: The Image Embed element”. MDN Web Docs, 29 Mar. 2022, https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img. Web. 3 Apr 2022.
## Slide 440
VJ Von Art. “white concrete building under blue sky during daytime”. Unsplash, 26 May 2021, https://unsplash.com/photos/BP1Ze0qcp-c. Web. 27 Feb 2022.
Licensed from Unsplash: https://unsplash.com/license.
## Slide 441
I had a student put that in their code!
VJ Von Art. “white concrete building under blue sky during daytime”. Unsplash, 26 May 2021, https://unsplash.com/photos/BP1Ze0qcp-c. Web. 27 Feb 2022.
Licensed from Unsplash: https://unsplash.com/license.
## Slide 442
VJ Von Art. “white concrete building under blue sky during daytime”. Unsplash, 26 May 2021, https://unsplash.com/photos/BP1Ze0qcp-c. Web. 27 Feb 2022.
Licensed from Unsplash: https://unsplash.com/license.
## Slide 445
“Meet Claude”. Anthropic, 2025, https://www.anthropic.com/claude. Web. 20 Feb 2025.
## Slide 470
WHATWG. “4.8.4.4 Requirements for providing text to act as an alternative for images”. HTML Living Standard, 4 Apr. 2022, https://html.spec.whatwg.org/multipage/images.html#alt. Web. 4 Apr 2022.
WHATWG. “4.8.3 The img element”. HTML Living Standard, 4 Apr. 2022, https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element. Web. 3 Apr 2022.
MDN contributors. “: The Image Embed element”. MDN Web Docs, 29 Mar. 2022, https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img. Web. 3 Apr 2022.
## Slide 471
WebSanity. “img element: Leave out value for alt”. CodePen, 27 Feb 2023, https://codepen.io/websanity/pen/LYJxYGW?editors=1100. Web. 27 Feb 2023.
## Slide 474
WebSanity. “HTML: img element”. CodePen, 30 Apr. 2014, https://codepen.io/websanity/pen/poEJqZ?editors=1000. Web. 4 Apr 2022.
Often, but not always, goes inside an element that can hold embedded content, e.g.,
## Slide 475
WHATWG. “4.8.3 The img element”. HTML Living Standard, 4 Apr. 2022, https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element. Web. 3 Apr 2022.
MDN contributors. “: The Image Embed element”. MDN Web Docs, 29 Mar. 2022, https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img. Web. 3 Apr 2022.
## Slide 477
WebSanity. “HTML: img with srcset attribute”. CodePen, 7 Dec. 2021, https://codepen.io/websanity/pen/gOGPNwa?editors=1000. Web. 7 Dec. 2021.
## Slide 480
srcset & sizes:
Deveria, Alexis [@Fyrd]. “Srcset and sizes attributes”. Can I use…, 4 Apr 2022, https://caniuse.com/srcset. Web. 4 Apr 2022.
GoogleChrome. “Feature: ”. Chrome Platform Status, 9 Nov. 2020, https://www.chromestatus.com/feature/4644337115725824. Web. 4 Apr 2022.
## Slide 484
Unsplash Team. “Beautiful Free Images & Pictures | Unsplash”. Unsplash, 29 June 2020, https://unsplash.com. Web. 29 June 2020.
## Slide 485
Potschien, Denis. “Unsplash.it: Use Placeholder Photos From Unsplash.com”. Jotform, 19 Aug 2020, https://www.jotform.com/blog/unsplash-it-use-placeholder-photos-from-unsplash-com-93599/. Web. 8 July 2022.
## Slide 486
Potschien, Denis. “Unsplash.it: Use Placeholder Photos From Unsplash.com”. Jotform, 19 Aug 2020, https://www.jotform.com/blog/unsplash-it-use-placeholder-photos-from-unsplash-com-93599/. Web. 8 July 2022.
## Slide 487
WebSanity. “HTML: Placeholder images with Unsplash”. CodePen, 5 July 2022, https://codepen.io/websanity/pen/ExEVEMo?editors=1000. Web. 5 Jul 2022.
## Slide 488
Heimlich, Russell. “Dynamic Dummy Image Generator”. Dynamic Dummy Image Generator, 19 Nov 2021, https://dummyimage.com. Web. 5 Jul 2022.
## Slide 489
Heimlich, Russell. “Dynamic Dummy Image Generator”. Dynamic Dummy Image Generator, 19 Nov 2021, https://dummyimage.com. Web. 5 Jul 2022.
## Slide 490
Wang, Phillip. This Person Does Not Exist, https://thispersondoesnotexist.com. Web. 17 Sept. 2020.
## Slide 491
Wang, Phillip. This Person Does Not Exist, https://thispersondoesnotexist.com. Web. 17 Sept. 2020.
## Slide 492
Wang, Phillip. This Person Does Not Exist, https://thispersondoesnotexist.com. Web. 17 Sept. 2020.
## Slide 493
Wang, Phillip. This Person Does Not Exist, https://thispersondoesnotexist.com. Web. 17 Sept. 2020.
## Slide 494
Wang, Phillip. This Person Does Not Exist, https://thispersondoesnotexist.com. Web. 17 Sept. 2020.
## Slide 495
Wang, Phillip. This Person Does Not Exist, https://thispersondoesnotexist.com. Web. 17 Sept. 2020.
## Slide 497
Wang, Phillip. This Person Does Not Exist, https://thispersondoesnotexist.com. Web. 17 Sept. 2020.
## Slide 498
Wang, Phillip. This Person Does Not Exist, https://thispersondoesnotexist.com. Web. 17 Sept. 2020.
## Slide 500
60%: LePage, Pete. “Images”. Google Developers, 27 October 2020, https://web.archive.org/web/20211202102738/https://developers.google.com/web/fundamentals/design-and-ux/responsive/images. Web. 3 December 2021.
## Slide 503
Wikipedia contributors. “GIF”. Wikipedia, The Free Encyclopedia, 6 December 2021, https://en.wikipedia.org/w/index.php?title=GIF&oldid=1058928240. Web. 7 December 2021.
“Baby Run Omg GIF”. Tenor, 6 May 2017, https://tenor.com/view/baby-run-omg-oops-gif-8508999. Web. 10 Nov. 2021.
## Slide 504
Wikipedia contributors. “JPEG”. Wikipedia, The Free Encyclopedia, 28 November 2021, https://en.wikipedia.org/w/index.php?title=JPEG&oldid=1057572559. Web. 7 December 2021.
## Slide 505
Wikipedia contributors. “Portable Network Graphics”. Wikipedia, The Free Encyclopedia, 1 December 2021, https://en.wikipedia.org/w/index.php?title=Portable_Network_Graphics&oldid=1058174006. Web. 7 December 2021.
## Slide 506
Wikipedia contributors. “Scalable Vector Graphics”. Wikipedia, The Free Encyclopedia, https://en.wikipedia.org/w/index.php?title=Scalable_Vector_Graphics&oldid=1058807617, 5 December 2021. Web. 7 December 2021.
## Slide 507
MDN contributors. “Image file type and format guide”. MDN Web Docs, 17 Mar. 2022, https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types. Web. 4 Apr 2022.
## Slide 509
FIXME: add pages listing apps that support each format
## Slide 510
Google. “An image format for the Web”. Google Developers, 16 August 2021, https://web.archive.org/web/20211203115942/https://developers.google.com/speed/webp. Web. 5 December 2021.
Wikipedia contributors. “WebP.” Wikipedia, The Free Encyclopedia, 19 November 2021, https://en.wikipedia.org/w/index.php?title=WebP&oldid=1056059303. Web. 3 December 2021.
Deveria, Alexis. “WebP image format”. Can I use..., 26 Mar 2021, https://caniuse.com/webp. Web. 27 Mar 2023.
## Slide 511
Google. “An image format for the Web”. Google Developers, 16 August 2021, https://web.archive.org/web/20211203115942/https://developers.google.com/speed/webp. Web. 5 December 2021.
Wikipedia contributors. “WebP.” Wikipedia, The Free Encyclopedia, 19 November 2021, https://en.wikipedia.org/w/index.php?title=WebP&oldid=1056059303. Web. 3 December 2021.
## Slide 512
Ella Fitzgerald and Louis Armstrong’s Ella and Louis (1956).
See: Wikipedia contributors. “Ella and Louis”. Wikipedia, The Free Encyclopedia, https://en.wikipedia.org/w/index.php?title=Ella_and_Louis&oldid=1061221899, 20 Dec. 2021. Web. 4 Apr. 2022.
Radiohead’s OK Computer (1997).
See: Wikipedia contributors. “OK Computer”. Wikipedia, The Free Encyclopedia, https://en.wikipedia.org/w/index.php?title=OK_Computer&oldid=1080957748, 4 Apr. 2022. Web. 4 Apr. 2022.
Frank Sinatra’s Come Fly With Me (1958).
See: Wikipedia contributors. “Come Fly with Me (Frank Sinatra album)”. Wikipedia, The Free Encyclopedia, https://en.wikipedia.org/w/index.php?title=Come_Fly_with_Me_(Frank_Sinatra_album)&oldid=1050650635, 19 Oct. 2021. Web. 4 Apr. 2022.
## Slide 513
Ella Fitzgerald and Louis Armstrong’s Ella and Louis (1956).
See: Wikipedia contributors. “Ella and Louis”. Wikipedia, The Free Encyclopedia, 20 Dec. 2021, https://en.wikipedia.org/w/index.php?title=Ella_and_Louis&oldid=1061221899. Web. 4 Apr. 2022.
Radiohead’s OK Computer (1997).
See: Wikipedia contributors. “OK Computer”. Wikipedia, The Free Encyclopedia, 4 Apr. 2022, https://en.wikipedia.org/w/index.php?title=OK_Computer&oldid=1080957748. Web. 4 Apr. 2022.
Frank Sinatra’s Come Fly With Me (1958).
See: Wikipedia contributors. “Come Fly with Me (Frank Sinatra album)”. Wikipedia, The Free Encyclopedia, 19 Oct. 2021, https://en.wikipedia.org/w/index.php?title=Come_Fly_with_Me_(Frank_Sinatra_album)&oldid=1050650635. Web. 4 Apr. 2022.
## Slide 514
M. C. Escher’s Drawing Hands (1948).
See: Wikipedia contributors. “Drawing Hands”. Wikipedia, The Free Encyclopedia, 22 Feb. 2022, https://en.wikipedia.org/w/index.php?title=Drawing_Hands&oldid=1073475238. Web. 4 Apr. 2022.
Hokusai’s The Great Wave Off Kanagawa (1831).
See: Wikipedia contributors. “The Great Wave off Kanagawa”. Wikipedia, The Free Encyclopedia, 20 Mar. 2022, https://en.wikipedia.org/w/index.php?title=The_Great_Wave_off_Kanagawa&oldid=1078318929. Web. 4 Apr. 2022.
Georges Seurat’s A Sunday Afternoon on the Island of La Grande Jatte (1884).
See: Wikipedia contributors. “A Sunday Afternoon on the Island of La Grande Jatte”. Wikipedia, The Free Encyclopedia, 27 Feb. 2022, https://en.wikipedia.org/w/index.php?title=A_Sunday_Afternoon_on_the_Island_of_La_Grande_Jatte&oldid=1074227011. Web. 4 Apr. 2022.
## Slide 515
M. C. Escher’s Drawing Hands (1948).
See: Wikipedia contributors. “Drawing Hands”. Wikipedia, The Free Encyclopedia, 22 Feb. 2022, https://en.wikipedia.org/w/index.php?title=Drawing_Hands&oldid=1073475238. Web. 4 Apr. 2022.
Hokusai’s The Great Wave Off Kanagawa (1831).
See: Wikipedia contributors. “The Great Wave off Kanagawa”. Wikipedia, The Free Encyclopedia, 20 Mar. 2022, https://en.wikipedia.org/w/index.php?title=The_Great_Wave_off_Kanagawa&oldid=1078318929. Web. 4 Apr. 2022.
Georges Seurat’s A Sunday Afternoon on the Island of La Grande Jatte (1884).
See: Wikipedia contributors. “A Sunday Afternoon on the Island of La Grande Jatte”. Wikipedia, The Free Encyclopedia, 27 Feb. 2022, https://en.wikipedia.org/w/index.php?title=A_Sunday_Afternoon_on_the_Island_of_La_Grande_Jatte&oldid=1074227011. Web. 4 Apr. 2022.
## Slide 516
NASA, ESA, CSA, STScI, Webb ERO Production Team. “Tarantula Nebula (NIRCam Image)”. Webb Space Telescope, 6 Sep 2022, https://webbtelescope.org/contents/media/images/2022/041/01GA76MYFN0FMKNRHGCAGGYCVQ?news=true. Web. 6 Sep 2022.
Public domain.
## Slide 518
Issaoun, Sara et al. “Astronomers unveil strong magnetic fields spiraling at the edge of Milky Way’s central black hole”. European Southern Observatory, 27 Mar. 2024, https://www.eso.org/public/news/eso2406/. Web. 29 Mar. 2024.
Licensed CC BY 4.0: https://creativecommons.org/licenses/by/4.0/. Modified by converting to the WebP format.
## Slide 519
Issaoun, Sara et al. “Astronomers unveil strong magnetic fields spiraling at the edge of Milky Way’s central black hole”. European Southern Observatory, 27 Mar. 2024, https://www.eso.org/public/news/eso2406/. Web. 29 Mar. 2024.
Licensed CC BY 4.0: https://creativecommons.org/licenses/by/4.0/. Modified by converting to the WebP format.
## Slide 520
Wikipedia contributors. “WebP.” Wikipedia, The Free Encyclopedia, 19 November 2021, https://en.wikipedia.org/w/index.php?title=WebP&oldid=1056059303. Web. 3 December 2021.
Google. “WebP 2”. Google Git, 29 November 2021, https://chromium.googlesource.com/codecs/libwebp2/. Web. 5 December 2021.
## Slide 521
Google. “WebPShop”. Google Developers, 16 August 2021, https://developers.google.com/speed/webp/docs/webpshop. Web. 6 December 2021.
“Work with WebP files in Photoshop”. Adobe Support, 15 Nov 2022, https://helpx.adobe.com/photoshop/kb/support-webp-image-format.html. Web. 25 Jan 2023.
## Slide 522
WebM Project. “WebPShop”. GitHub, 26 November 2021, https://github.com/webmproject/WebPShop. Web. 6 December 2021.
## Slide 524
Wikipedia contributors. “AVIF”. Wikipedia, The Free Encyclopedia, 27 November 2021, https://en.wikipedia.org/w/index.php?title=AVIF&oldid=1057338374. Web. 7 December 2021.
Archibald, Jake. “AVIF has landed”. Jake Archibald, 8 September 2020, https://jakearchibald.com/2020/avif-has-landed/. Web. 6 December 2021.
## Slide 525
Wikipedia contributors. “AVIF”. Wikipedia, The Free Encyclopedia, 27 November 2021, https://en.wikipedia.org/w/index.php?title=AVIF&oldid=1057338374. Web. 7 December 2021.
## Slide 526
Wikipedia contributors. “JPEG XL”. Wikipedia, The Free Encyclopedia, 3 December 2021, https://en.wikipedia.org/w/index.php?title=JPEG_XL&oldid=1058484706. Web. 7 December 2021.
Joint Photographic Experts Group (JPEG) committee. “Overview of JPEG XL”. JPEG, https://jpeg.org/jpegxl/. Web. 9 Feb 2022.
## Slide 527
Deveria, Alexis [@Fyrd]. “JPEG XL image format”. Can I use…, 29 Nov 2022, https://caniuse.com/jpegxl. Web. 30 Nov 2022.
Wikipedia contributors. “JPEG XL”. Wikipedia, The Free Encyclopedia, 8 Mar. 2025, https://en.wikipedia.org/wiki/JPEG_XL. Web. 12 Mar. 2025.
Zahra, Areen. “What Google knows about you might give you goosebumps”. TechEngage, https://techengage.com/what-google-knows-about-me/. Web. 12 Mar. 2025.
Fair use. Modified by making background transparent.
## Slide 528
Wikipedia contributors. “JPEG XL”. Wikipedia, The Free Encyclopedia, 8 Mar. 2025, https://en.wikipedia.org/wiki/JPEG_XL. Web. 12 Mar. 2025.
## Slide 529
Deveria, Alexis [@Fyrd]. “JPEG XL image format”. Can I use…, 29 Nov 2022, https://caniuse.com/jpegxl. Web. 30 Nov 2022.
Wikipedia contributors. “JPEG XL”. Wikipedia, The Free Encyclopedia, 8 Mar. 2025, https://en.wikipedia.org/wiki/JPEG_XL. Web. 12 Mar. 2025.
## Slide 530
dah…@chromium.org. “Comment 84”, from “Issue 1178058: JPEG XL decoding support (image/jxl) in blink (tracking bug)”. Chromium Bugs, 30 Oct 2022, https://bugs.chromium.org/p/chromium/issues/detail?id=1178058#c84. Web. 30 Nov 2022.
Wikipedia contributors. “JPEG XL”. Wikipedia, The Free Encyclopedia, 8 Mar. 2025, https://en.wikipedia.org/wiki/JPEG_XL. Web. 12 Mar. 2025.
Sneyers, Jon. “The Case for JPEG XL”. Cloudinary, 2 Nov. 2022, https://cloudinary.com/blog/the-case-for-jpeg-xl. Web. 12 Mar. 2025.
There is an attempt to bring back JPEG XL support in Chromium; to follow along, track “Request: Re-open JPEG XL issue” at https://issues.chromium.org/issues/40270698
Firefox is willing to implement JPEG XL if the decoder is rewritten in Rust instead of C++. See “Firefox will consider a Rust implementation of JPEG-XL #1064” at https://github.com/mozilla/standards-positions/pull/1064 for details.
## Slide 531
Wikipedia contributors. “JPEG XL”. Wikipedia, The Free Encyclopedia, 3 December 2021, https://en.wikipedia.org/w/index.php?title=JPEG_XL&oldid=1058484706. Web. 7 December 2021.
Joint Photographic Experts Group (JPEG) committee. “Overview of JPEG XL”. JPEG, https://jpeg.org/jpegxl/. Web. 9 Feb 2022.
## Slide 532
Wikipedia contributors. “JPEG XL”. Wikipedia, The Free Encyclopedia, 3 December 2021, https://en.wikipedia.org/w/index.php?title=JPEG_XL&oldid=1058484706. Web. 7 December 2021.
Joint Photographic Experts Group (JPEG) committee. “Overview of JPEG XL”. JPEG, https://jpeg.org/jpegxl/. Web. 9 Feb 2022.
The JPEG XL Community. “JPEG XL”. JPEG XL, 2024, https://jpegxl.info/index.html. Web. 11 Sep 2024.
## Slide 533
The JPEG XL Community. “JPEG XL”. JPEG XL, 2024, https://jpegxl.info/index.html. Web. 11 Sep 2024.
## Slide 534
Wikipedia contributors. “JPEG XL”. Wikipedia, The Free Encyclopedia, 31 Jan. 2022, https://en.wikipedia.org/w/index.php?title=JPEG_XL&oldid=1069103728. Web. 9 Feb. 2022.
The JPEG XL Community. “Supported Software”. JPEG XL, 2024, https://jpegxl.info/resources/supported-software.html. Web. 12 Mar. 2025.
## Slide 535
Wikipedia contributors. “JPEG XL”. Wikipedia, The Free Encyclopedia, 31 Jan. 2022, https://en.wikipedia.org/w/index.php?title=JPEG_XL&oldid=1069103728. Web. 9 Feb. 2022.
The JPEG XL Community. “Supported Software”. JPEG XL, 2024, https://jpegxl.info/resources/supported-software.html. Web. 12 Mar. 2025.
## Slide 536
† lucia scarlet 🩸 [@luciascarlet]. “macOS Sonoma has proper system-wide support for JPEG XL including in [http://Photos.app](https://t.co/db5xgNGXla) and [http://Preview.app](https://t.co/DhEzZAUovt), not just in Safari”. Twitter, 6 June 2023, https://twitter.com/luciascarlet/status/1666053797049671680. Web. 11 Oct 2023.
Wikipedia contributors. “JPEG XL”. Wikipedia, The Free Encyclopedia, 8 Sep. 2024, https://en.wikipedia.org/wiki/JPEG_XL. Web. 11 Sep. 2024.
## Slide 537
Yung-Luen Lan. “JXLook”. GitHub, 30 Nov. 2021, https://github.com/yllan/JXLook. Web. 12 Mar. 2025.
## Slide 538
Microsoft. “JPEG XL Image Extension”. Microsoft Store, 4 Dec. 2023, https://apps.microsoft.com/detail/9mzprth5c0tb?hl=en-US&gl=US. Web. 12 Mar 2025.
## Slide 539
Microsoft. “JPEG XL Image Extension”. Microsoft Store, 4 Dec. 2023, https://apps.microsoft.com/detail/9mzprth5c0tb?hl=en-US&gl=US. Web. 12 Mar 2025.
## Slide 541
zamfofex. “JPEG XL Viewer”. Chrome Web Store, 3 Jan. 2024, https://chromewebstore.google.com/detail/jpeg-xl-viewer/bkhdlfmkaenamnlbpdfplekldlnghchp. Web. 12 Mar 2025.
## Slide 542
zamfofex. “JPEG XL Viewer”. Chrome Web Store, 3 Jan. 2024, https://chromewebstore.google.com/detail/jpeg-xl-viewer/bkhdlfmkaenamnlbpdfplekldlnghchp. Web. 12 Mar 2025.
## Slide 543
zamfofex. “JPEG XL viewer – Get this Extension for 🦊 Firefox (en-US)”. Firefox Browser Add-Ons, 2 Jan. 2024, https://addons.mozilla.org/en-US/firefox/addon/jxl/. Web. 12 Mar 2025.
## Slide 545
Singh, Navjot. “Does your browser support the new image format JPEG XL?”. NSpeaks, 10 May 2021, https://nspeaks.com/jpeg-xl-browser-support/. Web. 12 Mar 2025.
## Slide 546
The JPEG XL Community. “JPEG XL Test Page”. JPEG XL, https://jpegxl.info/resources/jpeg-xl-test-page.html. Web. 12 Mar 2025.
## Slide 547
The JPEG XL Community. “JPEG XL Test Page”. JPEG XL, https://jpegxl.info/resources/jpeg-xl-test-page.html. Web. 12 Mar 2025.
## Slide 548
The JPEG XL Community. “JPEG XL Test Page”. JPEG XL, https://jpegxl.info/resources/jpeg-xl-test-page.html. Web. 12 Mar 2025.
## Slide 549
The JPEG XL Community. “JPEG XL Test Page”. JPEG XL, https://jpegxl.info/resources/jpeg-xl-test-page.html. Web. 12 Mar 2025.
## Slide 550
The JPEG XL Community. “JPEG XL Test Page”. JPEG XL, https://jpegxl.info/resources/jpeg-xl-test-page.html. Web. 12 Mar 2025.
## Slide 551
WebP: Deveria, Alexis [@Fyrd]. “WebP image format”. Can I use…, 24 Sep 2023, https://caniuse.com/webp. Web. 26 Sep 2023.
AVIF
Deveria, Alexis [@Fyrd]. “AVIF image format”. Can I use…, 8 Feb. 2025, https://caniuse.com/avif. Web. 11 Feb. 2025.
“Chrome 85: Upload Streaming, Human Interface Devices, Custom Properties with Inheritance and More”. Chromium Blog, 23 July 2020, https://blog.chromium.org/2020/07/chrome-85-upload-streaming-human.html. Web. 2 December 2021.
JPEG XL
Deveria, Alexis [@Fyrd]. “JPEG XL image format”. Can I use…, 24 Sep 2023, https://caniuse.com/jpegxl. Web. 26 Sep 2023.
dah…@chromium.org. “Comment 84”, from “Issue 1178058: JPEG XL decoding support (image/jxl) in blink (tracking bug)”. Chromium Bugs, 30 Oct 2022, https://bugs.chromium.org/p/chromium/issues/detail?id=1178058#c84. Web. 30 Nov 2022.
## Slide 553
GoogleChromeLabs. “Squoosh”. Squoosh, https://squoosh.app. Web. 6 Dec. 2021.
GoogleChromeLabs. “squoosh”. GitHub, 20 October 2021, https://github.com/GoogleChromeLabs/squoosh. Web. 6 December 2021.
## Slide 554
GoogleChromeLabs. “Squoosh”. Squoosh, https://squoosh.app/editor. Web. 6 Dec. 2021.
## Slide 555
GoogleChromeLabs. “Squoosh”. Squoosh, https://squoosh.app/editor. Web. 6 Dec. 2021.
## Slide 556
GoogleChromeLabs. “Squoosh”. Squoosh, https://squoosh.app/editor. Web. 6 Dec. 2021.
## Slide 557
GoogleChromeLabs. “Squoosh”. Squoosh, https://squoosh.app/editor. Web. 6 Dec. 2021.
## Slide 561
JacobDev1. “XL Converter”. Code Poems, 2024, https://codepoems.eu/xl-converter/. Web. 06 Apr 2024.
## Slide 562
JacobDev1. “XL Converter”. Code Poems, 2024, https://codepoems.eu/xl-converter/. Web. 06 Apr 2024.
## Slide 563
JacobDev1. “XL Converter”. Code Poems, 2024, https://codepoems.eu/xl-converter/. Web. 06 Apr 2024.
## Slide 581
Monroe, Charlie. “Permute - Media Converter for macOS”. Charlie Monroe Software, 18 Nov. 2022, https://software.charliemonroe.net/permute/. Web. 05 Dec. 2022.
## Slide 587
Permute 3.13.2, 3 June 2025
## Slide 588
Permute 3.13.2, 3 June 2025
## Slide 589
Permute 3.13.2, 3 June 2025
## Slide 590
Permute 3.13.2, 3 June 2025
## Slide 591
Permute 3.13.2, 3 June 2025
## Slide 592
Permute 3, 5 Dec. 2022
## Slide 593
Permute 3, 5 Dec. 2022
## Slide 594
Permute 3, 5 Dec. 2022
## Slide 595
Permute 3.13.2, 3 June 2025
## Slide 603
Realmac Software Limited. “Powerful Batch Photo Editor for Mac - Squash”. Realmac, 21 Nov 2022, https://www.realmacsoftware.com/squash/. Web. 05 Dec 2022.
## Slide 609
NVS ltd. “Bulk Convert Images to WebP (Free & Online)”. To WebP, https://towebp.io/. Web. 23 Mar 2024.
## Slide 610
NVS ltd. “Bulk Convert Images to WebP (Free & Online)”. To WebP, https://towebp.io/. Web. 23 Mar 2024.
## Slide 611
NVS ltd. “Bulk Convert Images to WebP (Free & Online)”. To WebP, https://towebp.io/. Web. 23 Mar 2024.
## Slide 614
“Use Safari web apps on Mac”. Apple. Apple Support, 13 Dec. 2023, https://support.apple.com/en-us/104996. Web. 24 Mar. 2024.
## Slide 615
NVS ltd. “Bulk Convert Images to WebP (Free & Online)”. To WebP, https://towebp.io/. Web. 23 Mar 2024.
## Slide 616
NVS ltd. “Bulk Convert Images to WebP (Free & Online)”. To WebP, https://towebp.io/. Web. 23 Mar 2024.
## Slide 619
NVS ltd. “Bulk Convert Images to WebP (Free & Online)”. To WebP, https://towebp.io/. Web. 23 Mar 2024.
## Slide 620
MDN contributors. “