Boucle Modèles HTML

Modèles HTML de boucle pour contenu répétitif

Un modèle HTML de boucle définit une unité répétitive unique et la remplit de contenu dynamique provenant d'articles, de produits ou de fiches de projet. Vous choisissez un bloc d'élément prédéfini, vous l'adaptez aux entrées que vous publiez, et la boucle génère ce balisage pour chaque enregistrement. Rien n'est dupliqué manuellement : un seul bloc détermine l'affichage de toute la grille.

Où s'arrête le modèle et où commence le contenu

La confusion fréquente avec les boucles provient de la confusion entre le modèle et l'élément. Un modèle contient des emplacements vides : souvent une zone d'image, un titre et une ligne de métadonnées. Modifiez le nom d'un produit et un seul enregistrement est modifié ; modifiez le balisage et toute la grille se décale instantanément.

Cette séparation laisse la boucle avec trois parties mobiles :

1. Le balisage de l'élément, qui fixe la hiérarchie et l'ordre de lecture ;

2. Les champs dynamiques, qui intègrent des valeurs dans ce balisage ;

3. La grille externe, qui détermine le nombre d'éléments affichés côte à côte.

Ces trois éléments déterminent si un modèle prédéfini est utilisable. Un bloc d'élément avec deux champs ne pourra pas contenir d'entrées à cinq champs.

Différences entre les ensembles de champs selon les boucles

Toutes les boucles ne contiennent pas d'image, de titre et de description. L'ensemble de champs dépend du type de contenu et détermine ce que le lecteur remarque en premier.

Trois cas courants illustrent ces différences :

1. Dans une boucle d'article, la date, l'auteur et l'extrait sont liés au titre, de sorte que l'extrait ne le surpasse jamais ;

2. Dans une boucle d'événement, la date et le lieu sont prioritaires, ce qui confère plus d'importance au bloc horaire qu'à l'image ;

3. Dans une boucle d'annuaire, la catégorie, l'adresse et les coordonnées sont affichées, avec le bouton d'action à côté.

Ces trois boucles utilisent une même structure, mais la pondération des champs varie. Adapter un modèle à cette pondération représente la majeure partie du travail de sélection. Adapter la mise en page d'un article à des enregistrements d'événements implique de réorganiser les champs.

Préserver l'ordre du contenu quelle que soit la taille de l'écran

Les blocs répétés sont lisibles sur un grand écran, mais deviennent plus difficiles à lire lorsque les colonnes se replient. L'important est alors que chaque enregistrement conserve sa cohérence : image au-dessus de son titre, prix à côté de son nom, action associée à son entrée.

Le contenu d'exemple masque ce problème, car les éléments de démonstration ont généralement la même hauteur. Des difficultés apparaissent lorsqu'un titre de projet s'étend sur trois lignes et que le suivant ne comporte quasiment aucune description. Il est conseillé de charger vos entrées les plus longues et les plus courtes dans un modèle choisi avant de publier à grande échelle.

Dans Nicepage, l'élément Grille place les éléments répétés dans des cellules adaptatives ; le guide de conception web adaptative décrit ses commandes.

Un modèle HTML en boucle est pertinent lorsque la structure, la lisibilité et l'ordre des données sont préservés quel que soit le nombre d'enregistrements et la largeur de l'écran.