Comment présenter un sous-titre ?

Bonjour,
Ma page commence par une sorte de titre <h1>Nom de l'événement</h1>
Il n'y a qu'un seul <h1> dans ma page.
Je serais tenté par <h2>Contexte de l'événement</h2>. Il n'y aurait qu'un <h2> dans la page, parce que ce n'est pas un titre de niveau 2, mais une sorte de sous-titre, que je pourrais même passer en sur-titre.

Les journaux sur internet ont des titres en un élément, "Festival de Prague : Récital de Frank Adamo", mais je tiens à mes deux lignes.
Comment puis-je créer un sous-titre, ou un sur-titre ?
Par ceci ?

<h1><span class="titre">Nom de l'événement</span><span class="sous-titre">Contexte</span></h1>

Ou en créant un paragraphe sous-titre ?

<h1>Titre</h1>
<p class="sous-titre-h1">sous-titre, contexte...</p>

C'est cette solution que j'utilise actuellement, est-elle judicieuse ?

Par ailleurs, mes informations, les mêmes, sont reprises dans une autre page. Là, la page commence par des informations sur la date, le lieu, un commentaire, etc, puis vient le titre de niveau <h1>Nom de l'événement</h1>. C'est bien pour moi le titre de la page, celui que je reprends dans le <title>. C'est ce que souhaite voir mis en avant par un moteur de recherche. Que penser de mon <h1> au milieu voire en fin de page ?

Salut,

La première solution proposée me parait la plus judicieuse, le "sous-titre" fait partie de ton titre donc conserve le pour le référencement.
Je dirais de laisser le h1 en début de page, je ne sais plus si ça a de l'influence sur le ref maintenant ^^.

Bonjour,

