Utilisez l'attribut loading=“lazy” pour que les images se chargement uniquement quand elles deviennent visibles au scroll

<img src="image.jpg" loading="lazy" alt="Je suis une image fainéante">

On peut définir un offset pour les listes numérotées

<ol start="11">
  <li>Pippo</li>
  <li>Mollo</li>
  <li>Bolsonaro</li>
<ol>

Donnera :

La balise <meter> permet de faire des barres de chargement !

<label for="value1">Chargement</label> <meter id="value1" min="0" max="100" low="30" high="75" optimum="100" value="25"></meter><br />
<label for="value2">Chargement</label> <meter id="value2" min="0" max="100" low="30" high="75" optimum="100" value="50"></meter><br />
<label for="value3">Chargement</label> <meter id="value3" min="0" max="100" low="30" high="75" optimum="100" value="75"></meter><br />
<label for="value4">Chargement</label> <meter id="value4" min="0" max="100" low="30" high="75" optimum="100" value="100"></meter>

La balise <details> permet d'affiche du texte au clic (accordéon), nativement :

<details>
   <summary>Je suis le texte toujours visible : cliquez moi !</summary>
   <p>Je suis le texte caché ! Coucou !</p>
   <p>Je suis aussi le texte caché ! Salut !</p>
</details>

On peut facilement stabiloter un texte ou un mot

<p>Tu ne sais <mark>rien</mark>, Jean-Neige !</p>

Utilisez les protocoles pour facilier les liens de type téléphonie, sms, ou mail !

• mailto:

  <a href="mailto:destinataire@domain.tld?subject=Sujet&body=Coucou">destinataire@domain.tld</a>

• tel:

  <a href="tel:+33465712345">04 65 71 23 45</a>

• sms:

  <a href="sms:81212&body=PROUT">Envoie PROUT au 81212</a>

• fax:

  <a href="fax:+33465712346">Envoie moi un fax, je suis vieux</a>

• facetime:

  <a href="facetime:+33465712345">J'ai un iPhone, je suis snob</a>

• skype:

  <a href="facetime:+33465712345?call">Skypez moi, j'aime microsoft</a>
  <a href="facetime:+33465712345?chat">Skypez moi textuellement, j'aime microsoft</a>

L'attribut download permet de télécharger directement un ficher au lieu de le visionner

<a href="/path/to/file" download>Téléchargez moi !</a>

On peut aussi spécifier un autre nom de fichier au download :

<a href="/path/to/file" download="TéléchargezMoi.pdf">Téléchargez moi !</a>

Utilisez <datalist> si vous souhaitez faire un champ “autocomplete” assez facilement.

Rechercher : <input type="search" list="items">
<datalist id="items">
   <option value="Pippo">
   <option value="Mollo">
   <option value="Bolsonaro">
</datalist>

Utilisez <input type=“range”> pour faire des sliders natifs !

<input type="range" id="jauge" name="jauge" min="0" max="100" step="10" value="20" />

Utilisez <input type=“search”> pour permettre d'effacer le contenu avec un petit bouton dédié !

Utilisez l'attribut spellcheck (sur <input> ou <textarea>) pour autoriser le navigateur à chercher les fautes d'orthographes dans le texte saisi

Utilisez l'élément <optgroup> dans les <select> pour pouvoir grouper les éléments (les <optgroup> en eux-mêmes ne sont pas sélectionnables)