Elements

＜a＞

• the text inside a link should describe it (don't just say something like "click here")
• don't use hyperlinks without href to handle clicks (ex. for opening a modal) - use a <button> instead

＜datalist＞

• holds a set of <option> elements to be shown as suggestions in an <input> element, while still letting the user enter a custom value
  • supports <optgroup>
• supports these <input> types:
  • text
  • month, week, date, time, datetime-local
  • range
  • color

<datalist id="apps">
    <option value="Obsidian"></option>
    <option value="Apple Notes"></option>
    <option value="OneNote"></option>
    <option value="Notion"></option>
</datalist>

<label>
    <span>What is your favorite notes app?</span>
    <input type="text" list="apps" />
</label>

＜dialog＞ (modals/popups)

• makes it easy to create popups that can either be modal (block interaction with the rest of the page), or non-modal
• call .show() to show non-modally, or .showModal() to show modally
  • showModal() will render everything outside the dialog [[#inert]]
• to close, either call .close(), or submit a form inside the modal with method="dialog"
  • Esc will close modal dialogs by default
• set the autofocus attribute on a child to focus it when the dialog opens
• style a modal dialog's backdrop using the ::backdrop pseudo-element
• the :modal pseudo-class will target only modal dialogs (as well as fullscreen elements)

• to animate show/hide:

dialog, [popover] {
    transition-property: opacity, display;
    transition-duration: 0.25s;

    /* when setting `display: none`, keeps the element visible until the end of the transition */
    transition-behavior: allow-discrete;

    @starting-style {
        /* triggers fade in when showing */
        opacity: 0;
    }
}

dialog:not([open]) {
        /* triggers fade out when hiding */
        opacity: 0;
    }
}

[popover]:not(:popover-open) {
        /* triggers fade out when hiding */
        opacity: 0;
    }
}

Dismiss by clicking outside contents

• to dismiss a dialog by clicking outside the contents:
  • make the <dialog> element fill the screen, and remove its default styles
  • place the contents in a wrapper element
  • add a click listener to the <dialog> that closes it, but only if the <dialog> itself was clicked

<dialog>
    <div>Contents go here</div>
</dialog>

dialog {
  border: none;
  background: none;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;

  &::backdrop {
    all: unset;
  }

  > :first-child {
    max-width: 100%;
    max-height: 100%;
    overflow-y: auto;
  }
}

document.querySelector('border').addEventListener('click', function (e) {
    if (e.target === this) {
        this.close()
    }
})

＜details＞ and ＜summary＞ (accordions)

• Use the open attribute to open and close

<details name="exclusive" style="padding: 10px; border: 1px solid currentColor;">
    <summary>Click to open</summary>
    <p>This text is inside the details element</p>
</details>

Exclusive accordions

• If multiple <details> elements have the same name attribute, only one can be open at a time
  • supported in Chrome and Safari as of December 2023

＜fieldset＞ and ＜legend＞

• Group a set of form controls together with an optional title

<fieldset>
    <legend>Flavors</legend>
    <label>
        <input type="radio" name="flavor" value="chocolate">
        Chocolate
    </label>
    <label>
        <input type="radio" name="flavor" value="vanilla">
        Vanilla
    </label>
    <label>
        <input type="radio" name="flavor" value="strawberry">
        Strawberry
    </label>
</fieldset>

Heading best practices

• Each page should only have one <h1> which describes the entire page
• Don't skip heading levels (ex. don't nest <h3> inside <h1> without an <h2> in between)

＜hgroup＞

• Group a header (<h1> - <h6>) with any number of related <p> elements

＜img＞

alt vs. title attributes

The alt attribute is used by screen readers, and is shown if the image fails to load. It should contain text that can replace the image. It should not repeat information that is already provided in the text accompanying the image.

The title attribute is displayed in a tooltip on hover. It should contain text that supplements the image, like a title or caption. It works on any element, not just img.

<img
    src="./mona-lisa.jpg"
    alt="Painting of a smiling woman, sitting with her arms folded"
    title="Mona Lisa, Leonardo da Vinci, 1503-1506"
/>

Alt text for image links

If an image is also a hyperlink, the alt text should describe the function of the link.

＜input＞ and ＜label＞

• use the for attribute even if an <input> is nested within its <label>, as some screen readers don't understand the implicit relationship

＜link＞

Preload files

• assume styles.css loads font1.woff2 and font2.woff2, and script.js fetches data.json
• without preloading, the download chain looks like this, with items on the same level loading in parallel:
  • styles.css
    • font1.woff2
    • font2.woff2
  • script.js
    • data.json
• with preloading, we can load all the files in parallel
  • note that only the second-tier files use rel="preload"

<head>
    <link rel="stylesheet" href="styles.css" />
    <script src="script.js"></script>

    <!-- preloading -->
    <link rel="preload" as="font" crossorigin href="font1.woff2" type="font/woff2" />
    <link rel="preload" as="font" crossorigin href="font2.woff2" type="font/woff2" />
    <link rel="preload" as="fetch" href="data.json" type="application/json" />
</head>

• valid embed types
  • font requires the crossorigin attribute - see CORS-enabled fetches on MDN
  • using crossorigin with as="fetch" may cause the preloaded file to be discarded in Chromium and Safari
    • when using fetch() in JavaScript to fetch the preloaded file, set credentials: 'include' and mode: 'no-cors', and do not include any custom headers

Preload JavaScript modules

• downloads the module, but also compiles it so it's ready to execute
• no as attribute required

<head>
    <link rel="modulepreload" href="module.js" />
</head>

＜menu＞

• behaves identically to <ul>, but can be used as a semantic alternative

