Ne sous-estimez pas car ce langage déclaratif contient de très nombreuses balises qui font probablement déjà une grande partie de ce que vous souhaitez!

Tags et attributs HTML

Une liste complète et tenue à jour est disponible sur le site du MDN (Mozilla Developer Network).

audio

Ce tag, ainsi que l’API WebAudio, permettent d’ajouter des effets sonores dans un jeu web, ainsi que des musiques d’ambiance. Toutefois, prenez garde car la musique pourra être difficile à gérer pendant la navigation du joueur (il ne faut pas que la musique reparte de zéro à chaque page!) et pourra également gêner le joueur qui, peut-être, a déjà mis ses propres musiques en arrière-plan. En revanche, les effets sonores pourront être joués via ces API, et seront du plus bel effet pour notifier un évènement (une attaque en approche, un bâtiment qui est construit, une demande diplomatique, etc).

@contenteditable

L’attribut contenteditable=contenteditable vous permet de rendre un élément HTML modifiable par l’utilisateur, ce qui peut vous être utile pour faire des éditeurs “what you see is what you get”. Couplé aux API Print, il vous sera alors possible de faire des aperçus avant impression presque en temps réel! Sachez toutefois qu’il existe aussi des bibliothèques prêtes à l’emmploi, comme CK Editor, qui peuvent aussi remplir ce rôle (mais qui rajoutent de la complexité).

datalist

L’attribut datalist permet de spécifier des valeurs que le navigateur doit proposer pour l’auto-complétion d’un champ de formulaire. Cela peut être très pratique pour, par exemple, proposer la complétion d’un champ de recherche, ou celle d’un champ “Destinataire” dans la page des échanges commerciaux de votre jeu.

form

La balise form et l’interface HTMLFormElement associée permettent de créer des “entrées utilisateurs”, c’est à dire des formulaires pour que le joueur puisse communiquer ses intentions et décision au jeu. La moitié de votre jeu web sera en fait composée de formulaire (déguisés et stylisés ou non) pour que le joueur puisse vraiment jouer. L’autre moitié sera consacrée à montrer au joueur l’impact de ces décisions.

iframe

A ne pas confondre avec les

frameset
, dépréciées, les
iframe
(et l’interface JS HtmlIframeElement qui va avec) permettent d’afficher un document web (pas forcément une page web!) dans un autre. Vous pouvez ainsi proposer des thumbnails au survol d’un lien, des fenêtres modales (les liens s’ouvriront dans l’iframe au lieu de s’ouvrir dans l’onglet courant) ou pour poster un formulaire form sans recharger l’onglet. Elles vous offriront également une séparation claire entre les composants de votre page (un document peut communiquer avec une iframe et inversement, mais les deux ne se marchent pas dessus, contrairement à un JS qui fait une requête AJAX, et insère la réponse HTML dans la page courante).

input

Il existe énormément de types d’input. Utilisez-les au maximum, et laissez tomber les interfaces embarquées dans votre site, comme un sélecteur de fichier custom ou un calendrier pour choisir une date: utilisez juste le bon type d’input, et le navigateur l’adaptera au support. Ainsi, un input type=date sera présenté sous la forme d’un calendrier classique sur PC, et sur la forme d’un calendrier à “rouleaux” sur mobile (en plus, le navigateur pourra interfacer ce calendrier avec l’agenda Outlook/Thunderbird de l’utilisateur).

Servez-vous aussi des différents attributs de validation comme required=required, pattern=... ou accept=, qui permettront au navigateur de proposer des entrées utilisateurs adaptées et de vérifier que ces entrées sont justes (n’oubliez pas de les valider aussi côté serveur!). Dans les cas les plus complexes, recourrez au Javascript et à setCustomValidity('...') pour détecter les erreurs dans le formulaire avant de l’envoyer.

Enfin, les attributs form=formID (indique à quel formulaire ce contrôle appartient), formaction (poste le formulaire à une adresse spécifique) ou formenctype (multipart/formdata pour les POST contenant des données binaires, application/x-www-form-urlencoded pour les autres) vous seront aussi utiles.

menuitem

