Les balises HTML de base pour votre site Joomla

Lors de la création d'un article dans un site Joomla, vous avez peut-être été confronté à un affichage qui ne correspondait pas à vos attentes. Bien souvent cela provient du code HTML, un peu malmené lorsqu'on débute. Or il n'est pas toujours aisé de savoir lire le HTML et repérer quelles sont les balises utilisées et à quoi elles servent.

Nous allons donc expliquer, pas à pas, de façon simple et accessible, comment accéder au code HTML de vos articles Joomla et expliquer les balises HTML de base.
La plupart des principes évoqués dans cet article peuvent également vous permettre de mieux comprendre la construction d'une newsletter.

Pourquoi et comment accéder au code source de votre article

L'accès au code source (le code HTML) est souvent provoqué par une situation d'incompréhension de l'affichage de l'article dans un navigateur (une couleur surprenante, des tailles de polices non homogènes, un décalage d'un élément par rapport à d'autres ...).
Connaitre quelques rudiments pour parcourir le HTML va vous faire gagner un temps précieux mais aussi vous apporter d'autres avantages.

Votre site construit dans les "règles de l'art", pour optimiser votre référencement

1- Il faut savoir qu'un code HTML "propre" est hautement apprécié des moteurs de recherche et un site qui présente cette caractéristique va être apprécié comme un site de qualité, donc bénéficier d'un avantage par rapport à d'autres, en matière de référencement.
"Propre" signifie sans styles css (couleur de police, taille de police, espaces en caractères gras, ...) insérés dans le HTML, et également sans balises de titres vides ou désordonnées.
Les exemples ci-dessous illustrent ce qui est à éviter :
<h1 style="color:#000; font-size:20px">Titre principal de l'article</h1>
<p><strong></strong>Paragraphe de texte</p>
<p style="text-decoration:underline"></p>
<h2> </h2>

Nous allons apprendre à identifier mais aussi corriger ces anomalies.

2- Un second point lié au référencement concerne vos titres de paragraphe qui doivent respecter une hiérarchie cohérente comme par exemple :

en d'autres termes :

• 1 seul titre h1 par page (pour rappel le titre h1 doit contenir un mot-clé lié à votre référencement)
• après le titre h1, on doit trouver un titre h2
• il peut y avoir un seul ou plusieurs titres h2 dans une page
• après un titre h2, on doit touver un titre h3 (ou h2 s'il n'y a pas de h3 sur la page)
• il peut y avoir un seul ou plusieurs titres h3 dans une page, etc...

Savoir repérer les titres h1, h2, h3 ... au sein du HTML va vous permettre de corriger rapidement toute anomalie dans cette hiérarchie, et donc de vous conformer à cette règle hiérarchique qui permet aux moteurs de recherche de parcourir votre site de façon ordonnée.

Comment accéder au code HTML

L'accès au code source s'effectue via l'onglet "Code" de JCE dans ses versions les plus récentes ou par une icône ressemblant à celle-ci  sous une version plus ancienne ou d'autres éditeurs.

L'erreur à ne pas commettre

Lorsque vous copiez-collez un texte en provenance de Word dans votre article Joomla, n'utilisez jamais l'icône "Coller avec styles" ou . En effet les nombreux styles de Word seront alors collés dans votre article, il sera alors très laborieux de les éliminer.

Il faut impérativement utiliser l'icône "Coller du texte brut" ou , et effectuer au sein de l'article Joomla votre mise en forme (titres de paragraphe, sauts de lignes, mise en gras etc...).

Améliorez vos affichages au sein de composants Joomla

Un certain nombre de composants Joomla, tels que RSForm, permettent l'insertion de HTML en particulier pour :

• insérer un lien (voir notre article "Comment réaliser un formulaire de contact compatible RGPD") au sein d'un champ de formulaire,
• apporter couleur et taille de police aux noms de certains champs de formulaire, afin de structurer celui-ci

Egalement, les templates Gantry sont associés à des outils (particles) très simples à paramétrer où il est souvent possible d'insérer un contenu textuel. Ces champs "texte" acceptent l'insertion de HTML. Ci-dessous un exemple simple :

Conclusion : progresser dans votre lecture/prise en mains du HTML, va vous permettre d'améliorer la qualité globale de votre site d'un point de vue technique mais aussi au niveau de l'expérience utilisateur. Même si l'impact sur le référencement est difficile à mesurer, les notions de HTML propre et d'expérience utilisateur sont des points importants au sein des algorithmes des moteurs de recherche pour valoriser les pages web.

Principes de base du HTML appliqués à Joomla et JCE

