Notes for HTML - Overview - Condensed By Scott Granneman & Jans Carton Find the presentation at http://www.granneman.com/presentations/ ## Slide 2 https://granneman.com/downloads/web-dev/HTML-Overview-for-Short-Courses.txt ## Slide 4 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, 17 June 2022, https://en.wikipedia.org/wiki/Separation_of_concerns. Web. 8 July 2022. ## Slide 6 WHATWG. “4 The elements of HTML”. HTML Living Standard, 8 July 2022, https://html.spec.whatwg.org/#semantics. Web. 8 July 2022. MDN contributors. “HTML elements reference”. MDN Web Docs, 18 Feb. 2022, https://developer.mozilla.org/en-US/docs/Web/HTML/Element. Web. 3 Apr 2022. ## Slide 11 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 12 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 14 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 19 Granneman, Scott. Linux Phrasebook, Second Edition. Indianapolis, IN: Addison-Wesley (2016). iii, 478. ## Slide 21 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 22 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 23 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 “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 26 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 30 “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 33 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 34 WebSanity. “HTML: Simple Webpage, Corrected & No Deprecations”. CodePen, 20 Dec. 2021, https://codepen.io/websanity/pen/jOGwKxB?editors=1000. Web. 20 Dec. 2021. ## Slide 36 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 37 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 38 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 39 WebSanity. “HTML: p element”. CodePen, 1 May 2014, https://codepen.io/websanity/pen/zYBPmo?editors=1000. Web. 6 Feb 2022. ## Slide 41 WebSanity. “HTML: p element”. CodePen, 1 May 2014, https://codepen.io/websanity/pen/zYBPmo?editors=1000. Web. 6 Feb 2022. ## Slide 42 WebSanity. “HTML: p element”. CodePen, 1 May 2014, https://codepen.io/websanity/pen/zYBPmo?editors=1000. Web. 6 Feb 2022. ## Slide 43 WebSanity. “HTML: p element”. CodePen, 1 May 2014, https://codepen.io/websanity/pen/zYBPmo?editors=1000. Web. 6 Feb 2022. ## Slide 47 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 52 Christian’s Rule When you save your file in your editor with auto-formatting on, it will format like this, which you do not want ## Slide 53 Free-floating text might not go in a

 — e.g., you might use a

,

