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-Condensed.txt
## Slide 4
Some HTML elements are conveniences for avoiding writing CSS (e.g., , , ) or for structure (
& )
Some CSS inserts content (e.g., ::before & ::after) or modifies behavior (e.g., animate & transition)
Some JavaScript modifies HTML & CSS to change meaning or presentation, not for behavior
Wikipedia contributors. “Separation of concerns”. Wikipedia, The Free Encyclopedia, 17 June 2022, https://en.wikipedia.org/wiki/Separation_of_concerns. Web. 8 July 2022.
## Slide 6
WHATWG. “4 The elements of HTML”. HTML Living Standard, 8 July 2022, https://html.spec.whatwg.org/#semantics. Web. 8 July 2022.
MDN contributors. “HTML elements reference”. MDN Web Docs, 18 Feb. 2022, https://developer.mozilla.org/en-US/docs/Web/HTML/Element. Web. 3 Apr 2022.
## Slide 11
WHATWG. “4.1.1 The html element”. HTML Living Standard, 29 Mar. 2022, https://html.spec.whatwg.org/multipage/semantics.html#the-html-element. Web. 29 Mar. 2022.
## Slide 12
WHATWG. “4.2.1 The head element”. HTML Living Standard, 29 Mar. 2022, https://html.spec.whatwg.org/multipage/semantics.html#the-head-element. Web. 29 Mar. 2022.
## Slide 14
WHATWG. “4.3.1 The body element”. HTML Living Standard, 29 Mar. 2022, https://html.spec.whatwg.org/multipage/sections.html#the-body-element. Web. 29 Mar. 2022.
MDN contributors. “: The Document Body element”. MDN Web Docs, 21 Apr 2022, https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body. Web. 8 July 2022.
## Slide 19
Granneman, Scott. Linux Phrasebook, Second Edition. Indianapolis, IN: Addison-Wesley (2016). iii, 478.
## Slide 20
Full list of metadata elements: base, link, meta, noscript, script, style, template, title.
Hickson, Ian et al. “3.2.5.2.1 Metadata content”. WHATWG, HTML Living Standard, 19 Mar 2023, https://html.spec.whatwg.org/multipage/dom.html#metadata-content. Web. 19 Mar 2023.
## Slide 21
WHATWG. “4.2.5 The meta element”. HTML Living Standard, 3 Feb. 2022, http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#the-meta-element. Web. 6 Feb. 2022.
## Slide 22
shrink-to-fit: Aderinokun, Ire. “The Problem with iOS Safari and shrink-to-fit”. bitsofcode, 5 Apr. 2016, https://bitsofco.de/ios-safari-and-shrink-to-fit/. Web. 30 Mar 2022.
## Slide 23
WHATWG. “4.2.2 The title element”. HTML Living Standard, 3 Feb. 2022, http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#the-title-element. Web. 6 Feb. 2022.
## Slide 25
“On-Page Ranking Factors”. Moz, https://moz.com/learn/seo/on-page-factors. Web. 28 December 2021.
“Title Tag”. Moz, https://moz.com/learn/seo/title-tag. Web. 28 December 2021.
## Slide 26
Granneman, Scott. “The title page of the 3rd edition of the Encyclopedia Brittanica [1797]”. Chainsaw on a Tire Swing, 4 July 2015, https://chainsawonatireswing.com/2015/07/04/title-page-of-3rd-edition-of-encyclopedia-brittanica/. Web. 21 December 2021.
## Slide 30
“Inland Bearded Dragon”. Saint Louis Zoo, 1 Feb. 2019, https://web.archive.org/web/20190201120255/https://www.stlzoo.org/animals/abouttheanimals/reptiles/lizards/inlandbeardeddragon. Web. 6 Feb 2022.
## Slide 33
WHATWG. “4.3.6 The h1, h2, h3, h4, h5, and h6 elements”. HTML Living Standard, 29 Mar. 2022, http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements. Web. 29 Mar. 2022.
MDN contributors. “
–
: The HTML Section Heading elements”. MDN Web Docs, 2 Feb. 2022, https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements. Web. 13 Feb 2022.
## Slide 34
WebSanity. “HTML: Simple Webpage, Corrected & No Deprecations”. CodePen, 20 Dec. 2021, https://codepen.io/websanity/pen/jOGwKxB?editors=1000. Web. 20 Dec. 2021.
## Slide 36
Surowiecki, James. “Content and its Discontents”. The New Yorker, 20 Oct 2014, https://www.newyorker.com/magazine/2014/10/20/content-discontents. Web. 30 Jan 2022.
## Slide 37
AllMusic. “Ben Branch & The Operation Breadbasket Orchestra Songs, Albums, Reviews, Bio & More | AllMusic”. AllMusic, 2022, https://www.allmusic.com/artist/ben-branch-the-operation-breadbasket-orchestra-mn0000157434. Web. 30 Jan 2022.
## Slide 38
WHATWG. “4.4.1 The p element”. HTML Living Standard, 3 Feb. 2022, http://www.whatwg.org/specs/web-apps/current-work/multipage/grouping-content.html#the-p-element. Web. 6 Feb. 2022.
MDN contributors. “
: The Paragraph element”. MDN Web Docs, 18 Feb. 2022, https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p. Web. 3 Apr 2022.
## Slide 39
WebSanity. “HTML: p element”. CodePen, 1 May 2014, https://codepen.io/websanity/pen/zYBPmo?editors=1000. Web. 6 Feb 2022.
## Slide 41
WebSanity. “HTML: p element”. CodePen, 1 May 2014, https://codepen.io/websanity/pen/zYBPmo?editors=1000. Web. 6 Feb 2022.
## Slide 42
WebSanity. “HTML: p element”. CodePen, 1 May 2014, https://codepen.io/websanity/pen/zYBPmo?editors=1000. Web. 6 Feb 2022.
## Slide 43
WebSanity. “HTML: p element”. CodePen, 1 May 2014, https://codepen.io/websanity/pen/zYBPmo?editors=1000. Web. 6 Feb 2022.
## Slide 47
All will validate. 1st one is best because it’s easy to scan down your code & make sure you closed all start tags. 2nd is OK if you have a very short amount of content. 3rd one is bad form & makes no sense.
## Slide 52
Christian’s Rule
When you save your file in your editor with auto-formatting on, it will format like this, which you do not want
## Slide 53
Free-floating text might not go in a
— e.g., you might use a
,
, or
— but it has to go into something
## Slide 54
“4.5.27 The br element”. HTML Living Standard, WHATWG, 3 Feb. 2022, http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-br-element. Web. 6 Feb. 2022.
MDN contributors. “ : The Line Break element”. MDN Web Docs, 2 Oct. 2021, https://developer.mozilla.org/en-US/docs/Web/HTML/Element/br. Web. 3 Apr 2022.
## Slide 55
WebSanity. “HTML: br element”. CodePen, 24 Apr. 2014,https://codepen.io/websanity/pen/YzWQEE?editors=1000. Web. 6 Feb 2022.
Frost, Robert. Excerpt from “Stopping by Woods on a Snowy Evening”. Poetry Foundation, 5 Feb. 2022, https://www.poetryfoundation.org/poems/42891/stopping-by-woods-on-a-snowy-evening. Web. 6 Feb 2022.
## Slide 58
WebSanity. “HTML: br element - problems with 2 br in a row”. CodePen, 27 June 2020, https://codepen.io/websanity/pen/pogrqgv?editors=1100. Web. 6 Feb 2022.
Lovecraft, H. P. Excerpt from“The Dunwich Horror”. Lovecraft Stories, http://www.lovecraft-stories.com/story/the-dunwich-horror. Web. 6 Feb 2022.
FIXME change screenshots?
## Slide 59
WebSanity. “HTML: br element - problems with 2 br in a row”. CodePen, 27 June 2020, https://codepen.io/websanity/pen/pogrqgv?editors=1100. Web. 6 Feb 2022.
Lovecraft, H. P. Excerpt from“The Dunwich Horror”. Lovecraft Stories, http://www.lovecraft-stories.com/story/the-dunwich-horror. Web. 6 Feb 2022.
## Slide 60
“13.1.2 Elements”. HTML Living Standard, WHATWG, 3 Feb. 2022, https://html.spec.whatwg.org/multipage/syntax.html#void-elements. Web. 6 Feb. 2022.
MDN contributors. “Empty element”. MDN Web Docs, 7 Oct. 2021, https://developer.mozilla.org/en-US/docs/Glossary/Empty_element. Web. 3 Apr 2022.
## Slide 61
“13.1.2 Elements”. HTML Living Standard, WHATWG, 3 Feb. 2022, https://html.spec.whatwg.org/multipage/syntax.html#void-elements. Web. 6 Feb. 2022.
MDN contributors. “Empty element”. MDN Web Docs, 7 Oct. 2021, https://developer.mozilla.org/en-US/docs/Glossary/Empty_element. Web. 3 Apr 2022.
For more on void elements, see our presentations Web Development: The Absolute Basics & HTML Overview in Categorization
## Slide 62
The first adds additional new line to the start of the paragraph, which never makes sense (if you want additional margining above a paragraph, use CSS)
With thanks to the great Ogden Nash
TODO: CodePen this
## Slide 63
Chris’s Rule
## Slide 64
WebSanity. “HTML: Your first webpage”. CodePen, 30 June 2022, https://codepen.io/websanity/pen/yLKyxmr?editors=1000. Web. 30 June 2022.
Smith, Linell Nash, editor. The Best of Ogden Nash. Chicago: Iver R. Dee (2007). 163.
## Slide 65
WebSanity. “HTML: Your first webpage”. CodePen, 30 June 2022, https://codepen.io/websanity/pen/yLKyxmr?editors=1000. Web. 30 June 2022.
Smith, Linell Nash, editor. The Best of Ogden Nash. Chicago: Iver R. Dee (2007). 163.
## Slide 67
WHATWG. “4.3.6 The h1, h2, h3, h4, h5, and h6 elements”. HTML Living Standard, 29 Mar. 2022, http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements. Web. 29 Mar. 2022.
MDN contributors. “
–
: The HTML Section Heading elements”. MDN Web Docs, 2 Feb. 2022, https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements. Web. 13 Feb 2022.
## Slide 68
WebSanity. “Setting up a WebSanity Server: Linode”. WebSanity Tech Wiki, 2 Mar. 2016. Web. 2 Mar. 2016.
Muller, Britney & the MOZ staff. “On-Page SEO”. MOZ, https://moz.com/beginners-guide-to-seo/on-page-seo. Web. 13 Feb 2022.
FIXME add screenshot showing accessibility
## Slide 69
WebSanity. “Setting up a WebSanity Server: Linode”. WebSanity Tech Wiki, 2 Mar. 2016. Web. 2 Mar. 2016.
Muller, Britney & the MOZ staff. “On-Page SEO”. MOZ, https://moz.com/beginners-guide-to-seo/on-page-seo. Web. 13 Feb 2022.
## Slide 70
WebSanity. “Setting up a WebSanity Server: Linode”. WebSanity Tech Wiki, 2 Mar. 2016. Web. 2 Mar. 2016.
Muller, Britney & the MOZ staff. “On-Page SEO”. MOZ, https://moz.com/beginners-guide-to-seo/on-page-seo. Web. 13 Feb 2022.
## Slide 71
WebSanity. “Setting up a WebSanity Server: Linode”. WebSanity Tech Wiki, 2 Mar. 2016. Web. 2 Mar. 2016.
Muller, Britney & the MOZ staff. “On-Page SEO”. MOZ, https://moz.com/beginners-guide-to-seo/on-page-seo. Web. 13 Feb 2022.
## Slide 72
WebSanity. “Setting up a WebSanity Server: Linode”. WebSanity Tech Wiki, 2 Mar. 2016. Web. 2 Mar. 2016.
Muller, Britney & the MOZ staff. “On-Page SEO”. MOZ, https://moz.com/beginners-guide-to-seo/on-page-seo. Web. 13 Feb 2022.
## Slide 73
WebSanity. “Setting up a WebSanity Server: Linode”. WebSanity Tech Wiki, 2 Mar. 2016. Web. 2 Mar. 2016.
Muller, Britney & the MOZ staff. “On-Page SEO”. MOZ, https://moz.com/beginners-guide-to-seo/on-page-seo. Web. 13 Feb 2022.
## Slide 74
WebSanity. “Setting up a WebSanity Server: Linode”. WebSanity Tech Wiki, 2 Mar. 2016. Web. 2 Mar. 2016.
Muller, Britney & the MOZ staff. “On-Page SEO”. MOZ, https://moz.com/beginners-guide-to-seo/on-page-seo. Web. 13 Feb 2022.
## Slide 75
WebSanity. “Setting up a WebSanity Server: Linode”. WebSanity Tech Wiki, 2 Mar. 2016. Web. 2 Mar. 2016.
Muller, Britney & the MOZ staff. “On-Page SEO”. MOZ, https://moz.com/beginners-guide-to-seo/on-page-seo. Web. 13 Feb 2022.
## Slide 76
WebSanity. “Setting up a WebSanity Server: Linode”. WebSanity Tech Wiki, 2 Mar. 2016. Web. 2 Mar. 2016.
Muller, Britney & the MOZ staff. “On-Page SEO”. MOZ, https://moz.com/beginners-guide-to-seo/on-page-seo. Web. 13 Feb 2022.
## Slide 77
WebSanity. “Setting up a WebSanity Server: Linode”. WebSanity Tech Wiki, 2 Mar. 2016. Web. 2 Mar. 2016.
Muller, Britney & the MOZ staff. “On-Page SEO”. MOZ, https://moz.com/beginners-guide-to-seo/on-page-seo. Web. 13 Feb 2022.
## Slide 78
WebSanity. “Setting up a WebSanity Server: Linode”. WebSanity Tech Wiki, 2 Mar. 2016. Web. 2 Mar. 2016.
Muller, Britney & the MOZ staff. “On-Page SEO”. MOZ, https://moz.com/beginners-guide-to-seo/on-page-seo. Web. 13 Feb 2022.
## Slide 79
WebSanity. “HTML: h1–h6 elements”. CodePen, 25 Apr. 2014, http://codepen.io/websanity/pen/ptgzc. Web. 25 Apr. 2014.
## Slide 80
WHATWG. “4.3.6 The h1, h2, h3, h4, h5, and h6 elements”. HTML Living Standard, 29 Mar. 2022, http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements. Web. 29 Mar. 2022.
MDN contributors. “
–
: The HTML Section Heading elements”. MDN Web Docs, 2 Feb. 2022, https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements. Web. 13 Feb 2022.
## Slide 82
Daggett, John & Myles C. Maxfield & Chris Lilley. “3.5. Font size: the font-size property”. CSS Fonts Module Level 3, 20 Sept. 2018, https://www.w3.org/TR/css-fonts-3/#font-size-prop. Web. 30 Mar. 2022.
## Slide 83
Daggett, John & Myles C. Maxfield & Chris Lilley. “3.5. Font size: the font-size property”. CSS Fonts Module Level 3, 20 Sept. 2018, https://www.w3.org/TR/css-fonts-3/#font-size-prop. Web. 30 Mar. 2022.
## Slide 84
Muller, Britney & the MOZ staff. “On-Page SEO”. MOZ, https://moz.com/beginners-guide-to-seo/on-page-seo. Web. 13 Feb 2022.
## Slide 85
Butterick, Matthew. “Headings”. Butterick’s Practical Typography, 16 July 2023, https://practicaltypography.com/headings.html. Web. 1 Aug 2023.
## Slide 86
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 87
Brealey, Richard A., Stewart C. Myers, & Franklin Allen. Principles of Corporate Finance, 10th Edition. New York: McGraw-Hill (2010). 9.
## Slide 94
WebSanity. “HTML: headings create implied sections”. CodePen, 3 Aug. 2020, https://codepen.io/websanity/pen/BwbYVp?editors=1000. Web. 3 Aug. 2020.
## Slide 95
WebSanity. “HTML: headings create implied sections”. CodePen, 3 Aug. 2020, https://codepen.io/websanity/pen/BwbYVp?editors=1000. Web. 3 Aug. 2020.
## Slide 97
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 98
WebSanity. “HTML: h1-h6 ordering”. CodePen, 25 Apr. 2014, http://codepen.io/websanity/pen/AoapB. Web. 25 Apr. 2014.
## Slide 101
Google gives extra weight to words inside headings; Google gives no extra weight to words inside paragraphs
FIXME screenshot
## Slide 102
Hickson, Ian et al. “4.3.7 The hgroup element”. WHATWG, HTML Living Standard, 19 Mar 2023, https://html.spec.whatwg.org/multipage/sections.html#the-hgroup-element. Web. 19 Mar 2023.
MDN contributors. “”. MDN Web Docs, 23 Feb 2023, https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hgroup. Web. 19 Mar 2023.
## Slide 103
WebSanity. “HTML: hgroup element”. CodePen, 19 Mar 2023, https://codepen.io/websanity/pen/eYLLNPe?editors=1000. Web. 19 Mar 2023.
## Slide 104
WebSanity. “HTML: hgroup element, Britannica example”. CodePen, 19 Mar 2023, https://codepen.io/websanity/pen/mdGGJLY?editors=1000. Web. 19 Mar 2023.
## Slide 105
WebSanity. “HTML: hgroup element, Britannica example: Live Preview”. CodePen, 19 Mar 2023, https://codepen.io/websanity/live/mdGGJLY. Web. 19 Mar 2023.
## Slide 109
WebSanity. “HTML: 3 kinds of lists”. CodePen, 27 Nov. 2021, https://codepen.io/websanity/pen/bGobgBy?editors=1000. Web. 27 Nov. 2021.
## Slide 111
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 112
WebSanity. “HTML: ul, ol, & li elements”. CodePen, 26 Sept. 2019, https://codepen.io/websanity/pen/xxKeLeZ?editors=1000. Web. 26 Sept. 2019.
## Slide 114
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 115
WebSanity. “HTML: ul & li elements”. CodePen, 27 Apr. 2014, https://codepen.io/websanity/pen/MWeZdE?editors=1000. Web. 27 Apr. 2014.
## Slide 116
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 117
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 118
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 119
WebSanity. “HTML: ol element with reversed attribute”. CodePen, 5 Feb. 2022, https://codepen.io/websanity/pen/zYPoKav?editors=1000. Web. 5 Feb. 2022.
## Slide 120
WebSanity. “HTML: ol element with start attribute”. CodePen, 5 Feb. 2022, https://codepen.io/websanity/pen/zYPooYo?editors=1000. Web. 5 Feb. 2022.
## Slide 121
Deveria, Alexis [@Fyrd]. “Reversed attribute of ordered lists”. Can I use…, https://caniuse.com/ol-reversed. Web. 9 Feb 2022.
## Slide 123
WebSanity. “HTML: ol element, nested & simplified”. CodePen, 26 Dec. 2021, https://codepen.io/websanity/pen/yLzPRVm?editors=1000. Web. 26 Dec. 2021.
## Slide 125
For another example, see https://codepen.io/websanity/pen/Jheac?editors=1000
## Slide 126
WebSanity. “HTML: ol element, nested & simplified”. CodePen, 26 Dec. 2021, https://codepen.io/websanity/pen/yLzPRVm?editors=1000. Web. 26 Dec. 2021.
## Slide 127
WebSanity. “HTML: ol element, nested & simplified”. CodePen, 26 Dec. 2021, https://codepen.io/websanity/pen/yLzPRVm?editors=1000. Web. 26 Dec. 2021.
## Slide 128
WebSanity. “HTML: ol element, nested & simplified”. CodePen, 26 Dec. 2021, https://codepen.io/websanity/pen/yLzPRVm?editors=1000. Web. 26 Dec. 2021.
## Slide 129
WebSanity. “HTML: ol element, nested & simplified”. CodePen, 26 Dec. 2021, https://codepen.io/websanity/pen/yLzPRVm?editors=1000. Web. 26 Dec. 2021.
## Slide 130
WebSanity. “HTML: ol element, nested & simplified”. CodePen, 26 Dec. 2021, https://codepen.io/websanity/pen/yLzPRVm?editors=1000. Web. 26 Dec. 2021.
## Slide 131
WebSanity. “HTML: ol element, nested & simplified”. CodePen, 26 Dec. 2021, https://codepen.io/websanity/pen/yLzPRVm?editors=1000. Web. 26 Dec. 2021.
## Slide 132
WebSanity. “HTML: ol element, nested & simplified”. CodePen, 26 Dec. 2021, https://codepen.io/websanity/pen/yLzPRVm?editors=1000. Web. 26 Dec. 2021.
## Slide 133
WebSanity. “HTML: ol element, nested & simplified”. CodePen, 26 Dec. 2021, https://codepen.io/websanity/pen/yLzPRVm?editors=1000. Web. 26 Dec. 2021.
## Slide 134
WebSanity. “HTML: ol element, nested & simplified”. CodePen, 26 Dec. 2021, https://codepen.io/websanity/pen/yLzPRVm?editors=1000. Web. 26 Dec. 2021.
## Slide 135
WebSanity. “HTML: ol element, nested & simplified”. CodePen, 26 Dec. 2021, https://codepen.io/websanity/pen/yLzPRVm?editors=1000. Web. 26 Dec. 2021.
## Slide 136
WebSanity. “HTML: ol element, nested & simplified”. CodePen, 26 Dec. 2021, https://codepen.io/websanity/pen/yLzPRVm?editors=1000. Web. 26 Dec. 2021.
## Slide 137
WebSanity. “HTML: ol elements nested”. CodePen, 27 Apr. 2014, http://codepen.io/websanity/pen/DpGHo. Web. 27 Apr. 2014.
## Slide 138
WebSanity. “HTML: ul elements nested”. CodePen, 27 Apr. 2014, http://codepen.io/websanity/pen/GthmI. Web. 27 Apr. 2014.
## Slide 140
WebSanity. “HTML: ol & ul elements nested together”. CodePen, 27 Apr. 2014, http://codepen.io/websanity/pen/mIkfw. Web. 27 Apr. 2014.
## Slide 141
Eddie’s Rule
## Slide 144
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 145
WHATWG. “13.1.4 Character references”. HTML Living Standard, 3 Feb. 2022, https://html.spec.whatwg.org/multipage/syntax.html#character-references. Web. 6 Feb. 2022.
MDN contributors. “Entity”. MDN Web Docs, 18 Feb 2022, https://developer.mozilla.org/en-US/docs/Glossary/Entity. Web. 8 July 2022.
## Slide 146
Wikipedia contributors. "List of XML and HTML character entity references”. Wikipedia, The Free Encyclopedia, 3 Apr. 2022, https://en.wikipedia.org/w/index.php?title=List_of_XML_and_HTML_character_entity_references&oldid=1080815017. Web. 4 Apr. 2022.
lhunt. “Character Entity Reference Chart”. W3C Public CVS Repository, 2009, https://dev.w3.org/html5/html-author/charref. Web. 4 Apr 2022.
## Slide 147
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 148
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 149
WebSanity. “HTML: character entities”. CodePen, 4 Apr. 2021, http://codepen.io/websanity/pen/sypxK. Web. 4 Apr 2022.
## Slide 150
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 151
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 152
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 153
“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 154
↑ 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 155
↑ 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 156
↑ 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 157
↑ 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 158
↑ 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 159
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 160
Wikipedia contributors. “List of XML and HTML character entity references”. Wikipedia, The Free Encyclopedia, 15 Jul. 2020, https://en.wikipedia.org/w/index.php?title=List_of_XML_and_HTML_character_entity_references&oldid=967855330. Web. 6 Aug. 2020.
## Slide 161
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 162
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 163
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 164
WebSanity. “HTML: nbsp character entity”. CodePen, 5 May 2014, https://codepen.io/websanity/pen/xxEzWB?editors=1000. Web. 8 July 2022.
## Slide 165
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 166
“Unicode Character Search”. FileFormat.Info, http://www.fileformat.info/info/unicode/char/search.htm. Web. 6 Aug. 2020.
## Slide 167
“Unicode Blocks”. FileFormat.Info, http://www.fileformat.info/info/unicode/block/index.htm. Web. 6 Aug. 2020.
## Slide 196
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 213
⌥ = Option/Alt
⇧ = Shift
## Slide 216
CSS - Typography covers a few special kinds of spaces & punctuation marks where you really need to use character entities
## Slide 218
i2 = −1 defined imaginary numbers
## Slide 219
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 220
Minus sign is slightly thinner than en dash & has a sliver of space between itself & adjacent characters
## Slide 223
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 224
WebSanity. “HTML: hr element”. CodePen, 26 Apr. 2014, https://codepen.io/websanity/pen/abZjgW?editors=1000. Web. 26 Apr. 2014.
## Slide 226
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. “
(see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/pre) & (see Character References for more)
## Slide 230
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 231
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 232
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 234
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 235
Group
## Slide 239
WHATWG. “3.2.6 Global attributes”. HTML Living Standard, 19 Mar 2023, https://html.spec.whatwg.org/multipage/dom.html#global-attributes. Web. 19 Mar 2023.
MDN contributors. “Global attributes”. MDN Web Docs, 1 July 2022, https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes. Web. 8 July 2022.
MDN contributors. “Using ARIA: Roles, states, and properties”. MDN Web Docs, 17 May 2022, https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques. Web. 8 July 2022.
In April 2021, there were 27 global attributes & 63 JavaScript event handlers; as of March 2023, there were 24 global attributes & 70 JavaScript event handlers
In April 2021, there were
## Slide 241
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 242
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 243
WebSanity. “HTML global attribute: title”. CodePen, 19 June 2020, https://codepen.io/websanity/pen/dypzrw?editors=1000. Web. 6 July 2022.
## Slide 244
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 245
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 249
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 250
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 252
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 254
A string is a “sequence of alphanumeric text or other symbols”
Attribute values are always strings: https://html.spec.whatwg.org/#attributes
## Slide 256
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 258
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 260
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 261
WebSanity. “HTML: Boolean attributes”. CodePen, 22 June 2020, https://codepen.io/websanity/pen/gOPggVr?editors=1000. Web. 8 July 2022.
## Slide 262
$ curl -s "https://html.spec.whatwg.org" | grep -C 3 "boolean\s*attribute"
## Slide 265
“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 268
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 269
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 279
FIXME
## Slide 280
FIXME
## Slide 283
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 284
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 290
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 291
“HTML/New HTML5 Elements”. W3C Wiki, 18 Nov. 2011, https://www.w3.org/wiki/HTML/New_HTML5_Elements. Web. 4 Apr 2022.
## Slide 292
“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 293
“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 294
“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 295
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 296
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 298
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 301
FIXME: should have
inside it
## Slide 302
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 303
Boston Consulting Group. “Careers Blog”. Boston Consulting Group, 16 Feb 2023, https://careers.bcg.com/blog. Web. 19 Feb 2023.
## Slide 305
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 306
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 307
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 309
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 313
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 314
WebSanity. “HTML: em element”. CodePen, 11 Sept. 2014, https://codepen.io/websanity/pen/GRqwWy?editors=1000. Web. 11 Sept. 2014.
## Slide 315
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 316
WebSanity. “HTML: i element”. CodePen, 30 Nov 2022, https://codepen.io/websanity/pen/oNLQzY?editors=1000. Web. 30 Nov 2022.
## Slide 317
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 318
WebSanity. “HTML: strong element”. CodePen, 27 Apr 2014, https://codepen.io/websanity/pen/VwjVpb?editors=1000. Web. 27 Apr 2014.
## Slide 319
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 320
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 321
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 323
WHATWG. “4.5.5 The s element”. MDN Web Docs, 11 Feb. 2022, http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-s-element. Web. 13 Feb 2022.
MDN contributors. “: The Strikethrough element”. MDN Web Docs, 12 Oct. 2021, https://developer.mozilla.org/en-US/docs/Web/HTML/Element/s. Web. 13 Feb 2022.
## Slide 324
WebSanity. “HTML: s element”. CodePen, 13 July 2020, http://codepen.io/websanity/pen/xynaj. Web. 13 Feb 2022.
## Slide 325
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 326
WebSanity. “HTML: u element”. CodePen, 2 May 2014, https://codepen.io/websanity/pen/YzGrqo?editors=1000. Web. 2 May 2014.
## Slide 327
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 328
Gerhyrah’s Rule
## Slide 331
WHATWG. “4.5.4 The small element”. HTML Living Standard, 3 Feb. 2022, http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-small-element. Web. 9 Feb 2022.
MDN contributors. “: the side comment element”. MDN Web Docs, 2 Oct. 2021, https://developer.mozilla.org/en-US/docs/Web/HTML/Element/small. Web. 13 Feb 2022.
## Slide 332
WebSanity. “HTML: small element”. CodePen, 30 Apr. 2014, https://codepen.io/websanity/pen/yLaJJZ?editors=100. Web. 30 Apr. 2014.
## Slide 333
WHATWG. “4.5.4 The small element”. HTML Living Standard, 3 Feb. 2022, http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-small-element. Web. 9 Feb 2022.
## Slide 334
WebSanity. “HTML: h2-h6 are not subheadings 2”. CodePen, 21 Oct. 2017, https://codepen.io/websanity/pen/eYzKqa?editors=1000. Web. 21 Oct. 2017.
## Slide 335
WebSanity. “HTML: h2-h6 are not subheadings 2”. CodePen, 21 Oct. 2017, https://codepen.io/websanity/pen/eYzKqa?editors=1000. Web. 21 Oct. 2017.
## Slide 336
WebSanity. “HTML: h2-h6 are not subheadings 2”. CodePen, 21 Oct. 2017, https://codepen.io/websanity/pen/eYzKqa?editors=1000. Web. 21 Oct. 2017.
## Slide 342
Wikipedia contributors. “Raster graphics”. Wikipedia, The Free Encyclopedia, 24 June 2022, https://en.wikipedia.org/wiki/Raster_graphics. Web. 8 Jul. 2022.
## Slide 343
Enfield, Susan. “How Many Photos Will be Taken in 2022?”. Mylio, 9 Mar 2022, https://news.mylio.com/how-many-photos-taken-in-2022/. Web. 21 Feb 2023.
## Slide 344
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 345
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 346
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 347
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 348
WebSanity. “Raster vs. Vector”. CodePen, 2 July 2022, https://codepen.io/websanity/pen/OJQdmdr?editors=1000. Web. 2 Jul 2022.
## Slide 349
WebSanity. “Raster vs. Vector”. CodePen, 2 July 2022, https://codepen.io/websanity/pen/OJQdmdr?editors=1000. Web. 2 Jul 2022.
## Slide 350
WebSanity. “Raster vs. Vector”. CodePen, 2 July 2022, https://codepen.io/websanity/pen/OJQdmdr?editors=1000. Web. 2 Jul 2022.
## Slide 352
Adobe Photoshop: https://www.adobe.com/products/photoshop.html
Microsoft Paint: https://apps.microsoft.com/store/detail/paint/9PCFS5B6T72H?hl=en-us&gl=US
“Paint.NET - Free Software for Digital Photo Editing”. Paint.NET, 19 Feb 2023, https://getpaint.net/. Web. 21 Feb 2023.
Mueller, Gus. “Acorn 7 | Full Featured Photo Editor for the Mac”. Flying Meat, 2023, https://flyingmeat.com/acorn/. Web. 21 Feb 2023.
“Pixelmator Pro”. Pixelmator, 21 Dec 2022, https://www.pixelmator.com/pro/. Web. 21 Feb 2023.
“Affinity Photo – award-winning photo editing software”. Serif, https://affinity.serif.com/en-us/photo/. Web. 2 Mar 2022.
## Slide 354
Wikipedia contributors. “Vector graphics”. Wikipedia, The Free Encyclopedia, 26 June 2022, https://en.wikipedia.org/wiki/Vector_graphics. Web. 8 July 2022.
## Slide 356
WebSanity. “HTML - SVG example”. CodePen, 7 June 2015, http://codepen.io/websanity/pen/xGdLxJ?editors=100. Web. 4 Apr 2022.
## Slide 357
WebSanity. “SVG Yin Yang”. CodePen, 15 Jan. 2021, https://codepen.io/websanity/pen/poEqPNN?editors=1000. Web. 4 Apr 2022.
## Slide 358
WebSanity. “HSL Color Wheel: Tones”. CodePen, 23 July 2020, https://codepen.io/websanity/pen/QWNMRq?editors=1000. Web. 19 Feb 2022.
## Slide 359
WebSanity. “HSL Color Wheel: Tones”. CodePen, 23 July 2020, https://codepen.io/websanity/pen/QWNMRq?editors=1000. Web. 19 Feb 2022.
## Slide 360
WebSanity. “Raster vs. Vector”. CodePen, 2 July 2022, https://codepen.io/websanity/pen/OJQdmdr?editors=1000. Web. 2 Jul 2022.
## Slide 361
WebSanity. “Raster vs. Vector”. CodePen, 2 July 2022, https://codepen.io/websanity/pen/OJQdmdr?editors=1000. Web. 2 Jul 2022.
## Slide 362
WebSanity. “Raster vs. Vector”. CodePen, 2 July 2022, https://codepen.io/websanity/pen/OJQdmdr?editors=1000. Web. 2 Jul 2022.
## Slide 363
Tonchino. “File:Vector-based example.svg”. Wikipedia, 11 Jan. 2013, https://en.wikipedia.org/wiki/File:Vector-based_example.svg. Web. 4 Apr 2022.
## Slide 364
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 365
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 366
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 369
“Industry-leading vector graphics software | Adobe Illustrator”. Adobe, 20 Feb 2023, https://www.adobe.com/products/illustrator.html. Web. 23 Feb 2023.
duarte.framos et al. “Draw Freely”. Inkscape, https://inkscape.org/. Web. 23 Feb 2023.
“Graphic Design, Illustration and Technical Software”. CorelDRAW, https://www.coreldraw.com/en/. Web. 23 Feb 2023.
“The Most Intuitive and Precise Illustration Software in the Galaxy”. Vectornator, https://www.vectornator.io/. Web. 23 Feb 2023.
“Affinity Designer: award-winning graphic design software”. Serif, https://affinity.serif.com/en-us/designer/. Web. 23 Feb 2023.
“Pixelmator Pro”. Pixelmator, 21 Dec 2022, https://www.pixelmator.com/pro/. Web. 21 Feb 2023.
Foksa, Jarosław. “Boxy SVG Editor”. Boxy SVG, https://boxy-svg.com/. Web. 23 Feb 2023.
## Slide 370
WHATWG. “4.8.3 The img element”. HTML Living Standard, 4 Apr. 2022, https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element. Web. 3 Apr 2022.
MDN contributors. “: The Image Embed element”. MDN Web Docs, 29 Mar. 2022, https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img. Web. 3 Apr 2022.
## Slide 372
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 373
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 374
WebSanity. “img element: Leave out value for alt”. CodePen, 27 Feb 2023, https://codepen.io/websanity/pen/LYJxYGW?editors=1100. Web. 27 Feb 2023.
## Slide 377
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 378
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 380
WebSanity. “HTML: img with srcset attribute”. CodePen, 7 Dec. 2021, https://codepen.io/websanity/pen/gOGPNwa?editors=1000. Web. 7 Dec. 2021.
## Slide 383
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 387
Unsplash Team. “Beautiful Free Images & Pictures | Unsplash”. Unsplash, 29 June 2020, https://unsplash.com. Web. 29 June 2020.
## Slide 388
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 389
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 390
WebSanity. “HTML: Placeholder images with Unsplash”. CodePen, 5 July 2022, https://codepen.io/websanity/pen/ExEVEMo?editors=1000. Web. 5 Jul 2022.
## Slide 391
Heimlich, Russell. “Dynamic Dummy Image Generator”. Dynamic Dummy Image Generator, 19 Nov 2021, https://dummyimage.com. Web. 5 Jul 2022.
## Slide 392
Heimlich, Russell. “Dynamic Dummy Image Generator”. Dynamic Dummy Image Generator, 19 Nov 2021, https://dummyimage.com. Web. 5 Jul 2022.
## Slide 393
Wang, Phillip. This Person Does Not Exist, https://thispersondoesnotexist.com. Web. 17 Sept. 2020.
## Slide 394
Wang, Phillip. This Person Does Not Exist, https://thispersondoesnotexist.com. Web. 17 Sept. 2020.
## Slide 395
Wang, Phillip. This Person Does Not Exist, https://thispersondoesnotexist.com. Web. 17 Sept. 2020.
## Slide 396
Wang, Phillip. This Person Does Not Exist, https://thispersondoesnotexist.com. Web. 17 Sept. 2020.
## Slide 397
Wang, Phillip. This Person Does Not Exist, https://thispersondoesnotexist.com. Web. 17 Sept. 2020.
## Slide 398
Wang, Phillip. This Person Does Not Exist, https://thispersondoesnotexist.com. Web. 17 Sept. 2020.
## Slide 400
Wang, Phillip. This Person Does Not Exist, https://thispersondoesnotexist.com. Web. 17 Sept. 2020.
## Slide 401
Wang, Phillip. This Person Does Not Exist, https://thispersondoesnotexist.com. Web. 17 Sept. 2020.
## Slide 402
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 404
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 405
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 406
Wikipedia contributors. “Portable Network Graphics”. Wikipedia, The Free Encyclopedia, 1 December 2021, https://en.wikipedia.org/w/index.php?title=Portable_Network_Graphics&oldid=1058174006. Web. 7 December 2021.
## Slide 407
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 408
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 409
FIXME: add pages listing apps that support each format
## Slide 410
Google. “An image format for the Web”. Google Developers, 16 August 2021, https://web.archive.org/web/20211203115942/https://developers.google.com/speed/webp. Web. 5 December 2021.
Wikipedia contributors. “WebP.” Wikipedia, The Free Encyclopedia, 19 November 2021, https://en.wikipedia.org/w/index.php?title=WebP&oldid=1056059303. Web. 3 December 2021.
Deveria, Alexis. “WebP image format”. Can I use..., 26 Mar 2021, https://caniuse.com/webp. Web. 27 Mar 2023.
## Slide 411
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 412
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 413
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 414
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 415
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 416
NASA, ESA, CSA, STScI, Webb ERO Production Team. “Tarantula Nebula (NIRCam Image)”. Webb Space Telescope, 6 Sep 2022, https://webbtelescope.org/contents/media/images/2022/041/01GA76MYFN0FMKNRHGCAGGYCVQ?news=true. Web. 6 Sep 2022.
Public domain.
## Slide 418
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 419
Google. “WebPShop”. Google Developers, 16 August 2021, https://developers.google.com/speed/webp/docs/webpshop. Web. 6 December 2021.
“Work with WebP files in Photoshop”. Adobe Support, 15 Nov 2022, https://helpx.adobe.com/photoshop/kb/support-webp-image-format.html. Web. 25 Jan 2023.
## Slide 420
WebM Project. “WebPShop”. GitHub, 26 November 2021, https://github.com/webmproject/WebPShop. Web. 6 December 2021.
## Slide 421
FIXME
## Slide 422
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 423
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 424
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 425
Deveria, Alexis [@Fyrd]. “JPEG XL image format”. Can I use…, 29 Nov 2022, https://caniuse.com/jpegxl. Web. 30 Nov 2022.
## Slide 426
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 427
dah…@chromium.org. “Comment 84”, from “Issue 1178058: JPEG XL decoding support (image/jxl) in blink (tracking bug)”. Chromium Bugs, 30 Oct 2022, https://bugs.chromium.org/p/chromium/issues/detail?id=1178058#c84. Web. 30 Nov 2022.
## Slide 428
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 429
WebP: Deveria, Alexis [@Fyrd]. “WebP image format”. Can I use…, 6 Feb. 2022, https://caniuse.com/webp. Web. 9 Feb 2022.
AVIF
Deveria, Alexis [@Fyrd]. “AVIF image format”. Can I use…, 15 July 2022, https://caniuse.com/avif. Web. 16 July 2022.
“Chrome 85: Upload Streaming, Human Interface Devices, Custom Properties with Inheritance and More”. Chromium Blog, 23 July 2020, https://blog.chromium.org/2020/07/chrome-85-upload-streaming-human.html. Web. 2 December 2021.
JPEG XL
Deveria, Alexis [@Fyrd]. “JPEG XL image format”. Can I use…, 29 Nov 2022, https://caniuse.com/jpegxl. Web. 30 Nov 2022.
dah…@chromium.org. “Comment 84”, from “Issue 1178058: JPEG XL decoding support (image/jxl) in blink (tracking bug)”. Chromium Bugs, 30 Oct 2022, https://bugs.chromium.org/p/chromium/issues/detail?id=1178058#c84. Web. 30 Nov 2022.
## Slide 431
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 432
GoogleChromeLabs. “Squoosh”. Squoosh, https://squoosh.app/editor. Web. 6 Dec. 2021.
## Slide 433
GoogleChromeLabs. “Squoosh”. Squoosh, https://squoosh.app/editor. Web. 6 Dec. 2021.
## Slide 434
GoogleChromeLabs. “Squoosh”. Squoosh, https://squoosh.app/editor. Web. 6 Dec. 2021.
## Slide 435
GoogleChromeLabs. “Squoosh”. Squoosh, https://squoosh.app/editor. Web. 6 Dec. 2021.
## Slide 438
Mondello, Francesco. “Converseen - A Free Batch Image Converter and More”. FasterLand, 14 Sep 2022, https://converseen.fasterland.net/. Web. 05 Dec 2022.
## Slide 447
Monroe, Charlie. “Permute - Media Converter for macOS”. Charlie Monroe Software, 18 Nov 2022, https://software.charliemonroe.net/permute/. Web. 05 Dec 2022.
## Slide 462
Realmac Software Limited. “Powerful Batch Photo Editor for Mac - Squash”. Realmac, 21 Nov 2022, https://www.realmacsoftware.com/squash/. Web. 05 Dec 2022.
## Slide 467
MDN contributors. “