Les principales balises délimitent et encadrent leur contenu, par exemple <h1> encadre "titre1" en ouverture, avec une fermeture par </h1>. Ce qui donne dans le HTML  : <h1>titre1</h1>

Ce principe de balise ouvrante et fermante s'applique pour les balises ci-dessous :

<h1>...</h1> : titre du paragraphe principal de la page (un seul par page)
<h2>...<h2> : titre de paragraphe de niveau 2 (puis <h3>, <h4> ...)
<p>...</p> : paragraphe
<div>...</div> : il s'agit d'une partie (ou section) qui structure un contenu, une <div> est en général un conteneur d'autres balises telles que <p>, <h2> etc...
<a>...</a> : la balise qui contient les liens
<ul>...</ul> : le conteneur d'une liste (les <li>)
<li>...</li> : les éléments d'une liste ul
<table>...</table> : notion de tableau avec des lignes et des colonnes (voir le chapitre ci-dessous)
<stong>...</strong> : encadre du texte en gras en utilisant l'icône 
<span style="...">...</span> : à utiliser de façon ponctuelle, encadre du texte avec un style spécifique à cette zone de texte (par exemple souligné). Si ce syle est récurrent, il faudra utiliser une classe css (voir plus loin dans cet article).

Lors de la rédaction des articles Joomla, vous trouverez 3 exceptions notables ne comportant qu'une seule balise auto-fermante (et non pas ouverture-fermeture) :

<hr id="system-readmore" /> : séparateur entre le texte d'introduction et la suite du contenu, affiché via le bouton "Lire la suite" en bas de l'éditeur
<br/> : ceci apparaît lorsque vous avez effectué un saut de ligne simple (en appuyant sur "Maj" et "Entrée")
<img src="/images/logo.jpg" alt="description de l'image"/> : balise permettant l'insertion d'une image

Comprendre les listes avec ul et li :

Pour mettre en liste plusieurs éléments, il faut :

1-les saisir dans l'éditeur
2-les sélectionner en prenant soin de ne pas sélectionner ce qui est en-dessous
3-cliquer sur l'icône de liste telle que 

Pour une sous-liste, il faut procéder comme ci-dessus, en insérant les éléments de la sous-liste :

1-créer tous les éléments liste et sous-liste,
2-sélectionner tous les éléments et cliquer sur l'icône de liste,
3-sélectionner uniquement les éléments de la sous-liste (en prenant soin de ne pas sélectionner l'élément en-dessous),
4-cliquer sur l'icône "Augmenter le retrait" 

Le résultat donnera par exemple :

La notion de conteneur

Vous insérez votre contenu dans des <p>, <h1> etc... sans y penser, en utilisant la touche "Enter" pour sauter une ligne, en utilisant la liste déroulante de la barre d'icône pour indiquer votre titre1, en utilisant l'icône de liste etc...

Ces conteneurs prennent, par défaut, toute la largeur de l'espace qui leur est disponible (celle de l'article ou du module, par exemple). Le mode de fonctionnement standard du HTML consists à placer ces différents conteneurs les uns en-dessous des autres, comme présenté ci-dessous :

On remarque que les images et les liens nécessitent un conteneur, en général un paragraphe.

Les <div> sont par essence des conteneurs de conteneurs, une <div> contient en général des paragraphes.
Egalement ce dessin propose une structure en 2 colonnes avec des <div>. C'est tout l'intérêt de ces <div> de permettre une structure différente du standard du HTML d'occuper toute la largeur de l'espace.

Nous allons apprendre un peu plus loin dans cet article comment mettre en place 3 colonnes avec des <div>.

Les attributs au sein des balises

Un attribut est une "sous-balise" insérée au sein des "<" et ">" de la balise ouvrante.
Par exemple class="titreprincipal" est un attribut de <h1 class="titreprincipal">Mon titre de paragraphe principal</h1>
Par exemple style="text-align:center" est un attribut de <p style="text-align:center">Ma phrase bien centrée sur la page</p>

1- Attribut "style"

L'attribut "style" va apparaître dès que vous allez cliquer sur une icône de l'éditeur pour mettre en forme un élément HTML.
Une balise <span> peut venir s'ajouter au sein de votre balise initiale, selon l'ordre et le type de modification de forme que vous avez effectué. De plus certains éditeurs peuvent avoir un comportement légèrement différent sur ce point.

Exemple1:

	HTML	Affichage sur votre site
Situation de départ	<h2>Mon titre de niveau2</h2>	Mon titre de niveau2
Vous cliquez ensuite sur l'icône de couleur du texte  pour sélectionner une couleur	<h2 style="color:#ff6200">Mon titre de niveau2</h2>	Mon titre de niveau2
Vous cliquez sur l'icône  pour souligner	<h2 style="color:#ff6200"><span style="text-decoration:underline">Mon titre de niveau2</span></h2>	Mon titre de niveau2

