”. 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. “: 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 897 WHATWG. “4.3.8 The header element”. HTML Living Standard, 8 July 2022, https://html.spec.whatwg.org/multipage/sections.html#the-header-element. Web. 8 July 2022. MDN contributors. “
”. MDN Web Docs, 17 May 2022, https://developer.mozilla.org/en-US/docs/Web/HTML/Element/header. Web. 8 July 2022. ## Slide 898 WHATWG. “4.3.8 The header element”. HTML Living Standard, 8 July 2022, https://html.spec.whatwg.org/multipage/sections.html#the-header-element. Web. 8 July 2022. ## Slide 899 WHATWG. “4.3.8 The header element”. HTML Living Standard, 8 July 2022, https://html.spec.whatwg.org/multipage/sections.html#the-header-element. Web. 8 July 2022. ## Slide 900 WebSanity. “HTML: header element”. CodePen, 17 Jan. 2024, https://codepen.io/websanity/pen/PoGyzq?editors=1000. Web. 8 July 2022. ## Slide 902 WHATWG. “4.3.9 The footer element”. HTML Living Standard, 8 July 2022, https://html.spec.whatwg.org/multipage/sections.html#the-footer-element. Web. 8 July 2022. MDN contributors. “
”. MDN Web Docs, 17 May 2022, https://developer.mozilla.org/en-US/docs/Web/HTML/Element/footer. Web. 8 July 2022. ## Slide 903 http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-footer-element ## Slide 904 WebSanity. “HTML: footer element”. CodePen, 1 May 2014, https://codepen.io/websanity/pen/oNzzRJ?editors=1000. Web. 8 July 2022. ## Slide 905 http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-footer-element ## Slide 906 WebSanity. “HTML: footer element with sections”. CodePen, 1 May 2014, https://codepen.io/websanity/pen/wvzoGz?editors=1000. Web. 8 July 2022. ## Slide 907 Deveria, Alexis [@Fyrd]. “HTML element: nav”. Can I use…, 4 July 2022, https://caniuse.com/mdn-html_elements_nav. Web. 8 July 2022. Deveria, Alexis [@Fyrd]. “HTML element: article”. Can I use…, 4 July 2022, https://caniuse.com/mdn-html_elements_article. Web. 8 July 2022. Deveria, Alexis [@Fyrd]. “HTML element: aside”. Can I use…, 4 July 2022, https://caniuse.com/mdn-html_elements_aside. Web. 8 July 2022. Deveria, Alexis [@Fyrd]. “HTML element: section”. Can I use…, 4 July 2022, https://caniuse.com/mdn-html_elements_section. Web. 8 July 2022. Deveria, Alexis [@Fyrd]. “HTML element: header”. Can I use…, 4 July 2022, https://caniuse.com/mdn-html_elements_header. Web. 8 July 2022. Deveria, Alexis [@Fyrd]. “HTML element: footer”. Can I use…, 4 July 2022, https://caniuse.com/mdn-html_elements_footer. Web. 8 July 2022. ## Slide 910 WHATWG. “4.12.1 The script element”. HTML Living Standard, 6 July 2022, https://html.spec.whatwg.org/multipage/scripting.html#the-script-element. Web. 7 July 2022. MDN contributors. “