La position du h1 dans la page ne doit pas avoir une influence énorme sur le référencement (tant qu'il ne contient pas des dizaines de mots qui pourraient faire tousser google).

Par conter d'un point de vu logique, il y a un problème à avoir un titre de niveau 1 en bas de page (ou en milieu de page). Tu es sûr de ne pas avoir un titre de section ou autre avant ce h1 ?

Bonjour,

Les structures suivantes sont correctes:

<h1>
  <span class="surtitre">Sur-titre</span><br />
  <span class="titre">Titre</span>
</h1>

<h1>
  <span class="titre">Titre</span><br />
  <span class="soustitre">Sous-titre</span>
</h1>

<p class="surtitre">Sur-titre</p>
<h1 class="titre">Titre</h1>

<h1 class="titre">Titre</h1>
<p class="soustitre">Sous-titre</p>

Les problèmes éventuels sont:
- Sans styles CSS, le sur-titre ou sous-titre balisé comme un paragraphe peut ne pas être reconnu comme relié au titre. On utilise en effet un balisage minimaliste au niveau sémantique (le sous-titre ou sur-titre n'est pas marqué comme tel car rien ne permet de le faire en HTML), et on se repose sur les CSS pour rendre le tout plus explicite.
- Dans le cadre d'une lecture non-linéaire, par exemple avec un lecteur d'écran, un sur-titre peut être zappé sur l'utilisateur accède directement au titre par un raccourci.
- Si on utilise un paragraphe pour le sous-titre ou sur-titre, attention à ne pas placer l'information identifiant la page dans un paragraphe, et une information générique (titre de rubrique par exemple) dans un titre. Ce serait une erreur sémantique.

Pour finir, notons que HTML5 prévoit les structures suivantes:

<heading>
  <p>Sur-titre</p>
  <h1>Titre</h1>
</heading>

ou encore:

<heading>
  <h2>Sur-titre</h2>
  <h1>Titre</h1>
</heading>

----

<heading>
  <h1>Titre</h1>
  <p>Sous-titre</p>
</heading>

Je m'interroge sur cette portion de code :

<heading> 
  <h2>Sur-titre</h2> 
  <h1>Titre</h1> 
</heading> 

Il semble assez illogique d'avoir un titre de niveau 2 avant un titre de niveau 1, non ?
Le <h2> n'est-il pas lui-même un sous-ensemble d'un <h1> ?

Merci,
J'ai préparé des exemples pour préciser et compléter mes interrogations suite à la proposition de "titre de section".
Mon problème est que je souhaite que les <hn> soient des titres et sous-titres au sens de l'information que je présente, tout en souhaitant créer des titres de rubriques, sous-titres contextualisant, mais ne structurant que la présentation et non l'information elle-même.
Je livre l'exemple ici (merci de ne pas commenter le code).

Sinon, en HTML5 toujours:

<hgroup>
  <h1>Mon titre</h1>
  <h2> Mon sous-titre</h2>
</hgroup>

Houlà, j'ai écrit un peu n'importe quoi sur HTML 5 moi. J'ai fait un mélange assez marrant de la notion de heading content, des éléments hgroup et header.

Bref, le code indiqué par Benjamin est correct, et est destiné essentiellement à décrire un titre en deux parties (titre principal, sous-titre):

<hgroup> 
  <h1> CSS 2 </h1>
  <h2> Pratique du design web </h2>
</hgroup>

Il me semble pas totalement exclus qu'on puisse avoir un titre de section avec un «sur-titre», même si ça va être plus rare:

<hgroup> 
  <h2> Le sur-titre: </h2>
  <h1> Titre principal </h1>
</hgroup>

Dans les deux cas, le but explicite de l'élément HGROUP est de masquer le H2 (dans les exemples ci-dessus) dans le plan du document. Ainsi le code suivant:

<section>
  <h1> Pierre, Paul et Jacques </h1>
  ...
  <h2> Pierre </h2>
  ...
  <hgroup>
    <h2> Paul </h2>
    <h3> ... et sa femme </h3>
  </hgroup>
  <h3> Enfance de Paul </h3>
  ...
  <h3> Rencontre avec Paulette </h3>
  ...
  <h2> Jacques </h2>
  ...
</section>

donne le plan suivant:

# Pierre, Paul et Jacques
   ## Pierre
   ## Paul
      ### Enfance de Paul
      ### Rencontre avec Paulette
   ## Jacques

Enfin, il ne faut pas oublier l'existence de HEADER, qui peut servir par exemple ainsi:

<article>
  <header>
    <p> High-Tech </p>
    <h1> Le successeur de la technologie eInk dévoilé </h1>
  </header>
  ...
  <footer>
    <h2>Tags</h2>
    ...
    <h2>Articles sur le même thème</h2>
    ...
  </footer>
</article>

Ceci dit, l'intérêt de la manoeuvre n'est pas encore démontré (et les possibilités d'interprétation pour ces conteneurs sémantiques sont étendues, ce qui peut réduire leur intérêt d'autant). D'ailleurs chez Microsoft on s'en émeuvait il y a peu.
Modifié par Florent V. (11 Aug 2009 - 17:04)

En attendant HTML5, je propose :

<h1>Titre <small>Sous-titre</small></h1>

Avec éventuellement avec un :

h1 small {display:block}

Commentaires sur: http://denantesabrest.free.fr/monjournal.html

1. La structure utilisée par Liberation.fr est illogique. Les niveaux de titre sont dictés par l'effet visuel recherché, et les noms de rubriques en sur-titre ne devraient pas être balisés comme des titres de section.

2. «une machine ne vas pas s'imaginer que le fait que Marguerite Duras soit morte (<h4>) est moins important que le fait qu'on puisse s'abonner à mon journal (<h2>)»

Une machine ne s'imagine rien de tel. HTML propose peu de moyens pour décrire l'importance relative d'une information (en gros: STRONG, SMALL, ya basta). Les titres ne sont pas un moyen de décrire l'importance relative de l'information, mais un moyen de structurer un contenu de manière logique.

3. «Je note aussi que les < h1>, < h2>, < h3> ne sont pas des titres de chapitre, mais servent seulement à structurer la page, et en aucun cas à la hiérarchiser.»

Define: chapitre.
Define: page.
Define: titre.
Define: hiérarchiser.
Define: structurer.

Bon courage.

4. «Mes seuls et uniques titres sont les <h4>»

Correction: les seuls et uniques titres d'articles apparaissent balisés comme des H4. Dans d'autres contexte (page affichant un article unique) on obtiendra un balisage différent pour le titre d'un article. Enfin, les titres de section utilisés sur ta page d'index remaniée sont bien des titres... des titres de section, et pas des «gros titres» de journal.

En gros, tu viens de réaliser ceci: dans une page contenant des titres de journal, les seuls titres de journal sont des titres de journal.

Bienvenue au pays de la tautologie implicite.

5. «Est-il raisonnable de créer des titres de section en <hn> ?»

<hn> = titre de section. Est-il raisonnable de baliser des liens avec <a>, une emphase forte avec <strong>, une image avec <img>?

Une question plus intéressante (et heureusement facile) serait: «est-il raisonnable de baliser un titre qui n'est pas un titre de section avec <hn>?» (par exemple un titre d'oeuvre cité dans une liste d'oeuvres datées). Réponse: non, pas une seconde.

6. «On utilise partout les < hn> pour structurer (regroupements d'information) une page»

Oui, quand on utilise HTML correctement.

7. «alors qu'ils devraient d'abord servir à structurer (hiérarchiser) le contenu d'une information développée, une thèse»

Non.

8. «La bonne méthode pourrait être de réserver les < hn> à la structure de la thèse défendue dans la page, et non à la structure de la page.»

Ce n'est pas ce que dit HTML 4. Et encore moins ce que dit HTML 5. Mais c'est bien tenté.

Globalement, tu es dans l'erreur. Tu n'as pas compris le rôle des titres de section (en gros: être des titres de section ). Libre à toi ensuite d'utiliser HTML de manière erronée en redéfinissant le rôle des différents éléments, mais dans ce cas cela ne s'appelle pas respecter un standard.