＜meta＞

• <meta name="viewport"> is used to adjust the layout viewport size on mobile - see CSS#Layout

＜script＞

async vs. defer

• normal scripts:
  • block parsing
  • executed as soon as available
• async scripts:
  • downloaded in parallel with parsing
  • executed as soon as available
  • should be used for completely independent scripts (not dependent on the DOM or other scripts)
    • if an async script depends on another, small script, make the other script inline and place it above the async script
• defer scripts:
  • downloaded in parallel with parsing
  • executed after the document is parsed
    • DOMContentLoaded will not fire until deferred scripts finish executing
  • guaranteed to run in the order they appear in the document
  • scripts with type="module" are deferred by default
  • use for anything that can't be async
• async and defer are both ignored for inline scripts

See also

• Everything I Know About The Script Tag

＜section＞

• on content-based pages, should always have a heading (may not apply to web applications)

＜table＞

• border-spacing: [horizontal] [vertical] adjusts the gap between cells
• border-collapse: collapse removes the gap between cells (overrides border-spacing), and prevents borders from doubling up
  • borders on <tr> have no effect unless border-collapse: collapse is set
• border-radius must be applied to td, not <th>/<tr>
  • if you want backgrounds to respect the border radius, you may need to set them on <td>

<table>
  <caption style="caption-side: bottom">
    Front-end web developer course 2021
  </caption>
  <thead>
    <tr>
      <th scope="col">Person</th>
      <th scope="col">Most interest in</th>
      <th scope="col">Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Chris</th>
      <td>HTML tables</td>
      <td>22</td>
    </tr>
    <!-- ... -->
  </tbody>
  <tfoot>
    <tr>
      <th scope="row" colspan="2">Average age</th>
      <td>33</td>
    </tr>
  </tfoot>
</table>

＜caption＞

• must be the first child of the table
• the caption-side CSS property can be used to set the position (top or bottom)

＜video＞

• preload attribute lets you control how much data is preloaded
  • none
  • metadata: only size, length, etc
  • auto (or empty string): can preload the whole video (but not guaranteed)

Attributes

aria-hidden

• hides elements from screen readers without removing them visually, useful for decorative or redundant elements

aria-label

• should only be used on interactive elements

hidden

• hidden or hidden="hidden": acts like display: none
• hidden="until-found": hides the element until its content is found using the Find feature, then the hidden attribute is removed
  • acts like content-visibility: hidden, meaning the element still affects layout and its box is rendered, but its contents aren't
  • the beforematch event is fired before removing the hidden attribute
  • elements that also have display: none | contents | inline won't be revealed by the Find feature

inert

popover

Toggling

• two ways to show a popover:
  • without JavaScript: create a button with popovertarget="id"
    • popovertargetaction can be set to show, hide, or toggle - default toggle
  • with JavaScript: call showPopover(), hidePopover(), or togglePopover() on the popover element
• when toggled, fires a toggle event with oldState === 'closed' and newState === 'open' or vice versa
  • beforeToggle is also fired with the same properties just before the popover is shown/hidden

<div id="popoverExample" popover="auto">This is a popover!</div>

<button popovertarget="popoverExample">Show Popover</button>

Styling

• the backdrop can be styled with ::backdrop
• :popover-open targets open popovers

• to animate show/hide:

dialog, [popover] {
    transition-property: opacity, display;
    transition-duration: 0.25s;

    /* when setting `display: none`, keeps the element visible until the end of the transition */
    transition-behavior: allow-discrete;

    @starting-style {
        /* triggers fade in when showing */
        opacity: 0;
    }
}

dialog:not([open]) {
        /* triggers fade out when hiding */
        opacity: 0;
    }
}

[popover]:not(:popover-open) {
        /* triggers fade out when hiding */
        opacity: 0;
    }
}

Events

event.target vs event.currentTarget

• event.target is the element that received the event
• event.currentTarget is always the element that the event listener is attached to
  • in the example below, if you click on the child, target is the child and currentTarget is the parent

<div id="parent" onClick="handler()">
    <div id="child"></div>
</div>

mouseover vs. mouseenter

• mouseover fires when the mouse enters the element, or a child of the element
• mouseenter doesn't bubble, so it doesn't respond to the mouse moving in and out of children
• also applies to pointerover and pointerenter

input vs. change

• input events fire every time the value of a <input>, <select>, or <textarea> element changes
• change events only fire when the change is committed by the user (ex. by hitting Enter), or the element loses focus
  • radio buttons do not fire change when they are deselected
• use change for checkboxes & radio buttons

DOMContentLoaded vs. load

The load event is fired when the whole page has loaded, including all dependent resources such as stylesheets and images. This is in contrast to DOMContentLoaded, which is fired as soon as the page DOM has been loaded, without waiting for resources to finish loading.

The DOMContentLoaded event fires when the HTML document has been completely parsed, and all deferred scripts (<script defer src="…"> and <script type="module">) have downloaded and executed. It doesn't wait for other things like images, subframes, and async scripts to finish loading.

DOMContentLoaded does not wait for stylesheets to load, however deferred scripts do wait for stylesheets, and DOMContentLoaded queues behind deferred scripts. Also, scripts which aren't deferred or async (e.g. <script>) will wait for already-parsed stylesheets to load.

Other

Tooltip and toast accessibility

Be careful using tooltip or toast components, as they're often not accessible:

Quick test image URLs

• width / height, leave out height for a square image

https://picsum.photos/200/300

• when using the same link multiple times on a page you may get the same image, to work around this you can add a seed

https://picsum.photos/seed/seedGoesHere/200/300

Load CSS asynchronously

<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="styles.css"></noscript>