Voilà, voilà... Fin de l'aventure...

 

Fermeture de kolossaldrupal.org dans...


Bonjour tout le monde,

Drupal évolue, les versions changent et Kolossaldrupal.org était essentiellement consacré à la version 6 de Drupal.

Autant dire que les infos présentées ici commencent à dater...

Faute de temps, je ne peux plus garder le site Kolossaldrupal à jour...

Je vous aurais bien proposé de reprendre le flambeau mais... c'est tellement simple de nos jours de se faire son propre site à soi...Pourquoi s'embêter alors ? :-)

Ce site restera donc en l'état, tel qu'il était en 2011...

Ah la la ! Cela ne nous rajeunit pas !

Manuel Vila - Avril 2016

Respecter une sémantique correcte pour votre thème

Référence en anglais sur drupal.org : 27 Août 2009 - 02h22 - http://drupal.org/node/44072


Les éléments sémantiques (x)HTML apportent du sens. Le balisage sémantique associé aux CSS est aussi la principale façon de séparer le contenu de sa présentation. Par essence, l'HTML sémantique est de l'HTML sans toutes ses propriétés, balises et éléments de mise en forme.

Dans le temps, nous utilisions des balises HTML pour la mise en forme, telles que font, strike et u. L'ennui c'est que ces éléments ne nous disaient rien sur la signification du contenu.

POSH

POSH est l'acronyme de Plain Old Semantic HTML. POSH est un acronyme facile à retenir qui résume la simplicité et l'avantage qu'il y a à utiliser du balisage sémantique. Vous en apprendrez davantage sur POSH sur les pages POSH de microformats.org.

Humains vs Machines

Le balisage sémantique est principalement destiné aux machines. Bien qu'elles puissent déterminer la signification d'un texte, elles le feront plus facilement en comprenant le contexte où il apparaît. Ce contexte est l'HTML sémantique.

Validation

En (x)HTML sémantique, il est primordial que le balisage soit correct.

Les validateurs en ligne regardent les entêtes dans l'ordre dans lequel ils sont passés au navigateurs. Vous pouvez placer le contenu dans un ordre donné puis utiliser des CSS pour l'afficher dans un ordre différent. Le validateur regardera l'ordre initial.

Un problème courant est la présence d'une barre latérale gauche qui vient avant tout contenu, et que cette barre démarre avec un élément h2. La balise h2 apparaîtra avant la balise h1 du nom du site. Ce thème fera échouer la validation WCAG (WAI) au niveau AA.

D-theme.org comporte des thèmes-exemples avec des boutons de validation en bas de la page.

Accessibilité

Disposez votre contenu au début (dans l'ordre d'apparition), puis les intertitres / sous-titres et les barres latérales. Avec cette structure, la balise h1 devient le nom de la page.

pour les malvoyants, le nom de la page est plus important que d'avoir le nom du site sur chaque page, hormis sur la page d'accueil. Quand ils cherchent « exemple » ils veulent un site qui démarre à « exemple.com ». Quand ils cherchent « Orange et Saumon Chili », ils veulent les pages intitulées « Orange et Saumon Chili » et non « exemple.com ».

Les malvoyants veulent le résumé dans le premier paragraphe et comme premier contenu pour voir si la page est utile. Quelques moteurs de recherches accorde une plus grande importance au premier paragraphe d'une page. Les améliorations pour les malvoyants aideront l'optimisation pour les moteurs de recherche (SEO - Search Engine Optimization).

h1 comme Nom de site ou Nom de page

Les anciennes normes HTML ont un exemple de page dans laquelle le sujet de la page se trouve dans la balise h1. La norme HTML indique «Un élément titre présente brièvement le sujet de la section qu'il débute. ». Un titre de page présente la page, pas le site, sur chaque page sauf la page d'accueil.

Il est donc légitime d'utiliser la balise h1 pour le nom du site sur la page d'accueil et h1 pour le titre de la page sur les autres pages. Si la page d'accueil utilise le nom du site comme titre de la page alors il « décrit brièvement le sujet qu'il débute».

