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 13 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 18 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 19 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 20 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 22 “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 23 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 27 “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 30 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 31 WebSanity. “HTML: Simple Webpage, Corrected & No Deprecations”. CodePen, 20 Dec. 2021, https://codepen.io/websanity/pen/jOGwKxB?editors=1000. Web. 20 Dec. 2021. ## Slide 32 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 33 WebSanity. “HTML: p element”. CodePen, 1 May 2014, https://codepen.io/websanity/pen/zYBPmo?editors=1000. Web. 6 Feb 2022. ## Slide 34 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 35 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 36 Free-floating text might not go in a

 — e.g., you might use a

,

, or
  •  — but it has to go into something ## Slide 37 “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 38 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 40 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 41 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 42 “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 43 “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 44 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 45 Chris’s Rule ## Slide 46 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 48 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 49 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 50 WebSanity. “HTML: h1–h6 elements”. CodePen, 25 Apr. 2014, http://codepen.io/websanity/pen/ptgzc. Web. 25 Apr. 2014. ## Slide 51 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 53 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 54 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 55 Muller, Britney & the MOZ staff. “On-Page SEO”. MOZ, https://moz.com/beginners-guide-to-seo/on-page-seo. Web. 13 Feb 2022. ## Slide 56 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 57 Brealey, Richard A., Stewart C. Myers, & Franklin Allen. Principles of Corporate Finance, 10th Edition. New York: McGraw-Hill (2010). 9. ## Slide 58 WebSanity. “HTML: headings create implied sections”. CodePen, 3 Aug. 2020, https://codepen.io/websanity/pen/BwbYVp?editors=1000. Web. 3 Aug. 2020. ## Slide 59 WebSanity. “HTML: headings create implied sections”. CodePen, 3 Aug. 2020, https://codepen.io/websanity/pen/BwbYVp?editors=1000. Web. 3 Aug. 2020. ## Slide 61 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 62 WebSanity. “HTML: h1-h6 ordering”. CodePen, 25 Apr. 2014, http://codepen.io/websanity/pen/AoapB. Web. 25 Apr. 2014. ## Slide 65 Google gives extra weight to words inside headings; Google gives no extra weight to words inside paragraphs FIXME screenshot ## Slide 69 WebSanity. “HTML: 3 kinds of lists”. CodePen, 27 Nov. 2021, https://codepen.io/websanity/pen/bGobgBy?editors=1000. Web. 27 Nov. 2021. ## Slide 71 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 72 WebSanity. “HTML: ul, ol, & li elements”. CodePen, 26 Sept. 2019, https://codepen.io/websanity/pen/xxKeLeZ?editors=1000. Web. 26 Sept. 2019. ## Slide 74 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 75 WebSanity. “HTML: ul & li elements”. CodePen, 27 Apr. 2014, https://codepen.io/websanity/pen/MWeZdE?editors=1000. Web. 27 Apr. 2014. ## Slide 76 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 77 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 78 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 79 WebSanity. “HTML: ol element with reversed attribute”. CodePen, 5 Feb. 2022, https://codepen.io/websanity/pen/zYPoKav?editors=1000. Web. 5 Feb. 2022. ## Slide 80 WebSanity. “HTML: ol element with start attribute”. CodePen, 5 Feb. 2022, https://codepen.io/websanity/pen/zYPooYo?editors=1000. Web. 5 Feb. 2022. ## Slide 81 Deveria, Alexis [@Fyrd]. “Reversed attribute of ordered lists”. Can I use…, https://caniuse.com/ol-reversed. Web. 9 Feb 2022. ## Slide 82 Eddie’s Rule ## Slide 85 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 86 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 87 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 88 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 89 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 90 WebSanity. “HTML: character entities”. CodePen, 4 Apr. 2021, http://codepen.io/websanity/pen/sypxK. Web. 4 Apr 2022. ## Slide 91 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 92 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 93 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 94 “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 95 ↑ 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 96 ↑ 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 97 ↑ 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 98 ↑ 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 99 ↑ 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 100 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 101 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 102 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 103 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 104 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 105 WebSanity. “HTML: nbsp character entity”. CodePen, 5 May 2014, https://codepen.io/websanity/pen/xxEzWB?editors=1000. Web. 8 July 2022. ## Slide 106 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 107 “Unicode Character Search”. FileFormat.Info, http://www.fileformat.info/info/unicode/char/search.htm. Web. 6 Aug. 2020. ## Slide 108 “Unicode Blocks”. FileFormat.Info, http://www.fileformat.info/info/unicode/block/index.htm. Web. 6 Aug. 2020. ## Slide 133 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 134 ⌥ = Option/Alt ⇧ = Shift ## Slide 137 CSS - Typography covers a few special kinds of spaces & punctuation marks where you really need to use character entities ## Slide 139 i2 = −1 defined imaginary numbers ## Slide 140 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 141 Minus sign is slightly thinner than en dash & has a sliver of space between itself & adjacent characters ## Slide 144 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 145 WebSanity. “HTML: hr element”. CodePen, 26 Apr. 2014, https://codepen.io/websanity/pen/abZjgW?editors=1000. Web. 26 Apr. 2014. ## Slide 147 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 148 WebSanity. “HTML: blockquote element”. CodePen, 3 Jan. 2022, https://codepen.io/websanity/pen/KKXZLXE?editors=1000. Web. 3 Jan. 2022. ## Slide 149 WebSanity. “HTML: blockquote element”. CodePen, 3 Jan. 2022, https://codepen.io/websanity/pen/KKXZLXE?editors=1000. Web. 3 Jan. 2022. ## Slide 150 There are 2 exceptions:
           (see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pre) &   (see Character References for more)
          
          ## Slide 151
          
          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 152 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 153 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 155 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 156 Group ## Slide 160 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 162 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 163 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 164 WebSanity. “HTML global attribute: title”. CodePen, 19 June 2020, https://codepen.io/websanity/pen/dypzrw?editors=1000. Web. 6 July 2022. ## Slide 165 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 166 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 170 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 171 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 173 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 175 A string is a “sequence of alphanumeric text or other symbols” Attribute values are always strings: https://html.spec.whatwg.org/#attributes ## Slide 177 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 179 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 181 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 182 WebSanity. “HTML: Boolean attributes”. CodePen, 22 June 2020, https://codepen.io/websanity/pen/gOPggVr?editors=1000. Web. 8 July 2022. ## Slide 183 $ curl -s "https://html.spec.whatwg.org" | grep -C 3 "boolean\s*attribute" ## Slide 186 “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 190 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 192 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 193 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 196 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 198 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 199 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 200 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 201 “HTML/New HTML5 Elements”. W3C Wiki, 18 Nov. 2011, https://www.w3.org/wiki/HTML/New_HTML5_Elements. Web. 4 Apr 2022. ## Slide 202 “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 203 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 204 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 207 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 208 WebSanity. “HTML: em element”. CodePen, 11 Sept. 2014, https://codepen.io/websanity/pen/GRqwWy?editors=1000. Web. 11 Sept. 2014. ## Slide 209 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 210 WebSanity. “HTML: strong element”. CodePen, 27 Apr 2014, https://codepen.io/websanity/pen/VwjVpb?editors=1000. Web. 27 Apr 2014. ## Slide 211 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 212 WebSanity. “HTML: i element”. CodePen, 26 Apr. 2014, https://codepen.io/websanity/pen/oNLQzY?editors=1000. Web. 26 Apr. 2014. ## Slide 213 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 214 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 215 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 216 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 217 WebSanity. “HTML: u element”. CodePen, 2 May 2014, https://codepen.io/websanity/pen/YzGrqo?editors=1000. Web. 2 May 2014. ## Slide 218 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 219 Gerhyrah’s Rule ## Slide 225 Wikipedia contributors. “Raster graphics”. Wikipedia, The Free Encyclopedia, 24 June 2022, https://en.wikipedia.org/wiki/Raster_graphics. Web. 8 Jul. 2022. ## Slide 226 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 227 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 228 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 229 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 230 WebSanity. “Raster vs. Vector”. CodePen, 2 July 2022, https://codepen.io/websanity/pen/OJQdmdr?editors=1000. Web. 2 Jul 2022. ## Slide 231 WebSanity. “Raster vs. Vector”. CodePen, 2 July 2022, https://codepen.io/websanity/pen/OJQdmdr?editors=1000. Web. 2 Jul 2022. ## Slide 232 WebSanity. “Raster vs. Vector”. CodePen, 2 July 2022, https://codepen.io/websanity/pen/OJQdmdr?editors=1000. Web. 2 Jul 2022. ## Slide 234 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: https://www.getpaint.net Acorn: https://flyingmeat.com/acorn/ Pixelmator Pro: https://www.pixelmator.com/pro/ Affinity Photo: https://affinity.serif.com/en-us/photo/ ## Slide 236 Wikipedia contributors. “Vector graphics”. Wikipedia, The Free Encyclopedia, 26 June 2022, https://en.wikipedia.org/wiki/Vector_graphics. Web. 8 July 2022. ## Slide 238 WebSanity. “HTML - SVG example”. CodePen, 7 June 2015, http://codepen.io/websanity/pen/xGdLxJ?editors=100. Web. 4 Apr 2022. ## Slide 239 WebSanity. “SVG Yin Yang”. CodePen, 15 Jan. 2021, https://codepen.io/websanity/pen/poEqPNN?editors=1000. Web. 4 Apr 2022. ## Slide 240 WebSanity. “HSL Color Wheel: Tones”. CodePen, 23 July 2020, https://codepen.io/websanity/pen/QWNMRq?editors=1000. Web. 19 Feb 2022. ## Slide 241 WebSanity. “HSL Color Wheel: Tones”. CodePen, 23 July 2020, https://codepen.io/websanity/pen/QWNMRq?editors=1000. Web. 19 Feb 2022. ## Slide 242 WebSanity. “Raster vs. Vector”. CodePen, 2 July 2022, https://codepen.io/websanity/pen/OJQdmdr?editors=1000. Web. 2 Jul 2022. ## Slide 243 WebSanity. “Raster vs. Vector”. CodePen, 2 July 2022, https://codepen.io/websanity/pen/OJQdmdr?editors=1000. Web. 2 Jul 2022. ## Slide 244 WebSanity. “Raster vs. Vector”. CodePen, 2 July 2022, https://codepen.io/websanity/pen/OJQdmdr?editors=1000. Web. 2 Jul 2022. ## Slide 245 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 246 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 247 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 248 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 250 Adobe Illustrator: https://www.adobe.com/products/illustrator.html 
