Skip to content

HTML Basics

Jump to bottom
Martin Dubé edited this page May 13, 2024 · 39 revisions

Usefull and valid HTML markup that should be used more often

 

Best practices

Use available ARIA attributes for your hooks

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

Valid anchors and controllers without an href attribute

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;
}

Clickable « Mail to » and telephone links

tel:

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>

mailto:

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

Simple email

<a href="mailto:someone@example.com" role=button>
    Click to Email
</a>

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

<a href="mailto:someone@example.com?cc=someoneelse@example.com,
  another@example.com&bcc=lastperson@theirsite.com&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.

accesskey

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

How Bootstrap layed out accesskey instructions for their users

tabindex

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

 

Advance HTML for UI

Accordion HTML5 native tags : <details>+<summary>

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

Dialogs

Filters

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>

Mark

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

Meter

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>

Popover modals : popovertarget+popover id

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 for a static preview of a website

<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>

Progress bar

<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%" />

Nested parts using exportparts

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

Table as data grids

<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>

Template slots

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>.

 

<title> tag VS title attribute

HTML title tag

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

HTML title attribute

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.

Accessibility aria-label VS title

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.

Native tooltip

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;
}

 

References

 

 

My wikis

[ Content edition ][ Web dev & design ][ PHP ][ Wordpress ] md

MartinDube.net

Clone this wiki locally