Drupal vous permet d'utiliser un fichier page-front.tpl.php ou d'utiliser la variable $is_front dans des instructions conditionnelles. Plusieurs thèmes Drupal en font usage pour montrer le nom du site dans une balise h1 sur la page d'accueil (et/ou d'autres pages sans titre) et dans un div ou un span pour toutes les autres pages.

Référence POSH

Voici une liste d'éléments sémantiques (x)HTML avec leur explication. N'hésitez pas à en ajouter ou à discuter ces explications.

Éléments Bloc

div
Fournit un sectionnement plein de sens. Sont souvent imbriqués et utilisés pour grouper des éléments ou des contenus apparentés tels que titres, barres latérales, zones de contenu et pieds de page.
h1-h6
Ces six niveaux de titres sont utilisés pour présenter et décrire les sections de contenu. Il est d'usage de n'utiliser qu'un h1 par page - Une page a un seul titre principal et plusieurs sous-sections avec des h2 et/ou h3 comme titres.
p
L'élément paragraphe et utilisé pour baliser et délimiter un bloc de texte.
blockquote
Signale une grande ou substantielle citation.
address
Dans un document, ou une grande partie d'un document, signale des coordonnées pour le contact. Peut être utilisé en association avec le microformat hCard.

Éléments de liste

ul, ol, li
Les listes sont utilisées pour afficher des informations groupées qui sont plus parlantes sous forme d'énumération. Souvent utilisé pour le balisage des menus (une liste de liens). ol affiche une liste ordonnée tandis que ul affiche une liste non ordonnée. li affiche un élément de la liste. Les listes peuvent être imbriquées.
dl, dt, dd
Affiche une liste de termes, accompagnés de leur définition. Souvent utilisé dans le balisage des FAQ.

Éléments Inline

a
Habituellement utilisé avec un attribut href pour signaler une ressource externe ou un point d'ancrage dans le même document.
abbr
Indique une abréviation. Vient souvent en attribut d'un titre.
acronym
Utilisé pour baliser des acronymes. Souvent accompagné d'un titre.
em
Utilisé pour accentuer une texte (le rendre plus important).
strong
Utilisé pour accentuer l'accentuation précédente. Comme em mais encore plus accentué.
cite
indique des informations bibliographiques, des citations personnelles ou des références.
code
indique un échantillon de code-source.
dfn
Déclare la première instance d'un terme dans un document. La valeur sémantique de dfn est sujette à discussion.
del
Signale une information qui a été effacée d'un document. Remplace sémantiquement l'élément strike, désapprouvé.
ins
Le contraire de del. Indique une texte ajouté pendant les réécritures.
samp
Échantillon d'une sortie d'ordinateur ou de scripts. Ce peut être ou ne pas être du code-source.
span
Élément générique inline utilisé lorsqu'un élément sémantique serait inadéquat. Les éléments span n'ont pas de valeur sémantique.
q
Indique une citation inline.
kbd
Signale un texte saisi par l'utilisateur. Rarement utilisé mais utile dans certaines circonstances dans lesquelles vous faites la démonstration d'un logiciel, avec également code et samp.
sub, sup
Position indice et exposant d'un texte. Souvent utilisé pour signaler les notes en bas de page.
var
Comme avec code, samp, kbd, l'élément var signale une variable (ou un argument d'un code-source).

Éléments de formulaires

label
Cet élément sert à décrire des éléments de formulaire.

Éléments de tableaux

table
Balise pour débuter un tableau
thead
Déclare la zone en-tête d'un tableau, qui contient normalement les en-têtes (th) de chaque colonne.
tfoot
Déclare le bas du tableau, qui contient des données relatives aux colonnes du tableau.
tbody
Le contenu du tableau.
caption
Décrit le tableau. Essentiellement un titre pour le tableau
th
Titre d'une colonne. Signale le type de donnée dans la rangée ou la colonne du tableau.
td
Une case du tableau, dont le contenu correspond à l'intersection d'une rangée et d'une colonne.

Cette page présente un aperçu des balises structurantes XHTML (pour comparer le rendu selon les navigateurs).