Notre commentaire : le soulignement a un comportement particulier, en effet il est inséré via un <span> à l'intérieur de <h2>, et non pas en tant que "style" de h2. L'éditeur JCE implémente le style de soulignement de cette façon car souvent c'est un segment (une partie) du texte qui est soulignée. Si vous allez dans le code HTML (onglet "Code"), et que vous testez "style="text-decoration:underline", le soulignement sera affiché mais il sera impossible de l'enlever autrement qu'en retournant dans le code HTML (cliquer sur l'icône de soulignement n'aura aucun effet).

Exemple2:

	HTML	Affichage sur votre site
Situation de départ	<h2>Mon titre de niveau2</h2>	Mon titre de niveau2
Vous cliquez sur l'icône  pour souligner	<h2><span style="text-decoration:underline">Mon titre de niveau2</span></h2>	Mon titre de niveau2
Vous cliquez ensuite sur l'icône de couleur du texte  pour sélectionner une couleur	<h2><span style="color:#ff6200;text-decoration:underline">Mon titre de niveau2</span></h2>	Mon titre de niveau2

Notre commentaire : l'éditeur repère qu'il existe une balise <span>, il intègre tous les styles au sien de cette balise. Au final, l'effet est le même en affichage sur le site que l'exemple 1, mais avec un code un peu plus condensé.

Exemple3:

	HTML	Affichage sur votre site
Situation de départ	<h2>Mon titre de niveau2</h2>	Mon titre de niveau2
Vous cliquez sur l'icône  pour sélectionner une couleur ET souligner	<h2 style="color:#ff6200;text-decoration:underline">Mon titre de niveau2</h2>	Mon titre de niveau2

Notre commentaire : l'icône  a pour comportement par défaut d'insérer les styles au sein de la balise sélectionnée. Dans ce cas, nous n'avons effectué qu'une action via une seule iône. Au final, l'effet est le même en affichage sur le site que les exemples 1 et 2, mais avec un code HTML un peu plus condensé.

Exemple4:

	HTML	Affichage sur votre site
Situation de départ	<p>Mon texte avec une partie à mettre en couleur</p>	Mon texte avec une partie à mettre en couleur
Vous cliquez  sur l'icône de couleur du texte  pour sélectionner une couleur et cliquez sur "Insérer une balise span avec les styles"	<p>Mon texte <span style="color:#ff6200">avec une partie à mettre en couleur</span></p>	Mon texte avec une partie à mettre en couleur

Cet exemple est finalement le plus pertinent, bien que moins fréquent. En effet, les 3 premiers exemples doivent être gérés par des classes css, qui vont vous simplifier la vie et démontrer que votre HTML est de qualité.

2- La notion de style css

Reprenons l'exemple à éviter, évoqué en début d'article : <h1 style="color:#000; font-size:20px">Titre principal de l'article</h1>.

