Notes for HTML - Overview By Scott Granneman & Jans Carton Find the presentation at http://www.granneman.com/presentations/ ## Slide 3 http://www.granneman.com ## Slide 4 http://www.granneman.com → http://www.granneman.com/teaching/web-development-granneman-way/ ## Slide 5 http://www.granneman.com/teaching/web-development-granneman-way/css-overview/dom/ ## Slide 7 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 ## Slide 14 “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.” From “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 “Two Desire Paths, Battersea Park”, by Gordon Joly on Flickr (image 251134757_f32eb686d6_o), September 23, 2006. CC BY-SA 2.0. https://www.flickr.com/photos/loopzilla/251134757/in/pool-desire_paths/. ## Slide 17 https://developer.mozilla.org/en-US/docs/Web/HTML/Element ## Slide 18 http://codepen.io/shaman_tito/pen/IAtgc ## Slide 21 Why the change? Categorizing everything as block-level or inline wasn’t really accurate & was way too limiting, especially as HTML got more complex, so it was abandoned (that said, block & inline are used in CSS, where they are very important) ## Slide 24 http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-address-element ## Slide 25 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/address ## Slide 26 http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#content-models ## Slide 27 http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#content-models ## Slide 28 http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#content-models ## Slide 29 http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#content-models ## Slide 30 http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#content-models ## Slide 31 http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#content-models ## Slide 32 http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#content-models ## Slide 33 http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#content-models ## Slide 35 https://html.spec.whatwg.org/multipage/syntax.html#elements-2 ## Slide 39 https://html.spec.whatwg.org/#toc-semantics https://developer.mozilla.org/en-US/docs/Web/HTML/Element ## Slide 40 https://html.spec.whatwg.org/#toc-semantics https://developer.mozilla.org/en-US/docs/Web/HTML/Element ## Slide 41 https://html.spec.whatwg.org/#embedded-content https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Image_and_multimedia https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Embedded_content ## Slide 50 is covered in Bonus ## Slide 51 http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#the-title-element ## Slide 54 https://www.stlzoo.org/animals/abouttheanimals/reptiles/lizards/inlandbeardeddragon ## Slide 55 http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#the-meta-element ## Slide 56 shrink-to-fit: https://bitsofco.de/ios-safari-and-shrink-to-fit/ ## Slide 58 https://wiki.whatwg.org/wiki/MetaExtensions ## Slide 59 http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#the-link-element ## Slide 60 http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#the-style-element ## Slide 61 http://www.whatwg.org/specs/web-apps/current-work/multipage/scripting-1.html#the-script-element ## Slide 64 https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-* ## Slide 66 https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes ## Slide 72 http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#classes ## Slide 73 http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#the-id-attribute ## Slide 74 http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#the-style-attribute ## Slide 75 http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#the-title-attribute ## Slide 76 http://codepen.io/websanity/pen/lykGt ## Slide 77 https://twitter.com/karlgroves/status/941809410401275905 ## Slide 79 https://codepen.io/websanity/pen/wvMgdPR?editors=1000 ## Slide 80 https://codepen.io/websanity/pen/wvMgdPR?editors=1000 ## Slide 81 https://codepen.io/websanity/pen/wvMgdPR?editors=1000 ## Slide 82 https://codepen.io/websanity/pen/wvMgdPR?editors=1000 ## Slide 83 https://codepen.io/websanity/pen/wvMgdPR?editors=1000 ## Slide 86 https://getbootstrap.com/docs/4.5/components/tooltips/ ## Slide 87 https://getbootstrap.com/docs/4.5/components/tooltips/ ## Slide 89 class, id, & style in IE & Firefox: https://web.archive.org/save/http://www.webdevout.net/browser-support-html ## Slide 90 accesskey: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/accesskey & https://web.archive.org/web/20200617231019/http://www.webdevout.net/browser-support-html draggable: https://caniuse.com/#feat=mdn-html_global_attributes_draggable hidden: https://caniuse.com/#feat=hidden tabindex: https://caniuse.com/#feat=tabindex-attr tabindex on Chrome for Android: https://blog.chromium.org/2017/09/chrome-62-beta-network-quality.html title: https://caniuse.com/#feat=mdn-html_global_attributes_title & http://www.webdevout.net/browser-support-html ## Slide 96 http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#attr-data-* ## Slide 98 http://codepen.io/websanity/pen/seaDd ## Slide 99 https://caniuse.com/#feat=dataset ## Slide 100 A string is a “sequence of alphanumeric text or other symbols” Attribute values are always strings: https://html.spec.whatwg.org/#attributes ## Slide 106 https://html.spec.whatwg.org/#boolean-attribute ## Slide 107 https://codepen.io/websanity/pen/gOPggVr?editors=1000 ## Slide 108 $ curl -s "https://html.spec.whatwg.org" | grep -C 3 "boolean\s*attribute" ## Slide 117 http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-nav-element ## Slide 118 http://codepen.io/websanity/pen/qKvpc ## Slide 119 http://codepen.io/websanity/pen/qKvpc ## Slide 120 https://html.spec.whatwg.org/multipage/sections.html#the-article-element ## Slide 121 Diffbot: https://www.diffbot.com Mercury Web Parser: https://mercury.postlight.com/web-parser/ Instapaper: https://www.instapaper.com Pocket: https://getpocket.com Mercury Reader (Chromium-based): https://chrome.google.com/webstore/detail/mercury-reader/oknpjjbmpnndlpmnhmekjpocelpnlfdi Reader Mode (Chromium-based): https://readermode.io Safari Reader: https://www.apple.com/safari/ & https://support.apple.com/guide/safari/hide-ads-when-reading-articles-sfri32632/mac Firefox Reader View: https://support.mozilla.org/en-US/kb/firefox-reader-view-clutter-free-web-pages Edge Immersive Reader: https://support.microsoft.com/en-us/help/4000734/microsoft-edge-accessibility-features ## Slide 122 https://www.nytimes.com/2016/08/14/travel/hp-lovecraft-providence.html?_r=0 ## Slide 123 https://www.nytimes.com/2016/08/14/travel/hp-lovecraft-providence.html?_r=0 ## Slide 124 https://www.nytimes.com/2016/08/14/travel/hp-lovecraft-providence.html?_r=0 Chrome on Android has a feature like this, but you have to enable it first: http://www.androidguys.com/2017/09/06/enable-reader-mode-in-chrome-for-android-how-to/ ## Slide 125 https://www.nytimes.com/2016/08/14/travel/hp-lovecraft-providence.html?_r=0 ## Slide 126 https://www.nytimes.com/2016/08/14/travel/hp-lovecraft-providence.html?_r=0 https://support.apple.com/guide/safari/read-articles-clutter-free-sfri32632 ## Slide 127 https://www.nytimes.com/2016/08/14/travel/hp-lovecraft-providence.html?_r=0 ## Slide 128 http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-aside-element ## Slide 130 https://codepen.io/websanity/pen/gtIAc?editors=1000 ## Slide 131 https://codepen.io/websanity/pen/gtIAc?editors=1000 ## Slide 132 http://codepen.io/websanity/pen/Dkhrl?editors=100 ## Slide 133 http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-section-element ## Slide 134 http://codepen.io/websanity/pen/EFJht ## Slide 135 https://en.wikipedia.org/wiki/H._P._Lovecraft http://dagonbytes.com/thelibrary/lovecraft/thecallofcthulhu.htm ## Slide 137 http://codepen.io/websanity/pen/AoaBl ## Slide 141 http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements ## Slide 143 https://www.granneman.com/presentations/all-presentations 11-yr-old Table of Contents JavaScript found at https://github.com/dcneiner/TableOfContents ## Slide 144 http://codepen.io/websanity/pen/ptgzc ## Slide 151 https://codepen.io/websanity/pen/BwbYVp?editors=1000 ## Slide 152 https://codepen.io/websanity/pen/BwbYVp?editors=1000 ## Slide 155 http://codepen.io/websanity/pen/AoapB ## Slide 158 Google gives extra weight to words inside headings; Google gives no extra weight to words inside paragraphs ## Slide 160 http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-header-element ## Slide 161 http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-header-element ## Slide 162 http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-header-element ## Slide 163 http://codepen.io/websanity/pen/hCefd?editors=100 ## Slide 164 http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-footer-element ## Slide 165 http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-footer-element ## Slide 166 http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-footer-element ## Slide 167 http://codepen.io/websanity/pen/nDdHq ## Slide 168 http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-footer-element ## Slide 169 http://codepen.io/websanity/pen/EFJht ## Slide 170 http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-address-element ## Slide 172 https://codepen.io/websanity/pen/jOWJZaj?editors=1000 ## Slide 173 http://codepen.io/websanity/pen/djmCE https://www.hplovecraft.com/writings/texts/fiction/cdw.aspx ## Slide 175 https://www.w3.org/TR/2013/NOTE-html5-author-20130528/the-hgroup-element.html#the-hgroup-element https://html.spec.whatwg.org/multipage/sections.html#the-hgroup-element https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hgroup ## Slide 176 http://www.w3.org/html/wg/drafts/html/CR/common-idioms.html#sub-head ## Slide 177 https://www.w3.org/TR/html52/common-idioms-without-dedicated-elements.html#subheadings-subtitles-alternative-titles-and-taglines ## Slide 178 https://www.w3.org/TR/html52/common-idioms-without-dedicated-elements.html#subheadings-subtitles-alternative-titles-and-taglines ## Slide 179 https://www.w3.org/TR/html52/common-idioms-without-dedicated-elements.html#subheadings-subtitles-alternative-titles-and-taglines ## Slide 180 https://www.w3.org/TR/html52/common-idioms-without-dedicated-elements.html#subheadings-subtitles-alternative-titles-and-taglines ## Slide 181 https://www.w3.org/TR/html52/common-idioms-without-dedicated-elements.html#subheadings-subtitles-alternative-titles-and-taglines ## Slide 182 https://caniuse.com/#feat=mdn-html_elements_nav https://caniuse.com/#feat=mdn-html_elements_article https://caniuse.com/#feat=mdn-html_elements_aside https://caniuse.com/#feat=mdn-html_elements_section https://caniuse.com/#feat=mdn-html_elements_header https://caniuse.com/#feat=mdn-html_elements_footer https://caniuse.com/#feat=mdn-html_elements_hgroup ## Slide 187 http://www.whatwg.org/specs/web-apps/current-work/multipage/grouping-content.html#the-p-element ## Slide 188 http://codepen.io/websanity/pen/udpsi ## Slide 189 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 190 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 191 Free-floating text might not go in a

 — e.g., you might use a

