5549 sujets

Sémantique web et HTML

Pages :
Modérateur
(reprise du message précédent)

Donc, si les titres ne se rendent qu'à 1.1.1.1.1.1, pourquoi vouloir utiliser des titres de niveau 7 et 8 ? Tu vois où je veux en venir ? Je pense bien que tu peux structurer leurs documents avec les h1 à h6, mais peut-être que j'ai mal saisis pourquoi tu voulais des h7 et h8. Smiley confused
Merkel a écrit :
Mais, sémantiquement, le div ne donne aucune indication qu'il s'agit d'un sous-titre. J'aurais tendance à vouloir utiliser un h6 avec une class différente, même si sémantiquement ca ne désigne pas tout à fait un titre du bon niveau, mais ca désigne tout de même un titre.

Qu'est-ce que vous en pensez ?


Même si sémantiquement ça ne désigne pas tout à fait signifie en clair que cela ne signifie rien du tout.

Un <h6> ne peut pas dire autre chose que "Je suis un titre de niveau 6".

Pour une fois que HTML est sans ambiguïté, ne le tordez pas dans tous les sens Smiley cligne
zwip a écrit :


Entièrement d'accord, mais je pense que la balise div est là pour regrouper d'autres éléments (comme plusieurs titres et paragraphes) et non pour signifier un bloc de texte comme la balise P le ferait


Relisez HTML4.01 : <div> est là aussi pour ajouter de la structure.
Modérateur
Laurent, je ne crois pas le tordre dans tous les sens, c'est simplement que pour définir un titre de niveau 7, je préfère avoir ceci :

- "Je suis un titre de niveau 6"

plutôt que :

- "Je suis une division, un bloc, un simple conteneur"

Mais tu sais, ce que je dis ici, ce n'est qu'une réflexion comme ca. Je ne dis pas non plus qu'il est préférable d'utiliser un h6 pour définir un titre de niveau 7. J'ai lancé ça comme ca, pour voir les réactions. Smiley cligne Il reste qu'entre un div ou un h6, le div ne me plaît pas plus qu'un h6 "détourné", même un peu moins.
Merkel a écrit :
Donc, si les titres ne se rendent qu'à 1.1.1.1.1.1, pourquoi vouloir utiliser des titres de niveau 7 et 8 ? Tu vois où je veux en venir ? Je pense bien que tu peux structurer leurs documents avec les h1 à h6, mais peut-être que j'ai mal saisis pourquoi tu voulais des h7 et h8. Smiley confused


Non tu as raison, mais il se trouve que souvent les auteurs aiment bien rajouter un sous-titre aux titres eux-mêmes.
Cest pourquoi je me demandait si cette solution ne serait pas la bonne dans ce cas précis :
<hn>titre <span>sous titre</span></hn>


De plus j'utilise moi-même pour la présentation du site au moins les 3 premiers titres.
Modifié par zwip (15 Feb 2005 - 20:55)
Modérateur
zwip a écrit :
Non tu as raison, mais il se trouve que souvent les auteurs aiment bien rajouter un sous-titre aux titres eux-mêmes.


En fait, un sous-titre, c'est comme ceci :

1. Ma famille
1.1. Mon père
1.2. Ma mère
1.3. Mes frères
1.3.1 Stéphane
1.3.2 Sylvain

Ca sert à séparer le document en plusieurs parties. Si je te dis ça, c'est que j'ai l'impression que lorsque tu parle d'un sous-titre, tu veux dire une ligne de texte sous le titre, et non d'un sous-titre en tant que tel. Si c'est seulement une phrase qui se trouve sous un titre, j'utiliserais un p ou simplement un span en dehors (ou un span en dedans ? à méditer) de la balise hx. Le mieux serait que tu nous donne un exemple concret de ton sous-titre en question.
Modifié par Merkel (15 Feb 2005 - 21:03)
Je viens de vérifier, le pire que j'ai rencontré est 7 niveaux de titre, et c'est déjà pénible de s'y retrouver Smiley biggol
Moi j'ai une question, quel est ce fameux texte qui a besoin de titres de septième niveau ?