A moins de vous situer sur une page très spécifique, vous allez vous conformer à une des règles de base d'ergonomie qui consiste à faire en sorte que le style d'un niveau de titre de paragraphe soit identique sur toutes les pages du site. Par exemple, vous souhaitez que les titres h1 de vos pages aient une taille de 20px et une couleur noire #000.
Dans cet objectif vous allez enrichir votre fichier "custom.css" ou "custom.scss" qui se trouve souvent (cela peut différer selon le template que vous utilisez) dans le dossier "templates/_votre-template_/custom/".
Vous allez y indiquer dans cet exemple : h1{font-size:20px;color:#000}

L'objectif ici n'est pas de vous initier à l'écriture des css, mais de bien comprendre qu'à partir du moment où un style pour un élément HTML (ici h1) est renseigné, il le sera pour l'ensemble du site. C'est donc une méthode extrêmement pratique pour éliminer un grand nombre de "styles" au sein de votre HTML. De plus, si vous souhaitez modifier de nouveau le style du h1, vous ne ferez qu'une fois et cela impactera tous les h1 du site.

Au final, notre exemple devient tout simplement : <h1>Titre principal de l'article</h1>

3- Attribut "class" (classe css)

Une classe va vous être utile dès lors qu'un style va s'appliquer plus d'une fois sur votre site mais pas partout. Nous venons de voir comment mettre en place un style qui affectera tous les éléments HTML similaires sur un site. Mais par exemple, comment faire si nous souhaitons que les boutons des modules en colonne de droite de nos pages soient plus gros que ceux placés au sein des articles. Une solution consite à utiliser une classe css pour ce groupe de boutons.
C'est là qu'intervient l'attribut "class" qui va servir à appeler sélectivement la classe là où nous le souhaitons. Un nom de classe est libre , il ne doit pas commencer par un point.

Là encore notre objectif n'est pas de faire un tutoriel sur les css, mais de comprendre qu'un attribut class="bouton-droite" est associé à des styles spécifiques. Cette classe et ses styles associés sont mentionnés dans le fichier "custom.css" ou "custom.scss" évoqué précédemment.

 
4- Quelques attributs spécifiques à connaitre

La notion de table

Le conteneur <table> est encore couramment utilisé, notamment pour structurer des informations sur des pages qui sont en général consultées sur desktop. Les 4 exemples ci-dessus d'attribut "style", sont présentés avec des tables. Sur vue mobile, l'affichage de plusieurs colonnes assez larges n'est pas possible.
L'utilisation de ce conteneur <table> dépend donc de vos objectifs, du contexte et de votre cible.

Les conteneurs <table> sont assez largement utilisés pour construire des newsletters. 

Une table se décompose comme suit au sein du HTML (sans rentrer dans les détails):

La notion de ligne est apportée par les balises <tr>.
La notion de colonne est apportée par les balises <td>.
On peut tout à fait intégrer un style css au sein de ces balises (cf "style="background:#eee" pour la ligne des titres).

Ce qui donne :

Vous pouvez créer automatiquement cette structure HTML de tableau en cliquant sur l'icône  et obtenir l'écran ci-dessous :

Vous pouvez aussi cliquer sur la liste déroulante de l'icône qui affiche la possibilité de sélectionner le début de votre structure de table :

Dès que votre table est créée, la barre d'icônes  est activée, elle vous permettra de modifier votre structure.

Comment créer 3 colonnes responsive avec des DIV

La première solution pour créer 3 colonnes responsive est d'utiliser 3 modules dans des positions (selon votre template) telles que "position-1", "position-2" et "position-3". Le css intégré à votre template va gérer auomatiquement les propriétés css permettant un affichage d'une largeur de 33% sur desktop et de 100% sur mobile.

Il peut arriver que votre template soit très rudimentaire, que vous n'ayez plus de positions de modules diponibles. Egalement si vos 3 colonnes figurent elle-mêmes dans un module, normalement l'insertion de modules dans un module fonctionne, mais ce mode opératoire peut prêter à confusion. Ce chapitre un peu avancé permet donc de s'affranchir de certaines contraintes en s'appuyant sur les possibilités du HTML et des css.

Voici notre exemple de code ci-dessous :

Vous connaissez désormais le principe des classes. La classe "colonne" est associée à chacune des 3 <div>. Celles-ci vont donc avoir les mêmes propriétés css.

Le css de la classe "colonne" est le suivant (en gras les propriétés importantes):

div.colonne{
    width:30%;  /*par défaut la largeur de chaque colonne sera de 30%*/
    float:left;      /*chaque élément, s'il a la place, va venir à gauche de l'élément de la même classe, et non pas en-dessous*/
    margin:0 1%;
    border:2px solid rgba(156, 42, 40, 0.4);
    padding:15px 5px;
    margin-bottom:20px
}
@media(max-width:767px){   /*taille maximum d'un écran mobile*/
    div.colonne{
        width:100%;                  /*donc sur mobile uniquement, la largeur de chaque colonne sera de 100%*/
    }
}
.clear-colonne{
    clear:both
}

Expliquons ici une particularité (en orange) : la classe "clear-colonne" permet d'arrêter la propriété css "float:left", et de remettre le HTML en fonctionnement standard (les éléments les uns en-dessous des autres, occuper la largeur totale de leur conteneur).

Ce qui donne l'affichage suivant (que vous pouvez tester sur mobile, ou en réduisant la largeur de votre écran, ou en passant par l'inspecteur Chrome ou FF) :

Une erreur à ne pas commettre

Avantage de la version PRO de JCE

La version PRO de JCE permet de coloriser le HTML ce qui permet de s'y retrouver plus facilement.

Pour rappel, Nosyweb met à disposition de ses clients la version PRO de JCE.

Informations complémentaires

Cet article n'est bien sûr pas exhaustif, il existe de nombreuses balises HTML, vous en trouverez une liste complète sur cette page.

L'auteur : un expert à votre service

Nom : Xavier Maglott

Quel meilleur outil que Joomla pour mettre en oeuvre ce qui m'intéresse vraiment : comprendre les besoins de nos clients, apporter des solutions mais surtout des idées concrètes pour faire progresser leur site et leurs connaissances de l'univers Joomla.