Outils pour utilisateurs
Table des matières
Astuces HTML
Minimum vital pour une page HTML
<!doctype html> <html lang="fr"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1" /> </head> <body> </body> </html>
Dans le head
Empêcher Safari de parser des grands nombre comme s'ils étaient des N° de téléphone
<meta name="format-detection" content="telephone=no">
Site multilingue ? Les balises link hreflang
<link rel="alternate" hreflang="fr" href="https://www.domain.tld/fr/index" /> <link rel="alternate" hreflang="en" href="https://www.domain.tld/en/index" /> <link rel="alternate" hreflang="it" href="https://www.domain.tld/it/index" /> <link rel="alternate" hreflang="x-default" href="https://www.domain.tld/fr/index" />
- La balise x-default contient la page dans la langue par défaut du site.
Il vaut mieux mettre les URL complètes et absolues !
Flux RSS
<link rel="alternate" type="application/rss+xml" title="Mon beau flux RSS personnel" href="https://www.domain.tld/fr/rss" />
Dans le body
Lazy Loading
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" />
Attention, ça peut interférer avec certains modules js
Offset dans les <ol>
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 :
- Pippo
- Mollo
- Bolsonaro
La balise <meter>
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 <detail> : contenu au clic
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>
Je suis le texte toujours visible : cliquez moi !
Je suis le texte caché ! Coucou !
Je suis aussi le texte caché ! Salut !
La balise <mark> : Stabilo
On peut facilement stabiloter un texte ou un mot
<p>Tu ne sais <mark>rien</mark>, Jean-Neige !</p>
Tu ne sais rien, Jean-Neige !
Liens
Téléphones, SMS, Mails, etc...
Utilisez les protocoles pour facilier les liens de type téléphonie, sms, ou mail !
Download direct
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>
Formulaires
<datalist>
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>
Attention, toutes les possibilités seront visibles dans le code source.
Attention, rien n'empêche l'utilisateur d'entrer ce qu'il veut dans le champ !
type=range
Utilisez <input type=“range”> pour faire des sliders natifs !
<input type="range" id="jauge" name="jauge" min="0" max="100" step="10" value="20" />
type=search
Utilisez <input type=“search”> pour permettre d'effacer le contenu avec un petit bouton dédié !
spellcheck
Utilisez l'attribut spellcheck (sur <input> ou <textarea>) pour autoriser le navigateur à chercher les fautes d'orthographes dans le texte saisi
optgroup
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)