, or
  •  — but it has to go into something ## Slide 54 “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 55 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 58 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 59 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 60 “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 61 “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 62 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 63 Chris’s Rule ## Slide 64 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 65 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 67 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 68 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 69 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 70 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 71 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 72 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 73 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 74 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 75 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 76 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 77 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 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. ## Slide 79 WebSanity. “HTML: h1–h6 elements”. CodePen, 25 Apr. 2014, http://codepen.io/websanity/pen/ptgzc. Web. 25 Apr. 2014. ## Slide 80 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 82 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 83 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 84 Muller, Britney & the MOZ staff. “On-Page SEO”. MOZ, https://moz.com/beginners-guide-to-seo/on-page-seo. Web. 13 Feb 2022. ## Slide 85 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 86 Brealey, Richard A., Stewart C. Myers, & Franklin Allen. Principles of Corporate Finance, 10th Edition. New York: McGraw-Hill (2010). 9. ## Slide 93 WebSanity. “HTML: headings create implied sections”. CodePen, 3 Aug. 2020, https://codepen.io/websanity/pen/BwbYVp?editors=1000. Web. 3 Aug. 2020. ## Slide 94 WebSanity. “HTML: headings create implied sections”. CodePen, 3 Aug. 2020, https://codepen.io/websanity/pen/BwbYVp?editors=1000. Web. 3 Aug. 2020. ## Slide 96 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 97 WebSanity. “HTML: h1-h6 ordering”. CodePen, 25 Apr. 2014, http://codepen.io/websanity/pen/AoapB. Web. 25 Apr. 2014. ## Slide 100 Google gives extra weight to words inside headings; Google gives no extra weight to words inside paragraphs FIXME screenshot ## Slide 104 WebSanity. “HTML: 3 kinds of lists”. CodePen, 27 Nov. 2021, https://codepen.io/websanity/pen/bGobgBy?editors=1000. Web. 27 Nov. 2021. ## Slide 106 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 107 WebSanity. “HTML: ul, ol, & li elements”. CodePen, 26 Sept. 2019, https://codepen.io/websanity/pen/xxKeLeZ?editors=1000. Web. 26 Sept. 2019. ## Slide 109 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 110 WebSanity. “HTML: ul & li elements”. CodePen, 27 Apr. 2014, https://codepen.io/websanity/pen/MWeZdE?editors=1000. Web. 27 Apr. 2014. ## Slide 111 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 112 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 113 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 114 WebSanity. “HTML: ol element with reversed attribute”. CodePen, 5 Feb. 2022, https://codepen.io/websanity/pen/zYPoKav?editors=1000. Web. 5 Feb. 2022. ## Slide 115 WebSanity. “HTML: ol element with start attribute”. CodePen, 5 Feb. 2022, https://codepen.io/websanity/pen/zYPooYo?editors=1000. Web. 5 Feb. 2022. ## Slide 116 Deveria, Alexis [@Fyrd]. “Reversed attribute of ordered lists”. Can I use…, https://caniuse.com/ol-reversed. Web. 9 Feb 2022. ## Slide 118 WebSanity. “HTML: ol element, nested & simplified”. CodePen, 26 Dec. 2021, https://codepen.io/websanity/pen/yLzPRVm?editors=1000. Web. 26 Dec. 2021. ## Slide 120 For another example, see https://codepen.io/websanity/pen/Jheac?editors=1000 ## Slide 121 WebSanity. “HTML: ol element, nested & simplified”. CodePen, 26 Dec. 2021, https://codepen.io/websanity/pen/yLzPRVm?editors=1000. Web. 26 Dec. 2021. ## Slide 122 WebSanity. “HTML: ol element, nested & simplified”. CodePen, 26 Dec. 2021, https://codepen.io/websanity/pen/yLzPRVm?editors=1000. Web. 26 Dec. 2021. ## Slide 123 WebSanity. “HTML: ol element, nested & simplified”. CodePen, 26 Dec. 2021, https://codepen.io/websanity/pen/yLzPRVm?editors=1000. Web. 26 Dec. 2021. ## Slide 124 WebSanity. “HTML: ol element, nested & simplified”. CodePen, 26 Dec. 2021, https://codepen.io/websanity/pen/yLzPRVm?editors=1000. Web. 26 Dec. 2021. ## Slide 125 WebSanity. “HTML: ol element, nested & simplified”. CodePen, 26 Dec. 2021, https://codepen.io/websanity/pen/yLzPRVm?editors=1000. Web. 26 Dec. 2021. ## Slide 126 WebSanity. “HTML: ol element, nested & simplified”. CodePen, 26 Dec. 2021, https://codepen.io/websanity/pen/yLzPRVm?editors=1000. Web. 26 Dec. 2021. ## Slide 127 WebSanity. “HTML: ol element, nested & simplified”. CodePen, 26 Dec. 2021, https://codepen.io/websanity/pen/yLzPRVm?editors=1000. Web. 26 Dec. 2021. ## Slide 128 WebSanity. “HTML: ol element, nested & simplified”. CodePen, 26 Dec. 2021, https://codepen.io/websanity/pen/yLzPRVm?editors=1000. Web. 26 Dec. 2021. ## Slide 129 WebSanity. “HTML: ol element, nested & simplified”. CodePen, 26 Dec. 2021, https://codepen.io/websanity/pen/yLzPRVm?editors=1000. Web. 26 Dec. 2021. ## Slide 130 WebSanity. “HTML: ol element, nested & simplified”. CodePen, 26 Dec. 2021, https://codepen.io/websanity/pen/yLzPRVm?editors=1000. Web. 26 Dec. 2021. ## 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 132 WebSanity. “HTML: ol elements nested”. CodePen, 27 Apr. 2014, http://codepen.io/websanity/pen/DpGHo. Web. 27 Apr. 2014. ## Slide 133 WebSanity. “HTML: ul elements nested”. CodePen, 27 Apr. 2014, http://codepen.io/websanity/pen/GthmI. Web. 27 Apr. 2014. ## Slide 135 WebSanity. “HTML: ol & ul elements nested together”. CodePen, 27 Apr. 2014, http://codepen.io/websanity/pen/mIkfw. Web. 27 Apr. 2014. ## Slide 136 Eddie’s Rule ## Slide 139 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 140 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 141 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 142 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 143 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 144 WebSanity. “HTML: character entities”. CodePen, 4 Apr. 2021, http://codepen.io/websanity/pen/sypxK. Web. 4 Apr 2022. ## Slide 145 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 146 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 147 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 148 “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 149 ↑ 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 150 ↑ 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 151 ↑ 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 152 ↑ 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 153 ↑ 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 154 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 155 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 156 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 157 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 158 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 159 WebSanity. “HTML: nbsp character entity”. CodePen, 5 May 2014, https://codepen.io/websanity/pen/xxEzWB?editors=1000. Web. 8 July 2022. ## Slide 160 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 161 “Unicode Character Search”. FileFormat.Info, http://www.fileformat.info/info/unicode/char/search.htm. Web. 6 Aug. 2020. ## Slide 162 “Unicode Blocks”. FileFormat.Info, http://www.fileformat.info/info/unicode/block/index.htm. Web. 6 Aug. 2020. ## Slide 191 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 208 ⌥ = Option/Alt ⇧ = Shift ## Slide 211 CSS - Typography covers a few special kinds of spaces & punctuation marks where you really need to use character entities ## Slide 213 i2 = −1 defined imaginary numbers ## Slide 214 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 215 Minus sign is slightly thinner than en dash & has a sliver of space between itself & adjacent characters ## Slide 218 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 219 WebSanity. “HTML: hr element”. CodePen, 26 Apr. 2014, https://codepen.io/websanity/pen/abZjgW?editors=1000. Web. 26 Apr. 2014. ## Slide 221 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 222 WebSanity. “HTML: blockquote element”. CodePen, 3 Jan. 2022, https://codepen.io/websanity/pen/KKXZLXE?editors=1000. Web. 3 Jan. 2022. ## Slide 223 WebSanity. “HTML: blockquote element”. CodePen, 3 Jan. 2022, https://codepen.io/websanity/pen/KKXZLXE?editors=1000. Web. 3 Jan. 2022. ## Slide 224 There are 2 exceptions:
           (see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pre) &   (see Character References for more)
          
          ## Slide 225
          
          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 226 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 227 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 229 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 230 Group ## Slide 234 WHATWG. “3.2.6 Global attributes”. HTML Living Standard, 8 July 2022, https://html.spec.whatwg.org/#global-attributes. Web. 8 July 2022. 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. ## Slide 236 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 237 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 238 WebSanity. “HTML global attribute: title”. CodePen, 19 June 2020, https://codepen.io/websanity/pen/dypzrw?editors=1000. Web. 6 July 2022. ## Slide 239 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 240 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 244 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 245 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 247 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 249 A string is a “sequence of alphanumeric text or other symbols” Attribute values are always strings: https://html.spec.whatwg.org/#attributes ## Slide 251 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 253 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 255 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 256 WebSanity. “HTML: Boolean attributes”. CodePen, 22 June 2020, https://codepen.io/websanity/pen/gOPggVr?editors=1000. Web. 8 July 2022. ## Slide 257 $ curl -s "https://html.spec.whatwg.org" | grep -C 3 "boolean\s*attribute" ## Slide 260 “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 263 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 264 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 274 FIXME ## Slide 275 FIXME ## Slide 278 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 279 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 285 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 286 “HTML/New HTML5 Elements”. W3C Wiki, 18 Nov. 2011, https://www.w3.org/wiki/HTML/New_HTML5_Elements. Web. 4 Apr 2022. ## Slide 287 “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 288 “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 289 “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 290 Granneman, Scott. “Gus walking on a path in the Badlands”. 30 June 2007. Licensed CC BY-SA 4.0: https://creativecommons.org/licenses/by-sa/4.0/. ## Slide 291 Granneman, Scott. “Gus walking on a path in the Badlands”. 30 June 2007. Licensed CC BY-SA 4.0: https://creativecommons.org/licenses/by-sa/4.0/. ## Slide 293 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 296 FIXME:
          should have

          inside it ## Slide 297 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 298 Boston Consulting Group. “Careers Blog”. Boston Consulting Group, 16 Feb 2023, https://careers.bcg.com/blog. Web. 19 Feb 2023. ## Slide 300 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 301 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 302 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 304 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 308 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 309 WebSanity. “HTML: em element”. CodePen, 11 Sept. 2014, https://codepen.io/websanity/pen/GRqwWy?editors=1000. Web. 11 Sept. 2014. ## Slide 310 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 311 WebSanity. “HTML: i element”. CodePen, 30 Nov 2022, https://codepen.io/websanity/pen/oNLQzY?editors=1000. Web. 30 Nov 2022. ## Slide 312 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 313 WebSanity. “HTML: strong element”. CodePen, 27 Apr 2014, https://codepen.io/websanity/pen/VwjVpb?editors=1000. Web. 27 Apr 2014. ## Slide 314 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 315 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 316 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 318 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 319 WebSanity. “HTML: s element”. CodePen, 13 July 2020, http://codepen.io/websanity/pen/xynaj. Web. 13 Feb 2022. ## Slide 320 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 321 WebSanity. “HTML: u element”. CodePen, 2 May 2014, https://codepen.io/websanity/pen/YzGrqo?editors=1000. Web. 2 May 2014. ## Slide 322 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 323 Gerhyrah’s Rule ## Slide 326 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 327 WebSanity. “HTML: small element”. CodePen, 30 Apr. 2014, https://codepen.io/websanity/pen/yLaJJZ?editors=100. Web. 30 Apr. 2014. ## Slide 328 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.
          was designed to allow developers to group headings together, but it is problematic; see: MDN contributors. “
          ”. MDN Web Docs, 21 Jan. 2022, https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hgroup. Web. 13 Feb 2022. ## Slide 329 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 330 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 331 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 337 Wikipedia contributors. “Raster graphics”. Wikipedia, The Free Encyclopedia, 24 June 2022, https://en.wikipedia.org/wiki/Raster_graphics. Web. 8 Jul. 2022. ## Slide 338 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 339 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 340 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 341 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 342 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 343 WebSanity. “Raster vs. Vector”. CodePen, 2 July 2022, https://codepen.io/websanity/pen/OJQdmdr?editors=1000. Web. 2 Jul 2022. ## Slide 344 WebSanity. “Raster vs. Vector”. CodePen, 2 July 2022, https://codepen.io/websanity/pen/OJQdmdr?editors=1000. Web. 2 Jul 2022. ## Slide 345 WebSanity. “Raster vs. Vector”. CodePen, 2 July 2022, https://codepen.io/websanity/pen/OJQdmdr?editors=1000. Web. 2 Jul 2022. ## Slide 347 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 349 Wikipedia contributors. “Vector graphics”. Wikipedia, The Free Encyclopedia, 26 June 2022, https://en.wikipedia.org/wiki/Vector_graphics. Web. 8 July 2022. ## Slide 351 WebSanity. “HTML - SVG example”. CodePen, 7 June 2015, http://codepen.io/websanity/pen/xGdLxJ?editors=100. Web. 4 Apr 2022. ## Slide 352 WebSanity. “SVG Yin Yang”. CodePen, 15 Jan. 2021, https://codepen.io/websanity/pen/poEqPNN?editors=1000. Web. 4 Apr 2022. ## Slide 353 WebSanity. “HSL Color Wheel: Tones”. CodePen, 23 July 2020, https://codepen.io/websanity/pen/QWNMRq?editors=1000. Web. 19 Feb 2022. ## Slide 354 WebSanity. “HSL Color Wheel: Tones”. CodePen, 23 July 2020, https://codepen.io/websanity/pen/QWNMRq?editors=1000. Web. 19 Feb 2022. ## Slide 355 WebSanity. “Raster vs. Vector”. CodePen, 2 July 2022, https://codepen.io/websanity/pen/OJQdmdr?editors=1000. Web. 2 Jul 2022. ## Slide 356 WebSanity. “Raster vs. Vector”. CodePen, 2 July 2022, https://codepen.io/websanity/pen/OJQdmdr?editors=1000. Web. 2 Jul 2022. ## Slide 357 WebSanity. “Raster vs. Vector”. CodePen, 2 July 2022, https://codepen.io/websanity/pen/OJQdmdr?editors=1000. Web. 2 Jul 2022. ## Slide 358 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 359 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 360 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 361 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 364 “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 365 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 367 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 368 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 369 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 370 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 372 WebSanity. “HTML: img with srcset attribute”. CodePen, 7 Dec. 2021, https://codepen.io/websanity/pen/gOGPNwa?editors=1000. Web. 7 Dec. 2021. ## Slide 374 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 378 Unsplash Team. “Beautiful Free Images & Pictures | Unsplash”. Unsplash, 29 June 2020, https://unsplash.com. Web. 29 June 2020. ## Slide 379 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 380 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 381 WebSanity. “HTML: Placeholder images with Unsplash”. CodePen, 5 July 2022, https://codepen.io/websanity/pen/ExEVEMo?editors=1000. Web. 5 Jul 2022. ## Slide 382 Heimlich, Russell. “Dynamic Dummy Image Generator”. Dynamic Dummy Image Generator, 19 Nov 2021, https://dummyimage.com. Web. 5 Jul 2022. ## Slide 383 Heimlich, Russell. “Dynamic Dummy Image Generator”. Dynamic Dummy Image Generator, 19 Nov 2021, https://dummyimage.com. Web. 5 Jul 2022. ## Slide 384 Wang, Phillip. This Person Does Not Exist, https://thispersondoesnotexist.com. Web. 17 Sept. 2020. ## Slide 385 Wang, Phillip. This Person Does Not Exist, https://thispersondoesnotexist.com. Web. 17 Sept. 2020. ## Slide 386 Wang, Phillip. This Person Does Not Exist, https://thispersondoesnotexist.com. Web. 17 Sept. 2020. ## Slide 387 Wang, Phillip. This Person Does Not Exist, https://thispersondoesnotexist.com. Web. 17 Sept. 2020. ## Slide 388 Wang, Phillip. This Person Does Not Exist, https://thispersondoesnotexist.com. Web. 17 Sept. 2020. ## Slide 389 Wang, Phillip. This Person Does Not Exist, https://thispersondoesnotexist.com. Web. 17 Sept. 2020. ## Slide 391 Wang, Phillip. This Person Does Not Exist, https://thispersondoesnotexist.com. Web. 17 Sept. 2020. ## Slide 392 Wang, Phillip. This Person Does Not Exist, https://thispersondoesnotexist.com. Web. 17 Sept. 2020. ## Slide 393 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 395 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 396 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 397 Wikipedia contributors. “Portable Network Graphics”. Wikipedia, The Free Encyclopedia, https://en.wikipedia.org/w/index.php?title=Portable_Network_Graphics&oldid=1058174006, 1 December 2021. Web. 7 December 2021. ## Slide 398 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 399 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 400 FIXME: add pages listing apps that support each format ## Slide 401 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..., 1 December 2021, https://caniuse.com/webp. Web. 5 December 2021. ## Slide 402 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 403 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 404 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 405 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 406 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 407 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 409 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 410 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 411 WebM Project. “WebPShop”. GitHub, 26 November 2021, https://github.com/webmproject/WebPShop. Web. 6 December 2021. ## Slide 412 FIXME ## Slide 413 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 414 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 415 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 416 Deveria, Alexis [@Fyrd]. “JPEG XL image format”. Can I use…, 29 Nov 2022, https://caniuse.com/jpegxl. Web. 30 Nov 2022. ## Slide 417 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 418 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 419 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. ## Slide 421 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 422 GoogleChromeLabs. “Squoosh”. Squoosh, https://squoosh.app/editor. Web. 6 Dec. 2021. ## Slide 423 GoogleChromeLabs. “Squoosh”. Squoosh, https://squoosh.app/editor. Web. 6 Dec. 2021. ## Slide 424 GoogleChromeLabs. “Squoosh”. Squoosh, https://squoosh.app/editor. Web. 6 Dec. 2021. ## Slide 425 GoogleChromeLabs. “Squoosh”. Squoosh, https://squoosh.app/editor. Web. 6 Dec. 2021. ## Slide 428 Mondello, Francesco. “Converseen - A Free Batch Image Converter and More”. FasterLand, 14 Sep 2022, https://converseen.fasterland.net/. Web. 05 Dec 2022. ## Slide 437 Monroe, Charlie. “Permute - Media Converter for macOS”. Charlie Monroe Software, 18 Nov 2022, https://software.charliemonroe.net/permute/. Web. 05 Dec 2022. ## Slide 452 Realmac Software Limited. “Powerful Batch Photo Editor for Mac - Squash”. Realmac, 21 Nov 2022, https://www.realmacsoftware.com/squash/. Web. 05 Dec 2022. ## Slide 457 WebP: Deveria, Alexis [@Fyrd]. “WebP image format”. Can I use…, 6 Feb. 2022, https://caniuse.com/webp. Web. 9 Feb 2022. AVIF Deveria, Alexis [@Fyrd]. “AVIF image format”. Can I use…, 15 July 2022, https://caniuse.com/avif. Web. 16 July 2022. “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…, 29 Nov 2022, https://caniuse.com/jpegxl. Web. 30 Nov 2022. 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 458 MDN contributors. “”. MDN Web Docs, 6 Feb. 2022, https://developer.mozilla.org/en-US/docs/Web/SVG/Element/svg. Web. 19 Feb 2022. ## Slide 459 MDN contributors. “”. MDN Web Docs, 6 Feb. 2022, https://developer.mozilla.org/en-US/docs/Web/SVG/Element/svg. Web. 19 Feb 2022. World Wide Web Consortium (W3C). “SCALABLE VECTOR GRAPHICS (SVG)“. World Wide Web Consortium (W3C), 2016, https://www.w3.org/Graphics/SVG/. Web. 8 July 2022. ## Slide 460 WebSanity. “SVG Image Map”. CodePen, 28 June 2020, https://codepen.io/websanity/pen/VwezRqz?editors=1000. Web. 28 June 2020. ## Slide 461 MDN contributors. “”. MDN Web Docs, 6 Feb. 2022, https://developer.mozilla.org/en-US/docs/Web/SVG/Element/svg. Web. 19 Feb 2022. ## Slide 462 WebSanity. “SVG: Linked image”. CodePen, 11 Mar. 2022, https://codepen.io/websanity/pen/MWrgZJy?editors=1000. Web. 11 Mar 2022. ## Slide 463 MDN contributors. “”. MDN Web Docs, 6 Feb. 2022, https://developer.mozilla.org/en-US/docs/Web/SVG/Element/svg. Web. 19 Feb 2022. ## Slide 464 WebSanity. “SVG: Inline image”. CodePen, 11 Mar. 2022, https://codepen.io/websanity/pen/zYpOyBN?editors=1100. Web. 11 Mar 2022. ## Slide 465 WebSanity. “SVG: Inline image”. CodePen, 11 Mar. 2022, https://codepen.io/websanity/pen/zYpOyBN?editors=1100. Web. 11 Mar 2022. ## Slide 466 “Cthulhu symbol”. Free SVG, 19 Feb 2019, https://freesvg.org/cthulhu-symbol. Web. 25 Feb 2023. Public domain. Modified to match the linked version & to remove unnecessary code. ## Slide 468 Archibald, Jake. “SVGOMG - SVGO’s Missing GUI”. SVGOMG, 25 Nov. 2021, https://jakearchibald.github.io/svgomg/. Web. 11 Mar. 2022. ## Slide 469 Archibald, Jake. “SVGOMG - SVGO’s Missing GUI”. SVGOMG, 25 Nov. 2021, https://jakearchibald.github.io/svgomg/. Web. 11 Mar. 2022. ## Slide 470 Archibald, Jake. “SVGOMG - SVGO’s Missing GUI”. SVGOMG, 25 Nov. 2021, https://jakearchibald.github.io/svgomg/. Web. 11 Mar. 2022. ## Slide 471 Archibald, Jake. “SVGOMG - SVGO’s Missing GUI”. SVGOMG, 25 Nov. 2021, https://jakearchibald.github.io/svgomg/. Web. 11 Mar. 2022. ## Slide 472 Archibald, Jake. “SVGOMG - SVGO’s Missing GUI”. SVGOMG, 25 Nov. 2021, https://jakearchibald.github.io/svgomg/. Web. 11 Mar. 2022. ## Slide 473 Archibald, Jake. “SVGOMG - SVGO’s Missing GUI”. SVGOMG, 25 Nov. 2021, https://jakearchibald.github.io/svgomg/. Web. 11 Mar. 2022. ## Slide 474 Archibald, Jake. “SVGOMG - SVGO’s Missing GUI”. SVGOMG, 25 Nov. 2021, https://jakearchibald.github.io/svgomg/. Web. 11 Mar. 2022. ## Slide 475 Archibald, Jake. “SVGOMG - SVGO’s Missing GUI”. SVGOMG, 25 Nov. 2021, https://jakearchibald.github.io/svgomg/. Web. 11 Mar. 2022. ## Slide 476 Archibald, Jake. “SVGOMG - SVGO’s Missing GUI”. SVGOMG, 25 Nov. 2021, https://jakearchibald.github.io/svgomg/. Web. 11 Mar. 2022. ## Slide 477 Archibald, Jake. “SVGOMG - SVGO’s Missing GUI”. SVGOMG, 25 Nov. 2021, https://jakearchibald.github.io/svgomg/. Web. 11 Mar. 2022. ## Slide 478 Archibald, Jake. “SVGOMG - SVGO’s Missing GUI”. SVGOMG, 25 Nov. 2021, https://jakearchibald.github.io/svgomg/. Web. 11 Mar. 2022. ## Slide 479 Archibald, Jake. “SVGOMG - SVGO’s Missing GUI”. SVGOMG, 25 Nov. 2021, https://jakearchibald.github.io/svgomg/. Web. 11 Mar. 2022. ## Slide 480 Archibald, Jake. “SVGOMG - SVGO’s Missing GUI”. SVGOMG, 25 Nov. 2021, https://jakearchibald.github.io/svgomg/. Web. 11 Mar. 2022. ## Slide 481 Archibald, Jake. “SVGOMG - SVGO’s Missing GUI”. SVGOMG, 25 Nov. 2021, https://jakearchibald.github.io/svgomg/. Web. 11 Mar. 2022. ## Slide 482 Archibald, Jake. “SVGOMG - SVGO’s Missing GUI”. SVGOMG, 25 Nov. 2021, https://jakearchibald.github.io/svgomg/. Web. 11 Mar. 2022. ## Slide 483 Archibald, Jake. “SVGOMG - SVGO’s Missing GUI”. SVGOMG, 25 Nov. 2021, https://jakearchibald.github.io/svgomg/. Web. 11 Mar. 2022. ## Slide 484 Archibald, Jake. “SVGOMG - SVGO’s Missing GUI”. SVGOMG, 25 Nov. 2021, https://jakearchibald.github.io/svgomg/. Web. 11 Mar. 2022. ## Slide 485 Archibald, Jake. “SVGOMG - SVGO’s Missing GUI”. SVGOMG, 25 Nov. 2021, https://jakearchibald.github.io/svgomg/. Web. 11 Mar. 2022. ## Slide 486 WHATWG. “4.8.9 The video element”. HTML Living Standard, 4 Apr 2022, https://html.spec.whatwg.org/multipage/media.html#the-video-element. Web. 4 Apr 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 683 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 684 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 685 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 686 WebSanity. “HTML: header element”. CodePen, 7 Dec 2018, https://codepen.io/websanity/pen/PoGyzq?editors=1000. Web. 8 July 2022. ## Slide 687 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. “