,

, or
  •  — but it has to go into something ## Slide 192 http://www.whatwg.org/specs/web-apps/current-work/multipage/grouping-content.html#the-hr-element ## Slide 193 http://codepen.io/websanity/pen/FhdKw ## Slide 195 http://www.whatwg.org/specs/web-apps/current-work/multipage/grouping-content.html#the-blockquote-element ## Slide 196 http://codepen.io/websanity/pen/kxwte ## Slide 197 Chris’s Rule ## Slide 198 Eddie’s Rule ## Slide 200 http://www.whatwg.org/specs/web-apps/current-work/multipage/grouping-content.html#the-figure-element ## Slide 204 http://www.whatwg.org/specs/web-apps/current-work/multipage/grouping-content.html#the-figcaption-element ## Slide 205 http://codepen.io/websanity/pen/aFjLq ## Slide 208 Eli’s Rule ## Slide 210 https://codepen.io/websanity/pen/KrLREG?editors=1000 ## Slide 211 OK, the other exception is  , discussed in Character Entities ## Slide 212 http://www.whatwg.org/specs/web-apps/current-work/multipage/grouping-content.html#the-pre-element Note that CSS can change all of these default characteristics ## Slide 213 https://en.wikipedia.org/wiki/ASCII_art ## Slide 214 https://en.wikipedia.org/wiki/ASCII_art ## Slide 215 http://codepen.io/websanity/pen/mjBox From “[in Just-]” by e. e. cummings ## Slide 216 https://www.granneman.com/personal/journals/2003westcoast/20030810 ## Slide 217

    &

     are both block-level elements; 

    does not respect space while

     does, so it makes no sense to put a 
     inside a 

    ## Slide 218 http://www.whatwg.org/specs/web-apps/current-work/multipage/grouping-content.html#the-main-element ## Slide 221 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main.html http://caniuse.com/#feat=html5semantic ## Slide 228 http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-br-element ## Slide 229 http://codepen.io/websanity/pen/KFEjm From Robert Frost’s “Stopping by Woods on a Snowy Evening” ## Slide 231 https://codepen.io/websanity/pen/pogrqgv?editors=1100 Text from H.P. Lovecraft’s “The Dunwich Horror” ## Slide 232 https://codepen.io/websanity/pen/pogrqgv?editors=1100 Text from H.P. Lovecraft’s “The Dunwich Horror” ## Slide 234 https://codepen.io/pen?editors=1100 ## Slide 235 https://codepen.io/pen?editors=1100 ## Slide 236 https://codepen.io/pen?editors=1100 ## Slide 238 https://codepen.io/websanity/pen/yLeoQwB?editors=1100 ## Slide 239 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 ## Slide 240 Chris’s Rule ## Slide 241 http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-wbr-element ## Slide 242 http://codepen.io/websanity/pen/jtJLD ## Slide 244 http://codepen.io/websanity/pen/giFtl?editors=100 ## Slide 248 https://codepen.io/websanity/pen/KOvaRx?editors=1100 ## Slide 249 http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-em-element ## Slide 250 http://codepen.io/websanity/pen/tKFoA ## Slide 251 http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-strong-element ## Slide 252 http://codepen.io/websanity/pen/uhoLB ## Slide 253 http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-i-element ## Slide 254 http://codepen.io/websanity/pen/IvxmJ ## Slide 255 http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-b-element ## Slide 256 http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-b-element ## Slide 257 http://codepen.io/websanity/pen/xjJhE Why is that text bold? Because it’s more important? Because it should be strongly emphasized? Or because it looks nice bold? http://heartbleed.com http://www.hplovecraft.com/writings/texts/fiction/mm.aspx ## Slide 258 http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-mark-element ## Slide 259 http://codepen.io/websanity/pen/lzJop ## Slide 260 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/data https://en.wikipedia.org/wiki/Microsoft_Edge https://developer.microsoft.com/en-us/microsoft-edge/platform/status/dataelement/?q=data ## Slide 261 http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-s-element ## Slide 262 http://codepen.io/websanity/pen/xynaj ## Slide 263 http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-u-element ## Slide 264 http://codepen.io/websanity/pen/CbfGj ## Slide 265 https://lh3.ggpht.com/-lDHkH919w48/TavRb0BbjaI/AAAAAAAAA9k/tVqkSuW8698/s1600/POW2.jpg ## Slide 266 Gerhyrah’s Rule ## Slide 269 https://codepen.io/websanity/pen/RXZKBp?editors=1100 ## Slide 270 http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-small-element ## Slide 271 http://codepen.io/websanity/pen/smfIb?editors=100 ## Slide 272 http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-small-element ## Slide 273 http://codepen.io/websanity/pen/lhkwu ## Slide 274 http://codepen.io/websanity/pen/lhkwu ## Slide 277 https://codepen.io/websanity/pen/jgLBWJ?editors=1100 ## Slide 278 http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-sub-and-sup-elements ## Slide 279 http://codepen.io/websanity/pen/CIwoA ## Slide 280 http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-sub-and-sup-elements ## Slide 281 http://codepen.io/websanity/pen/JsDmB ## Slide 283 http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-code-element ## Slide 284 http://codepen.io/websanity/pen/hLguw ## Slide 285 https://codepen.io/websanity/pen/GVvWjx?editors=1100 ## Slide 286 http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-code-element ## Slide 287 http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-code-element ## Slide 288 http://codepen.io/websanity/pen/ngdLx ## Slide 290 http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-q-element ## Slide 291 http://codepen.io/websanity/pen/KHFqk ## Slide 292 https://html.spec.whatwg.org/multipage/rendering.html#quotes http://www.iana.org/assignments/language-subtag-registry/language-subtag-registry ## Slide 294 “Weekend Update Segment - Chris Farley as Bennett Brauer”. Saturday Night Live, March 19, 1994. . ## Slide 297 i2 = −1 defined imaginary numbers ## Slide 298 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 299 Minus sign is slightly thinner than en dash & has a sliver of space between itself & adjacent characters ## Slide 302 https://codepen.io/websanity/pen/aeyJpm?editors=1100 ## Slide 303 http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-dfn-element ## Slide 304 http://codepen.io/websanity/pen/FwEqx ## Slide 305 http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-abbr-element Abbreviation examples: MO (Missouri), USMC (United States Marine Corps.) Supported by IE 7, Edge 12, Firefox 4, Safari 3, iOS Safari, Chrome 4, Chrome for Android ## Slide 306 http://codepen.io/websanity/pen/xythK ## Slide 307 SPecial Executive for Counter-intelligence, Terrorism, Revenge and Extortion ## Slide 308 http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-cite-element ## Slide 309 https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-cite-element ## Slide 310 http://codepen.io/websanity/pen/lwGzK ## Slide 312 http://codepen.io/websanity/pen/kxwte ## Slide 315 http://www.whatwg.org/specs/web-apps/current-work/multipage/grouping-content.html#the-div-element ## Slide 316 http://codepen.io/websanity/pen/tEHnx http://www.hplovecraft.com/writings/texts/fiction/cdw.aspx ## Slide 317 http://codepen.io/websanity/pen/tEHnx http://www.hplovecraft.com/writings/texts/fiction/cdw.aspx ## Slide 318 http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-span-element ## Slide 319 http://codepen.io/websanity/pen/EKvas ## Slide 324 http://www.whatwg.org/specs/web-apps/current-work/multipage/grouping-content.html#the-li-element ## Slide 325 https://codepen.io/websanity/pen/xxKeLeZ?editors=1000 ## Slide 327 http://www.whatwg.org/specs/web-apps/current-work/multipage/grouping-content.html#the-ul-element ## Slide 328 http://codepen.io/websanity/pen/ECcLp ## Slide 329 http://www.whatwg.org/specs/web-apps/current-work/multipage/grouping-content.html#the-ol-element ## Slide 330 http://codepen.io/websanity/pen/FhwCo https://en.wikipedia.org/wiki/Gnomes_(South_Park) ## Slide 331 a (lowercase letters), A (uppercase letters), i (lowercase Roman numerals), I (uppercase Roman numerals), & 1 (Arabic numerals) ## Slide 332 https://caniuse.com/#feat=ol-reversed ## Slide 334 http://codepen.io/websanity/pen/BjJdZd?editors=110 ## Slide 336 http://codepen.io/websanity/pen/DpGHo ## Slide 337 http://codepen.io/websanity/pen/GthmI ## Slide 339 http://codepen.io/websanity/pen/mIkfw ## Slide 341 http://codepen.io/websanity/pen/Jheac ## Slide 342 https://html.spec.whatwg.org/multipage/grouping-content.html#the-menu-element ## Slide 343 https://codepen.io/websanity/pen/LYGjXRN?editors=1100 ## Slide 344 https://codepen.io/websanity/pen/LYGjXRN?editors=1100 ## Slide 346 https://caniuse.com/#feat=menu — note that this is not up to date! ## Slide 347 http://www.whatwg.org/specs/web-apps/current-work/multipage/grouping-content.html#the-dl-element ## Slide 348 http://codepen.io/websanity/pen/oxFmq https://en.wikisource.org/wiki/The_Call_of_Cthulhu/Chapter_II ## Slide 349 http://www.whatwg.org/specs/web-apps/current-work/multipage/grouping-content.html#the-dt-element ## Slide 350 http://www.whatwg.org/specs/web-apps/current-work/multipage/grouping-content.html#the-dd-element ## Slide 351 http://codepen.io/websanity/pen/oxFmq https://en.wikisource.org/wiki/The_Call_of_Cthulhu/Chapter_II ## Slide 353 http://codepen.io/websanity/pen/ifwxB ## Slide 354 https://en.wikipedia.org/wiki/Tsathoggua ## Slide 355 David’s Rule ## Slide 356 Eddie’s Rule ## Slide 359 http://codepen.io/websanity/pen/oxnzL https://en.wikipedia.org/wiki/URL https://tools.ietf.org/html/rfc3986 ## Slide 360 http://codepen.io/websanity/pen/oxnzL https://en.wikipedia.org/wiki/URL https://tools.ietf.org/html/rfc3986 ## Slide 361 http://codepen.io/websanity/pen/oxnzL https://en.wikipedia.org/wiki/URL https://tools.ietf.org/html/rfc3986 ## Slide 362 http://codepen.io/websanity/pen/oxnzL https://en.wikipedia.org/wiki/URL https://tools.ietf.org/html/rfc3986 ## Slide 363 http://codepen.io/websanity/pen/oxnzL https://en.wikipedia.org/wiki/URL https://tools.ietf.org/html/rfc3986 ## Slide 364 http://codepen.io/websanity/pen/oxnzL https://en.wikipedia.org/wiki/URL https://tools.ietf.org/html/rfc3986 ## Slide 365 http://www.whatwg.org/specs/web-apps/current-work/multipage/text-level-semantics.html#the-a-element For a list of values possible for the type attribute, see https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types ## Slide 366 http://codepen.io/websanity/pen/mjith ## Slide 375 https://www.nytimes.com ## Slide 387 Actually, more than just a file or folder, but I’m keeping this simple Windows will accept / as a path separator, but not on the command line, because / was used as a switch delimiter (e.g., /all) in MS-DOS 1.0 ## Slide 406 Brackets’ Live Preview is a web server! ## Slide 408 http://codepen.io/websanity/pen/lGfLw ## Slide 411 https://css-tricks.com/use-target_blank/ ## Slide 412 https://css-tricks.com/use-target_blank/ ## Slide 413 https://css-tricks.com/use-target_blank/ “About rel=noopener: What problems does it solve?”: https://mathiasbynens.github.io/rel-noopener/ ## Slide 414 Good, short fake id’s to use: #_, #null, #0 ## Slide 416 http://codepen.io/websanity/pen/Bflri ## Slide 418 https://www.chainsawonatireswing.com/2015/05/03/a-guide-to-getting-webmail-services-to-work-with-mailto-links/ ## Slide 421 http://www.hplovecraft.com/creation/sites/rhode.aspx ## Slide 422 https://developer.apple.com/library/content/featuredarticles/iPhoneURLScheme_Reference/MapLinks/MapLinks.html ## Slide 423 https://tools.ietf.org/pdf/rfc5870.pdf ## Slide 424 https://msdn.microsoft.com/en-us/library/windows/apps/xaml/jj635237.aspx https://msdn.microsoft.com/en-us/library/dn217138.aspx https://docs.microsoft.com/en-us/windows/uwp/launch-resume/launch-maps-app https://developer.android.com/guide/components/intents-common.html#Maps https://developers.google.com/maps/documentation/urls/guide ## Slide 425 Again, Brackets’ Live Preview & Visual Studio Code’s Live Server is a web server ## Slide 427 https://en.wikipedia.org/wiki/Don%27t_repeat_yourself ## Slide 429 http://www.whatwg.org/specs/web-apps/current-work/multipage/the-map-element.html#the-map-element ## Slide 430 http://www.whatwg.org/specs/web-apps/current-work/multipage/the-map-element.html#the-area-element For a list of values possible for the type attribute, see https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types ## Slide 431 http://codepen.io/websanity/pen/AJGjz?editors=100 Image from http://www.lovecraftcountry.com/comic/map.shtml, under a Creative Commons Attribution-NonCommercial-ShareAlike 2.5 license ## Slide 432 http://codepen.io/websanity/pen/AJGjz?editors=100 Image from http://www.lovecraftcountry.com/comic/map.shtml, under a Creative Commons Attribution-NonCommercial-ShareAlike 2.5 license ## Slide 435 https://codepen.io/websanity/pen/VwezRqz?editors=1000 ## Slide 436 http://www.whatwg.org/specs/web-apps/current-work/multipage/semantics.html#the-link-element For a list of values possible for the type attribute, see https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types ## Slide 438 https://twitter.com/googlewmc/status/1108726443251519489 https://twitter.com/igrigorik/status/1108881728653967365 ## Slide 439 https://html.spec.whatwg.org/multipage/links.html https://caniuse.com/#search=link%20element%20rel ## Slide 440 https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types https://html.spec.whatwg.org/multipage/links.html#rel-alternate https://html.spec.whatwg.org/multipage/links.html#rel-icon https://html.spec.whatwg.org/multipage/links.html#link-type-nofollow https://code.google.com/archive/p/shortlink/wikis/Specification.wiki ## Slide 441 https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types https://html.spec.whatwg.org/multipage/links.html#link-type-preconnect https://html.spec.whatwg.org/multipage/links.html#link-type-prefetch https://html.spec.whatwg.org/multipage/links.html#link-type-preload https://html.spec.whatwg.org/multipage/links.html#link-type-prerender https://html.spec.whatwg.org/multipage/links.html#link-type-dns-prefetch ## Slide 442 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link ## Slide 443 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link ## Slide 444 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link ## Slide 445 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link ## Slide 446 http://microformats.org/wiki/existing-rel-values#HTML5_link_type_extensions ## Slide 447 http://microformats.org/wiki/existing-rel-values#HTML5_link_type_extensions ## Slide 448 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link Subresource Integrity, W3C Recommendation 23 June 2016: https://www.w3.org/TR/SRI/ ## Slide 451 https://www.srihash.org/ (2020-06-30) ## Slide 452 https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS ## Slide 453 https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS XMLHttpRequest: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest Fetch APIs: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API @font-face: see the CSS - Typography presentation WebGL textures: https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL drawImage(): https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage CSS Shapes from images: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Shapes/Shapes_From_Images ## Slide 454 https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin ## Slide 455 https://granneman.com ## Slide 456 https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS ## Slide 457 https://caniuse.com/#feat=mdn-http_headers_access-control-allow-origin ## Slide 458 https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin ## Slide 459 https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin ## Slide 460 https://caniuse.com/#feat=mdn-html_elements_link_rel https://caniuse.com/#feat=link-rel-dns-prefetch https://caniuse.com/#feat=link-rel-preconnect https://caniuse.com/#feat=link-rel-prefetch https://caniuse.com/#feat=link-rel-preload https://caniuse.com/#feat=link-rel-prerender https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link ## Slide 461 https://caniuse.com/#feat=mdn-html_elements_link_integrity https://caniuse.com/#feat=mdn-html_elements_link_crossorigin ## Slide 464 Replaced block-level? A replaced element with display: block applied to it, or one that is floated. ## Slide 465 http://www.whatwg.org/specs/web-apps/current-work/multipage/edits.html#the-img-element ## Slide 466 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 ## Slide 468 http://codepen.io/websanity/pen/EjwvL ## Slide 475 https://imgplaceholder.com/#!#font-glyphicons ## Slide 476 https://imgplaceholder.com/#!#font-glyphicons ## Slide 477 https://imgplaceholder.com/#!#font-glyphicons ## Slide 478 https://imgplaceholder.com/#!#font-glyphicons ## Slide 479 https://codepen.io/websanity/pen/eQbJPv?editors=1000 ## Slide 480 https://unsplash.com ## Slide 481 https://picsum.photos/ ## Slide 482 https://dummyimage.com/ ## Slide 483 https://codepen.io/websanity/pen/eQbJPv ## Slide 484 Https://placeholder.com ## Slide 485 https://placeholder.com/600x250/333/ff8000&text=The+Call+of+Cthulhu ## Slide 486 https://codepen.io/websanity/pen/eQbJPv?editors=1000 ## Slide 487 http://placebear.com ## Slide 488 http://www.fillmurray.com ## Slide 489 http://www.placecage.com ## Slide 490 http://imsky.github.io/holder/ ## Slide 491 https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types https://caniuse.com/#feat=webp ## Slide 492 https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types https://caniuse.com/#feat=apng ## Slide 493 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture ## Slide 495 https://caniuse.com/#feat=picture ## Slide 496 http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#the-video-element ## Slide 498 http://www.jwplayer.com/html5/ https://developer.apple.com/library/archive/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/AudioandVideoTagBasics/AudioandVideoTagBasics.html#//apple_ref/doc/uid/TP40009523-CH2-SW1 ## Slide 499 http://www.jwplayer.com/html5/ https://developer.jwplayer.com/articles/html5-report/tag-attributes-and-apis/autoplay-loop-muted.html ## Slide 500 https://codepen.io/websanity/pen/rvYRwV?editors=1000 ## Slide 501 http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#the-source-element ## Slide 502 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source ## Slide 503 https://en.wikipedia.org/wiki/Media_type https://mimesniff.spec.whatwg.org/ ## Slide 504 https://en.wikipedia.org/wiki/Media_type ## Slide 505 https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Complete_list_of_MIME_types ## Slide 506 https://www.iana.org/assignments/media-types/media-types.xhtml ## Slide 507 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source ## Slide 509 https://codepen.io/websanity/pen/sEKHp?editors=1000 ## Slide 510 https://codepen.io/websanity/pen/sEKHp?editors=1000 ## Slide 512 http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#the-track-element ## Slide 514 WebVTT: http://dev.w3.org/html5/webvtt/ Live WebVTT Validator: http://quuz.org/webvtt/ TTML: http://www.w3.org/TR/ttaf1-dfxp/ ## Slide 516 http://codepen.io/websanity/pen/BqKxy ## Slide 517 https://caniuse.com/#feat=ogv https://caniuse.com/#feat=ogg-vorbis https://caniuse.com/#feat=mpeg4 https://caniuse.com/#feat=hevc https://caniuse.com/#feat=webm ## Slide 518 For Mac, also see Media Converter (media-converter.sourceforge.net) For Windows, also see Freemake Video Converter (www.freemake.com) Others include Amazon Elastic Transcoder (aws.amazon.com/elastictranscoder/) & Handbrake (handbrake.fr) ## Slide 519 http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#the-audio-element ## Slide 522 https://codepen.io/websanity/pen/PeOLJB?editors=1000 ## Slide 524 http://codepen.io/websanity/pen/AcxhF ## Slide 525 https://caniuse.com/#feat=ogg-vorbis https://caniuse.com/#feat=mp3 https://caniuse.com/#feat=aac https://caniuse.com/#feat=webm https://caniuse.com/#feat=wav ## Slide 526 For Mac, also see Media Converter (media-converter.sourceforge.net) For Windows, also see Freemake Audio Converter (www.freemake.com) Others include Amazon Elastic Transcoder (aws.amazon.com/elastictranscoder/) & Handbrake (handbrake.fr) ## Slide 527 Matt’s Rule ## Slide 528 video: https://caniuse.com/#feat=video audio: source: http://www.standardista.com/browsers/web-development-for-the-iphone-html-css-js-support/ (Safari support) track: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/track ## Slide 529 http://www.whatwg.org/specs/web-apps/current-work/multipage/the-iframe-element.html#the-iframe-element ## Slide 530 http://codepen.io/websanity/pen/JGLbk ## Slide 532 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe ## Slide 534 https://codepen.io/websanity/pen/PooYOrX ## Slide 535 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe https://caniuse.com/#feat=iframe-srcdoc ## Slide 536 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/frame More about Frames in the Bonus section at the end ## Slide 537 http://www.whatwg.org/specs/web-apps/current-work/multipage/the-iframe-element.html#the-object-element ## Slide 539 http://www.whatwg.org/specs/web-apps/current-work/multipage/the-iframe-element.html#the-param-element ## Slide 540 http://codepen.io/websanity/pen/FHwsd ## Slide 541 http://www.whatwg.org/specs/web-apps/current-work/multipage/the-iframe-element.html#the-embed-element ## Slide 544 https://www.granneman.com/presentations/html-css-responsive-web-design#tables--lists-organized-data ## Slide 547 https://www.granneman.com/presentations/html-css-responsive-web-design#forms ## Slide 550 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details ## Slide 551 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary ## Slide 552 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary ## Slide 553 https://codepen.io/websanity/pen/BajwjMB?editors=1100 ## Slide 554 https://codepen.io/websanity/pen/BajwjMB?editors=1100 ## Slide 555 https://codepen.io/websanity/pen/BajwjMB?editors=1100 ## Slide 556 https://codepen.io/websanity/pen/BajwjMB?editors=1100 ## Slide 557 https://codepen.io/websanity/pen/BajwjMB?editors=1100 ## Slide 558 https://codepen.io/websanity/pen/oNbGbRa?editors=1100 ## Slide 559 https://codepen.io/websanity/pen/oNbGbRa?editors=1100 ## Slide 560 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary ## Slide 561 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog ## Slide 565 http://www.whatwg.org/specs/web-apps/current-work/multipage/scripting-1.html#the-script-element http://chimera.labs.oreilly.com/books/1230000000545/ch11.html#RESOURCE_INLINING Other resource inlining examples: