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. It can be used as needed within a same HTML <body> tag, but only one attribute per tag is valid.

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