Sérieusement, j'ai écrit un bouquin de plus de 700 pages et je suis rarement descendu au niveau 5. Et encore ... quand je parle de niveau 5 je considère que le titre du livre est l'unique niveau 1, donc je suis déjà sympa (j'aurai probablement du parler de niveau 4).
Le niveau 7 ça me fait rêver, je suis convaincu qu'il s'agit presque à coup sûr d'une mauvaise organisation des idées, trop hiérarchique et peu lisible.

Vous avez un texte concret à me montrer en ligne que j'essaie de comprendre ?
Ceci dit, pour répondre à la question, si ce qui est utilisé est réellement un titre, qu'il est bien vu comme tel, j'aurai plutot tendance à mettre un <h6> avec une classe. Ca "dégrade" pas si mal (au pire tout sera au 6° niveau, ça ne devrait pas être dramatique).

Si ce sont plus des introductions de paragraphe, peut être que ça vaut le coup de mettre sous forme de <p> mais je reste septique. L'idée de liste (ordonnées ou de définition) me semble mauvaise vu qu'en général ça alourdit encore plus la lecture (déjà que les pauvres gens devront se taper 8 niveaux à retenir pour la compréhension ...)

Encore une fois, avec un exemple concret ça sera plus facile de répondre, je doute qu'il y ai une réponse générique.
Les titres ordonnés, c'était un exemple.
Autre exemple :


(entete du site comme celui du forum sur lequel on est)
<h1>Le titre du site</h1>
<h2>la rubrique du site</h2>
<h3>la sous-rubrique du site</h3>

<h4>le sujet du document</h4>
<h5>Un exemple de ce que j'interprète comme sous titre</h5> 
<h6>Un titre</h6> 
<h7>Un titre</h7> 
<h8>Un titre</h8> 

<h1>Association machin chose</h1>
<h2>L'association pour les tout petit</h2>
<h3>Actualité</h3>

<h4>Petite Enfance</h4>
<h5>Espace Donald machin chose</h5>
<p>texte</p>
<h6>La crèche familiale</h6>
<p>texte</p>
<h6>Assistantes maternelles</h6>
<p>texte</p>
<h7>Vous souhaitez faire garder votre enfant ?</h7>
<p>texte</p>
<h8>Permanence d'accueil :</h8>
<p>texte</p>
<address>texte</address>

Modifié par zwip (15 Feb 2005 - 21:49)
Ganf a écrit :

Le niveau 7 ça me fait rêver, je suis convaincu qu'il s'agit presque à coup sûr d'une mauvaise organisation des idées, trop hiérarchique et peu lisible.


Oui, c'est souvent le cas
Modérateur
zwip a écrit :


<h3>Petite Enfance</h3>
<h4>Espace Donald machin chose</h4>
<p>texte</p>
<h5>La crèche familiale</h5>
<p>texte</p>
<h6>Assistantes maternelles</h6>
<p>texte</p>
<h7>Vous souhaitez faire garder votre enfant ?</h7>
<p>texte</p>



La question ici qu'on doit se poser, c'est est-ce que Espace Donald machin chose est une sous-section de Petite Enfance. Ensuite, est-ce que La crèche familiale est une sous-section de Espace Donald machin chose ? Je ne crois pas. J'ai l'impression que les niveaux de titre sont mal compris ou mal utilisés.

Si par exemple, tu as une section Dernières nouvelles, tu peux faire ceci :


<h2>Dernières nouvelles</h2>

<h3>Microsoft vend des chocolats</h3>
<p>...</p>

<h3>Macromedia lance un nouveau logiciel</h3>
<p>...</p>

<h3>Alsacreations traduit en chinois</h3>
<p>...</p>


Comme tu vois, les trois nouvelles utilisent un titre du même niveau, puisqu'ils sont tous du même niveau. Tu es certain que tu respectes ca dans la structure de ton exemple ?
Modérateur
En fait, tu as probablement compris le principe des différents niveaux, seulement, je crois que tu utilise des niveaux inutilement, comme dans l'exemple donné, le cas du h2.


<h1>Association machin chose</h1>
<h2>L'association pour les tout petit</h2>


Dans ton association machin chose, y'aura-t-il plusieurs associations ? Je veux dire par là que ton h2 me semble inutile, et qu'il sert uniquement à mettre une définition de ton association qui est en h1. Déjà, si tu retirais ce h2, ca remonterait ta hiérarchie d'un niveau. Tu pourrais baliser ton "L'association pour les tout petit" par un span ou un p, puisque ca ne me semble pas être un titre. Ce n'est pas une redivision du contenu, puisque c'est simplement un slogan, un texte relatif au titre h1. Il y a aussi surement d'autres endroits où tu pourrais gagner un autre niveau.
Modifié par Merkel (15 Feb 2005 - 22:11)
Merkel a écrit :
En fait, tu as probablement compris le principe des différents niveaux, seulement, je crois que tu utilise des niveaux inutilement, comme dans l'exemple donné, le cas du h2.


<h1>Association machin chose</h1>
<h2>L'association pour les tout petit</h2>



Je suis d'accord et c'est typiquement ce que j'appelle un sous titre voir même un faux titre.
Mais que choisir dans ce cas ?
<hn>titre <span>sous-titre</span></hn>

ou
<hn>titre</hn><p class="soustitrehn">sous-titre</p>

ou
<div><hn>titre</hn>sous-titre</div>

ou
<h2>titre</h2><h2  class="soustitre">sous-titre</h2>

Modifié par zwip (15 Feb 2005 - 22:47)
zwip a écrit :

Je suis d'accord et c'est typiquement ce que j'appelle un sous titre voir même un faux titre.
Mais que choisir dans ce cas ?

Un petit coup d'oeil sur le document sans CSS appliqué donne généralement une bonne idée du balisage à utiliser. Ça pourrait même pousser à choisir des <h3> et <h4> au lieu de <h1> et <h2>, souvent trop importants par rapport à un simple paragraphe. D'ailleur, puisqu'on est dans le salon « HTML, XHTML », il est souvent utile de désactiver CSS pour mieux se comprendre. Smiley cligne

Une discussion a déjà eu lieu sur ce sujet : La structure de vos pages (<div> et <hn>) ?

Une autre sur les Titres numérotés.
Merci pour la suggestion, c'est vrai que cela aide à faire des choix. Mais ce n'est pas tant un problème de choix de balises hn ou la possibilité d'imbriquer des Hn dans des div qui me pose problème.
Ici, c'est de réussir à garder une relation direct entre le titre et un sous-titre tout en se différenciant d'un simple paragraphe.

c'est pourquoi cette formule ne me plaît guère :
<hn>titre</hn><p class="soustitre">sous titre</p>

Après réflexion sur les différents points de vue de cette discussion, les formules ci-dessous me conviendrait plus :

<hn>titre <span>sous titre</span></hn>
<div><hn>titre </hn>sous titre</div>


mais, peut-être que je me prend la tête pour rien Smiley biggol arf !
Modifié par zwip (16 Feb 2005 - 10:31)
Ganf a écrit :
Moi j'ai une question, quel est ce fameux texte qui a besoin de titres de septième niveau ?

L'exemple que j'ai sous les yeux est une thèse qui reprend toute la classification d'un groupe de bêbêtes. Outre le titre (title) de la thèse, plusieurs titres H1 (intro etc. / systématique / discussion / annexes), plusieurs titres H2 (systématique : un pour chaque approche possible de classification), et ensuite des titres H3...H7 pour les rangs systématiques emboîtés (familles, genres, espèces, caractères de l'espèce+discussion).
Bon, c'est un usage bien spécifique, mais l'emploi des niveaux me paraît très cohérent et justifié.
Modifié par Matou21 (16 Feb 2005 - 18:32)
Matou21 a écrit :
Bon, c'est un usage bien spécifique, mais l'emploi des niveaux me paraît très cohérent et justifié.


