How (and why) to use shadow DOM, now that the declarative syntax is here.

https://www.youtube.com/watch?v=8Z8H2NEbLtE

shadow DOM has lower precedence than regular styles

(X, Y, Z)
#id, classes and attrs, elements

[id="myid"] is (0,1,0) not (1,0,0)!

You can duplicate classes to increase specificity! (0, 4, 0)
.button.button.button.button
or
.button {
&&& {
}
}

is( .button, #hammertime )
.button:not(#id1#id2) -> "impossible" because two IDs, (2, 0, 0)!

Decreasing specificity

:where( .button) -> (0,0,0)

** Very useful for css reset!
input:where([type="checkbox"])

17:55 - meta keyword in sass

** Might need to use !important in layers (dialog: display:none)

The <dl>, or description list, element is underrated.

It's used to represent a list of name–value pairs. This is a common UI pattern that, at the same time, is incredibly versatile. For instance, you've probably seen these layouts out in the wild…

<dl>
    <dt>Title</dt>
    <dd>Designing with Web Standards</dd>
    <dt>Publisher</dt>
    <dd>New Riders Pub; 3rd edition (October 19, 2009)</dd>
</dl>

Correction in the thumbnail: This video was shot on April 2023

• It's not HTML5 or CSS3 - it's just 'html' and 'css'!
• https://developer.mozilla.org/en-US/docs/Web/HTML - Good documentation but not the spec!
• https://html.spec.whatwg.org/
• Content model - What is legal to nest
• Transparent: a > h1 is ok, but p > a > h1 not ok!
• https://caninclude.glitch.me/
• preload preconnect prefetch prerender for links
• Get your head straight: https://www.youtube.com/watch?v=UW1PEMBdX5E
• <header><main><footer> are important!
• Subheading <hgroup><h1><p> - Not <hgroup><h1><h2>
• Upgrade Your HTML (4 books)
• <menu> - like <ul>
• script - defer async type="module" nomodule
• <template id="mytable"> - Don't have to put html in javascript
• JavaScript is expensive, HTML is almost free!

The real question is whether the <a> element alone is an appropriate representation of a <button>. On a semantic level, there is a distinct difference between a link and a button.

A button is something that when clicked causes an action to occur.

A link is a button that causes a change in navigation in the current document. The navigation that occurs could be moving within the document in the case of fragment identifiers (#foo) or moving to a new document in the case of urls (/bar).

If you're concerned about the semantics and accessibility of using an <a> element (or <span>, or <div>) as a button, you should add the following attributes:

<a role="button" tabindex="0" ...>...</a>

Every element I use for the basic structure of a HTML document, with explanations why.

Usually when I start a new project, I either copy the HTML structure of the last site I built or I head over to HTML5 Boilerplate and copy their boilerplate.

https://html5boilerplate.com/

• The Main Element
• The Section Element
• The Aside Element
• The Article Element
• The Nav Element
• The Footer Element

HTML5 Doctor has a really handy flowchart to help answer that question:
http://html5doctor.com/downloads/h5d-sectioning-flowchart.png

An Exhaustive List of all the Elements you need to have/test Before Launching your Website To Production.

Everybody knows about web forms, right? Make a