HTML Basics - martindubenet/wed-dev-design GitHub Wiki

Usefull and valid HTML markup that should be used more often

• aria-pressed="true/false" for a toggle switch,

Instead of polluting the HTML with invalid HREF attribute values like href="#" or href="javascript:…" in order to show a pointer cursor, since this is a styling issue, you should use a W3 valid HTML markup:

<a role="button" aria-pressed="false"> 
    Underlined + Pointing cursor links
</a>
<a role="button" aria-pressed="false" class="btn">
    Pointing cursor buttons
</a>
<button type="button" aria-pressed="false">
    Pointing cursor buttons
</button>

To make it look clickable rely on this CSS:

a[role="button"] {
    cursor: pointer;
    text-decoration: none;
}
a[role="button"][aria-pressed="false"]:not(.btn)
button[aria-pressed="false"] {
    text-decoration: underline;
}

Fill in the (North American) 10 digits phone number, including regional code, without any punctuation.

<a href="tel:1234567890" role=button title="Click to call">
    (123) 456-7890
</a>

Clicking on a href="mailto:[email protected]" launch the user's default email application as set on his device and starts un new E-mail addressed to «[email protected]».

Simple email

<a href="mailto:[email protected]" role=button>
    Click to Email
</a>

But we can also code other parameters using those mailto like in this example:

<a href="mailto:[email protected][email protected],
  [email protected]&[email protected]&subject=Big%20News&body=Body-goes-here"
  role=button>
    Click to Email
</a>

1. Seperators:
   1. ? : Required as the first seperator.
   2. & : Seperates any additionnal parameter after the first one.
   3. , : Comma + white-space seperates an array of emails.
   4. %20 : Replace white spaces in URLs.
2. Mail Fields:
   1. cc= : CC (Carbon Copy).
   2. bbc= : BCc (Blind Carbon Copy) or CCi in French.
   3. subject= : Subject.
   4. body= : Email body.

This attribute allow us to set a keyboard shortcut combination associated with the browser that we use. See each browser’s shortcut on Wikipedia for a reference.

Bootstrap use it as a feature of their v.5 documentation

The tabindex attribute allow a manipulation of the focus on DOM elements using tab key [↦] on the keyboard.

1. Google Developers fundamentals ➥ Focus order : tabindex
2. Mozilla Developers ➥ Global attribute : tabindex

The <details> HTML element creates a disclosure widget in which information is visible only when the widget is toggled into an "open" state. An string or inline HTML tags must be provided wrapped in <summary> element located within the <details> container. - (MDN)

HTML

<details>
  <summary>Controller</summary>
  Lorem ipsum
</details>

CSS

details { boder-left: 2px solid blue; }
details[open] { border-left-color: green; }

See an interactive example in this CodePen

• https://blog.webdevsimplified.com/2023-04/html-dialog/

Use the <search> tag to contain filter and search forms in the DOM and consistent accesskey on your buttons <search><form action="…">…</form></search>

<search class="filter">
  <h2>Filter by criteria</h2>
  <form action="…">
    <fieldset>…</fieldset>
    <fieldset class="action">
      <button type="submit" accesskey="s" title="Submit [S]"><span aria-label="Confirm your selection">✅</span></button>
      <button type="reset" accesskey="r" title="Reset [R]"><span aria-label="Reset all fields">❌</span></button>
    </fieldset>
  </form>
</search>
<article>
  <h2>Your selection</h2>
  …
</article>

The <mark>highlight</mark> tag is for highlighting inline text with a Yellow background-color. The color can be managed by CSS.

It share the same UI as the <progress> but is for displaying volumes or quantities of content (scalar value within a known range or a fractional value).

<label for="fuel">Fuel level:</label>
<meter id="fuel" min="0" max="100" low="33" high="66" optimum="80" value="50">at 50/100</meter>

Note that both popover attributes and <dialog> tags refers to modal windows but their usage differs.

<button popovertarget="my-popover">Call To Action</button>
<div popover id="my-popover">
   …
</div>

<portal> enables the embedding of another HTML page into the current one like <iframe> do but without allowing interactivity with the DOM of that embedded page.

Portals are given a default label which is the <title> attribute content of the embedded page. If no title is present the visible text in the preview is concatenated to create a label. The aria-label attribute can be used to override this.

<portal id="exampleportal" src="https://example.com/"></portal>

<label for="file">File progress:</label>
<progress id="file" max="100" value="70">70%</progress>
<!-- OR -->
<progress id="file" max="100" value="70" aria-valuenow="70%" />

<template id="ancestor-component">
  <nested-component exportparts="part1, part2, part5"></nested-component>
</template>

<table role="grid" cellpadding="0" cellspacing="0" align="center">
    <caption>Describe what this table is about</caption>
    <thead>
        <tr>
            <th scope="col" valign="middle">Table heading col.1</th>
            <th scope="col" valign="middle">Table heading col.2</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td colspan="2">Table footer joined cells</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <th scope="row">Table body col.1, row heading</th>
            <td rowspan="2">Table body col.2 joined with the cell of the next row below</td>
        </tr>
        <tr>
            <th scope="row">Table body col.1, row heading</th>
        </tr>
    </tbody>
</table>

Part of the Web Components technology suite, <slot> is a child element of a <template> tag. It gives the flexibility to group separate DOM trees, populated with their unique contents, and present them together. Read about Using templates and slots.

<template id="my-list">
  <style>…</style>
  <h3>List title</h3>
  <slot name="list-item">First item</slot>
  <slot name="list-item">Second item</slot>
</template>

Note that the above example is a poor semantic. It would be better looping <li>item</li> within a <ul for>.

The <title>…</title> tag is for naming the HTML document. The only valid location is within the HTML <head> tag and only one.

The title="…" global attribute contains text representing advisory information related to the element it is declared on. You could call them a sort of « Alt Text Tooltip », although this term will never be promoted as this officially.

This attribute can be used as needed within a same HTML <body> tag, but only one attribute per tag is valid.

It is important to know that because of the unsuported :hover state on touchscreen devices, these attributes are today seen as deprecated. The WCAG accessibility good practices is to replace the use of title by the aria-label attributes. Doing so is bether for Screen Reader devices support but you loose the practicle native tooltip for all your other users.

Ignatius Bagussuptra came up with this CSS (kinda) hack to add a tooltip to display the text string (value) of an aria-label meta attribute as a native tooltip like the obsolete title allow us.

/* arrow pointing to the element */
[aria-label]::before {
  content: '';
  opacity: 0;
  pointer-events: none;
  position: absolute;

  /* customize this yourself */
  bottom: -0.2rem;
  left: 2.5rem;
  border-right: 0.5rem solid transparent;
  border-bottom: 0.5rem solid rgb(48, 64, 81);
  border-left: 0.5rem solid transparent;
  transition: opacity 0.2s;
}
/* tooltip text container */
[aria-label]::after {
  content: attr(aria-label);
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  position: absolute;

  /* customize this yourself */
  bottom: 0;
  left: 0;
  display: flex;
  padding: 0.25rem 0.375rem;
  border-radius: 0.25rem;
  transition: opacity 0.2s;
  transform: translateY(100%);
  background-color: rgb(48, 64, 81);
  color: white;
}
/* only show the tooltip on hover */
[aria-label]:hover::after,
[aria-label]:hover::before {
  opacity: 1;
  pointer-events: auto;
}

• Dive Into HTML5
• 1idweb Sandboxes
  • type-html5
  • type-xhtml-trans
  • type-html4
  • email-XHTML