Déjà, merci pour ton opinion et d'avoir analysé les pages !
Je pense aussi que c'est justifié, mais maintenant imaginons que je souhaite "habiller" cette thèse pour avoir un bandeau d'entête (comme ce forum) dans lequel j'insere trois titres :

<div class="bandeau">(div dans lequel il y a une jolie image de fond)
<img src="logo.png" alt="logo de l'association" />
<h1>HumanW</h1>
un sous titre :
<h2>Association OIC</h2>
et enfin la rubrique:
<h3>MOST - L'avenir du travail en Europe</h3>
</div>


Si je garde les titres de la thèse et que j'incrémente j'arrive à H6+3 -> H9 !

PS: je ne fait pas de publicité sur ce site mais beaucoup de membres me demandent un cas concret. Smiley sweatdrop
Tiens, un cas concret :

<title>Les Kosmocératidés d'Europe occidentale</title>

<h1>Généralités</h1>
  ...
<h1>Etude systématique</h1>
<p>Dans cette partie seront détaillées...</p>

   <h2>Systématique selon Tintant 1963</h2>
   <p>Tintant a établi en 1963 une classification basée...</p>

      <h3>La famille Kosmoceratidae selon Tintant</h3>
      <p>Tintant définit cette famille d'après...</p>

         <h4>Sous-famille Keppleritinae</h4>
         <p>Une première sous-famille a été distinguée...</p>

            <h5>Genre Kepplerites</h5>
            <p>Ce genre regroupe des formes d'origine boréale...</p>

               <h6>Sous-genre Kepplerites</h6>
               <p>Les formes les plus primitives de Kepplerites...</p>

                  <h7>Espèce Kepplerites trichophorus (Buck.)</h7>

                     <h8>Diagnose</h8>
                     <p>L'ornementation typique comporte...</p>

                     <h8>Répartition temporelle</h8>
                     <p>Cette espèce caractérise la base du...</p>

                     <h8>Morphotypes géographiques</h8>
                     <p>Chez cette espèce des variantes locales...</p>

                        <h9>morphe "roylei"</h9>
                        <p>La faune trouvée à Herznach...</p>

                  <h7>Espèce Kepplerites evolutus n.sp.</h7>
                  ...

                <h6>Sous-genre Toricellites</h6>
                ...

            <h5>Genre </h5>
            ...

         <h4>Sous-famille Kosmoceratinae</h4>
         ...

      <h3>Problème rencontrés par Tintant</h3>
      ...

   <h2>Systématique selon Robert 2003</h2>
   ...