Inkscape: https://inkscape.org CorelDRAW: https://www.coreldraw.com/en/ Vectornator: https://www.vectornator.io Affinity Designer: https://affinity.serif.com/en-us/designer/ Pixelmator Pro: https://www.pixelmator.com/pro/ ## Slide 251 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 252 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 253 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 254 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 255 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 257 WebSanity. “HTML: img with srcset attribute”. CodePen, 7 Dec. 2021, https://codepen.io/websanity/pen/gOGPNwa?editors=1000. Web. 7 Dec. 2021. ## Slide 259 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 263 Unsplash Team. “Beautiful Free Images & Pictures | Unsplash”. Unsplash, 29 June 2020, https://unsplash.com. Web. 29 June 2020. ## Slide 264 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 265 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 266 WebSanity. “HTML: Placeholder images with Unsplash”. CodePen, 5 July 2022, https://codepen.io/websanity/pen/ExEVEMo?editors=1000. Web. 5 Jul 2022. ## Slide 267 Heimlich, Russell. “Dynamic Dummy Image Generator”. Dynamic Dummy Image Generator, 19 Nov 2021, https://dummyimage.com. Web. 5 Jul 2022. ## Slide 268 Heimlich, Russell. “Dynamic Dummy Image Generator”. Dynamic Dummy Image Generator, 19 Nov 2021, https://dummyimage.com. Web. 5 Jul 2022. ## Slide 269 Wang, Phillip. This Person Does Not Exist, https://thispersondoesnotexist.com. Web. 17 Sept. 2020. ## Slide 270 Wikipedia contributors. “StyleGAN”. Wikipedia, The Free Encyclopedia, 11 Aug. 2020, https://en.wikipedia.org/w/index.php?title=StyleGAN&oldid=972405036. Web. 4 Apr. 2022. Wang, Phillip. This Person Does Not Exist, https://thispersondoesnotexist.com. Web. 17 Sept. 2020. ## Slide 271 Wang, Phillip. This Person Does Not Exist, https://thispersondoesnotexist.com. Web. 17 Sept. 2020. ## Slide 272 Wang, Phillip. This Person Does Not Exist, https://thispersondoesnotexist.com. Web. 17 Sept. 2020. ## Slide 273 Wang, Phillip. This Person Does Not Exist, https://thispersondoesnotexist.com. Web. 17 Sept. 2020. ## Slide 274 Wang, Phillip. This Person Does Not Exist, https://thispersondoesnotexist.com. Web. 17 Sept. 2020. ## Slide 275 Wang, Phillip. This Person Does Not Exist, https://thispersondoesnotexist.com. Web. 17 Sept. 2020. ## Slide 277 Wang, Phillip. This Person Does Not Exist, https://thispersondoesnotexist.com. Web. 17 Sept. 2020. ## Slide 278 Wang, Phillip. This Person Does Not Exist, https://thispersondoesnotexist.com. Web. 17 Sept. 2020. ## Slide 279 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 281 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 282 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 283 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 284 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 285 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 287 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 288 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 289 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 290 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 291 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 292 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 293 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 294 Google. “WebPShop”. Google Developers, 16 August 2021, https://developers.google.com/speed/webp/docs/webpshop. Web. 6 December 2021. ## Slide 295 WebM Project. “WebPShop”. GitHub, 26 November 2021, https://github.com/webmproject/WebPShop. Web. 6 December 2021. ## Slide 296 FIXME ## Slide 297 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 298 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 299 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 300 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 301 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 303 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 304 GoogleChromeLabs. “Squoosh”. Squoosh, https://squoosh.app/editor. Web. 6 Dec. 2021. ## Slide 305 GoogleChromeLabs. “Squoosh”. Squoosh, https://squoosh.app/editor. Web. 6 Dec. 2021. ## Slide 306 GoogleChromeLabs. “Squoosh”. Squoosh, https://squoosh.app/editor. Web. 6 Dec. 2021. ## Slide 307 GoogleChromeLabs. “Squoosh”. Squoosh, https://squoosh.app/editor. Web. 6 Dec. 2021. ## Slide 308 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…, 6 Feb. 2022, https://caniuse.com/jpegxl. Web. 9 Feb 2022. ## Slide 309 MDN contributors. “”. MDN Web Docs, 6 Feb. 2022, https://developer.mozilla.org/en-US/docs/Web/SVG/Element/svg. Web. 19 Feb 2022. ## Slide 310 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 311 WebSanity. “SVG Image Map”. CodePen, 28 June 2020, https://codepen.io/websanity/pen/VwezRqz?editors=1000. Web. 28 June 2020. ## Slide 312 MDN contributors. “”. MDN Web Docs, 6 Feb. 2022, https://developer.mozilla.org/en-US/docs/Web/SVG/Element/svg. Web. 19 Feb 2022. ## Slide 313 WebSanity. “SVG: Linked image”. CodePen, 11 Mar. 2022, https://codepen.io/websanity/pen/MWrgZJy?editors=1000. Web. 11 Mar 2022. ## Slide 314 MDN contributors. “”. MDN Web Docs, 6 Feb. 2022, https://developer.mozilla.org/en-US/docs/Web/SVG/Element/svg. Web. 19 Feb 2022. ## Slide 315 WebSanity. “SVG: Inline image”. CodePen, 11 Mar. 2022, https://codepen.io/websanity/pen/zYpOyBN?editors=1100. Web. 11 Mar 2022. ## Slide 316 WebSanity. “SVG: Inline image”. CodePen, 11 Mar. 2022, https://codepen.io/websanity/pen/zYpOyBN?editors=1100. Web. 11 Mar 2022. ## Slide 317 https://jakearchibald.github.io/svgomg/ ## Slide 318 Archibald, Jake. “SVGOMG - SVGO’s Missing GUI”. SVGOMG, 25 Nov. 2021, https://jakearchibald.github.io/svgomg/. Web. 11 Mar. 2022. ## Slide 319 Archibald, Jake. “SVGOMG - SVGO’s Missing GUI”. SVGOMG, 25 Nov. 2021, https://jakearchibald.github.io/svgomg/. Web. 11 Mar. 2022. ## Slide 320 Archibald, Jake. “SVGOMG - SVGO’s Missing GUI”. SVGOMG, 25 Nov. 2021, https://jakearchibald.github.io/svgomg/. Web. 11 Mar. 2022. ## Slide 321 Archibald, Jake. “SVGOMG - SVGO’s Missing GUI”. SVGOMG, 25 Nov. 2021, https://jakearchibald.github.io/svgomg/. Web. 11 Mar. 2022. ## Slide 322 Archibald, Jake. “SVGOMG - SVGO’s Missing GUI”. SVGOMG, 25 Nov. 2021, https://jakearchibald.github.io/svgomg/. Web. 11 Mar. 2022. ## Slide 323 Archibald, Jake. “SVGOMG - SVGO’s Missing GUI”. SVGOMG, 25 Nov. 2021, https://jakearchibald.github.io/svgomg/. Web. 11 Mar. 2022. ## Slide 324 Archibald, Jake. “SVGOMG - SVGO’s Missing GUI”. SVGOMG, 25 Nov. 2021, https://jakearchibald.github.io/svgomg/. Web. 11 Mar. 2022. ## Slide 325 Archibald, Jake. “SVGOMG - SVGO’s Missing GUI”. SVGOMG, 25 Nov. 2021, https://jakearchibald.github.io/svgomg/. Web. 11 Mar. 2022. ## Slide 326 Archibald, Jake. “SVGOMG - SVGO’s Missing GUI”. SVGOMG, 25 Nov. 2021, https://jakearchibald.github.io/svgomg/. Web. 11 Mar. 2022. ## Slide 327 Archibald, Jake. “SVGOMG - SVGO’s Missing GUI”. SVGOMG, 25 Nov. 2021, https://jakearchibald.github.io/svgomg/. Web. 11 Mar. 2022. ## Slide 328 Archibald, Jake. “SVGOMG - SVGO’s Missing GUI”. SVGOMG, 25 Nov. 2021, https://jakearchibald.github.io/svgomg/. Web. 11 Mar. 2022. ## Slide 329 Archibald, Jake. “SVGOMG - SVGO’s Missing GUI”. SVGOMG, 25 Nov. 2021, https://jakearchibald.github.io/svgomg/. Web. 11 Mar. 2022. ## Slide 330 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 466 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 467 http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-header-element ## Slide 468 http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-header-element ## Slide 469 WebSanity. “HTML: header element”. CodePen, 7 Dec 2018, https://codepen.io/websanity/pen/PoGyzq?editors=1000. Web. 8 July 2022. ## Slide 470 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. “