Le tag menuitem vous permettra de rajouter des éléments au “clic droit” (en pratique, il s’agit du “menu contextuel”, car les mobiles aussi en disposent même s’ils n’ont pas de “clic droit”). Cela peut servir pour lister les ordres que vous pouvez donner à une unité ou un bâtiment, à ajouter un lien pour signaler un bogue, ou à proposer des actions de déplacement pour les troupes de votre jeu. Attention tout de même à bien le dire explicitement aux joueurs, en inscrivant directement quelque part que ce clic droit est utile (les utilisateurs n’ont pas forcément le réflexe de faire un clic droit pour voir les options d’un site web: vous participerez donc à leur éducation!). Notez que le menu contextuel pourra être différent suivant l’élément HTML où vous avez cliqué droit, et que les options que votre site rajoute ne remplaceront pas les options natives du navigateur (donc, ce sera bien mieux que les bricolages javascript qui suppriment le clic droit pour afficher une

div
à la place). Attention tout de même à la faible compatibilité avec les navigateurs, même récents (2017).

@ping

Ajouté à une balise a, l’attribut ping indique au navigateur de faire une requête GET à destination de chaque adresse contenue dans la valeur de cet attribut, si et seulement si l’utilisateur clique sur ce lien et que ce dernier n’est pas “cassé” (le lien aboutit quelque part). C’est idéal pour faire des KPI sans violer les utilisateurs (qui peuvent probablement désactiver ce ping s’ils ne souhaitent pas être pistés).

@rel

L’attribut rel indique la nature de la relation entre deux documents (dans une balise a ou link). Les plus courants sont stylesheet et icon, mais first|previous|next|last sont aussi très utiles (dans un blog, un gamebook, les règles d’un jeu ou pour passer de case en case sur une carte) ou encore prefetch|prerender|preload (qui indique au navigateur de pré-charger la page ciblée, pour qu’elle s’affiche instantanément si l’utilisateur clique sur le lien a).

script

L’attribut

language
est obsolète, et
type
n’est pas requis s’il s’agit d’un Javascript. Nul besoin de commenter le contenu du script via
//<!-- ... // --&g;
(c’était pour les vieux navigateurs). Inutile d’échapper les éléments HTML à l’intérieur des balises script, mais les séquences </script <!-- et <script ne doivent jamais s’y trouver (échappez bien les données utilisateurs avant de les insérer dans une balise script, via json_encode). Enfin, les attributs defer et async vous permettront de charger certains scrip)ts en asynchrone, ou après le chargement du DOM de la page web (plus besoin d’encapsuler votre code dans un onload). Voir aussi HTMLScriptElement sur le MDN.

@target

Cet attribut vous permet de spécifier un “contexte de navigation” dans lequel un lien a sera ouvert, ou dans lequel un form doit être envoyé. C’est très pratique pour faire du multi-onglet (il n’y a pas que la valeur _blank!) ou pour gérer des composants à base d’iframe.

template

Placez du code HTML dans un tag template, et vous pourrez très facilement le cloner et le customiser dans votre Javascript (cf HTMLTemplateElement). Cela vous évitera donc de faire des piles de

document.createElement
ou de passer par l’horrible
$('&lt;div&gt;...&lt;/div&gt;')
de jQuery (souvent injectable, sans coloration syntaxique, et sous-optimale car reparsée à chaque fois par le navigateur).

document.querySelector('...').appendChild(
  document.importNode(
    document.querySelector('.my-template').content,
    true /* = deep clone*/));

wbr

La balise wbr indique au navigateur qu’il peut couper un mot à cet endroit. Le caractère UTF-8 ­ permet de faire de même, mais un tiret sera ajouté en cas de coupure. Utilisez le premier pour indiquer une cassure dans une expression de mots accolés (par exemple,

$object&lt;wbr/&gt;->property
) et le second pour indiquer où couper un mot un peu long (comme
anti&shy;constitution
).

Structure HTML

Les hashfragments

Ajoutez des id aux éléments de vos pages web auxquels vous voulez faire référence, comme les titres h1 h2 h3... d’un blog (le plugin “Table Of Content+” de WordPress le fait automatiquement), les widgets/cadres composant la page (la carte du jeu, le panneau de contrôle du joueur, etc). Cela permettra aux joueurs de partager des liens pointant vers ces éléments spécifiques (bon pour un blog ou une rubrique d’aide), ou aux développeurs de faire une référence précise à un élément, comme pour une sprite SVG.

Liens utiles