On voit que l'ordre est globalement cohérent, notamment du fait qu'une partie du découpage reproduit les règles d'emboîtement de la classification officielle. C'est aussi possible parce qu'on va du général au particulier, a priori sans jamais revenir à des conclusions plus "générales" après la mention de particularités : on ne trouve pas

<h7>Espèce machin</h7>

<p id="prologue pour l'espèce">Cette espèce a été définie par Trucmuche en 1940</p>

<h8>Diagnose</h8>
<p class="texte diagnose">On la reconnaît à ses beaux yeux langoureux</p>
<p class="texte diagnose">Les dimensions maximales sont 90/60/90 avec un QI de 62</p>

<h8>Répartition</h8>
<p class="texte répartition">On la trouve dans les bars de Pigalle</p>
<p class="texte répartition">Elle paraît caractéristique des bars mal famés</p>

<p id="conclusion pour l'espèce, sur sa diagnose et sa répartition">Cette espèce aux beaux yeux, trouvée à Pigalle, est donc une espèce fort agréable à fréquenter</p>

<h7>

Là, en effet, le dernier paragraphe qui "suit" un paragraphe lié à la répartition (h8), concernerait en fait l'ensemble du contenu de h7. Ou alors, mettre ce paragraphe lui-même en H8, comme un titre "conclusion" pour le reste de H7.


--

Bon, le niveau H8+H9 est peut-être superflu ici, on pourrait peut-êtr utiliser une simple liste pour les caractéristiques de l'espèce (diagnose, répartition) et surtout pour les morphotypes (simple listage).

L'idéal aurait été la création d'un système de balises nouvelles du genre


<h8>Morphotypes</h8>
<p>Généralités sur les morphotypes existants</p>
<liste-items>
    <nom-item>morphe "roylei"</nom-item>
    <descr-item>Ce morphotype trouvé à Herznach présente</descr-item>
</liste>
<p>L'existence de ces morphotypes paraît donc liée à des...</p>


Voilà. Désolé si y a des balises mal fermées, pas le courage de me relire. Sujet intéressant en tout cas. Les pages de l'antique bouquin n'étant pas encore toutes coupées (hé oui, c'est une pièce de musée Smiley lol ), ça m'a permis d'étrenner mon beau couteau suisse tout neuf. Smiley biggol
Modifié par Matou21 (16 Feb 2005 - 22:24)
Bon, apparemment il n'existe pas de "bonne" formule sans passer par du XML.
Le problème est que le <hn> est ambivalent dans son usage:
il peut être utilisé pour indiquer qu'un texte est plus important qu'un simple paragraphe sans forcément préciser une hiérarchie dans un document et c'est peut-être là, où se trouve la véritable erreur.

J'ai donc choisi d'utiliser, suivant le contexte, ces formules:

Si le sous-titre est la continuité d'un titre :
<hn>titre <span>sous-titre</span></hn>
exemple : <h1>MOST <span>Programme Gestion des Transformations Sociales</span></h1>
(J'utilise un display:block en css pour le span) 


Si le sous-titre se révèle plutôt anecdotique par rapport au titre :
<hn>titre</hn><div class="hnbis">sous-titre</div>
exemple : <h1>ALSACREATION</h1><div class="h1bis">Standards & Compagnie</div> (merci Laurent Denis)


J'ai réussi aussi à gagner quelques niveaux supplémentaires en utilisant des listes de définitions.
Au lieu de :
<h7>Une question ?</h7><p>une réponse longue</p>

j'utilise :
<dl><dt>Une question ?</dt><dd>une réponse longue</dd></dl>


Voilà, merci à tous et particulièrement à Merkel qui m'a permis d'affiner ma demande et surtout de m'avoir ouvert les yeux sur le fait que plus de 6 niveaux, c'est vraiment imbittable... Smiley biggol
Modifié par zwip (17 Feb 2005 - 16:13)
Administrateur
zwip a écrit :
<hn>titre</hn><div class="hnbis">sous-titre</div>
exemple : <h1>ALSACREATION</h1><div class="h1bis">Standards & Compagnie</div> (merci Laurent Denis)

Ton exemple est invalide : c'est "alsacréations" Smiley biggol Smiley lol
Pages :