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. “