5568 sujets

Sémantique web et HTML

Comment sémantiser le titre du site

Bonjour !

Quel élément sémantique correspond le mieux au titre du site (html5) ?

Jusqu'à présent, je le structurais avec un <p>. En effet, celui-ci ne correspond pas au h1 de la page en cours mais du site dans sa globalité. Il doit apparaitre dans le title.

J'ai vu 2 manières de l'appréhender : le mettre en <h1> et commencer les titres de la page au <h2> ... ce que je ne trouve pas logique. Ou bien, le mettre en <h1> et commencer les titres de la page au <h1> aussi. Ce qui me gêne, (flagrant avec l'outliner), c'est que le titre du site et le titre d'une page ont le même niveau, la même sémantique.

Merci par avance pour vos réponses Smiley smile
Salut,

Perso j'aurais tendance à dire que tu réponds un peu à ta question, car mettre le titre en <h1> et les titres dans la page en <h1> aussi ne crée pas de hiérarchie, ce qui est un peu dommageable quand on sait qu'il existe 6 niveaux de hiérarchie de titres.

Pour moi un titre de site serait plus adéquat dans un <h1>, c'est après tout l'information primordiale dans le site. Elle conditionne le nom et/ou l'objet même du site, et le visiteur viendra ou non sur ce site en fonction de cela. Donc que ce soit visible autrement que dans la barre de titre du navigateur me semble vraisemblablement logique.
Que les titres de pages dans le site soient en <h2> me semble logique aussi, car ce sont des informations, certes importantes, mais pas autant que le nom ou l'objet même du site.

Après je ne prétends pas avoir la réponse absolue en la matière, je ne suis pas non plus persuadé qu'il en existe une présentement. Ma réflexion vient plutôt de ma logique de hiérarchie d'information dans mon métier de communication, et avant d'avoir à penser à utiliser telle ou telle balise html, un site reste avant tout un moyen de communication, qui doit présenter l'information de manière structurée et évidente pour le visiteur.

Le fait qu'il s'agisse d'html4 ou d'html5 n'a à mon avis pas de rapport réel quand à la logique à utiliser, tant qu'il n'existera pas une balise intra <body> pour spécifier un titre de site, en reflet du <title> intra <head>.
Bonjour,

en HTML5, il y as la balise <header> qui permet de faire une en-tête à la page.
Et si j'ai bien compris le HTML5, le header et les section peuvent contenir un h1 contrairement au html4.
En ce qui concerne le html4 ou xhtml1, je préfère mettre le titre du site dans un <p> parce que pour le référencement, le plus important c'est le titre de la page et son contenu plutôt que le simple titre du site.

Bonne journée
Administrateur
Bonjour,

le titre du site ce n'est pas le titre de la page mais plutôt le logo + slogan de l'entreprise/asso/qqch et du site, n'est-ce pas ?
Si le h1 ne convient pas comme ici sur alsacreations.com, ce logo/nom/slogan peut être balisé par un paragraphe voire dans certains cas particuliers une liste (s'il y a une liste de liens dans le header).
Bonne suggestion dans le cas d'un Doctype HTML5 avec <header> Smiley jap

Mais dans le cas général, c'est h1 pour le site, h2 pour la page, h3 pour les sections, ... et je ne vois pas ce que ça a d'illogique ? Le site englobe toutes les pages, chaque page englobe ses sections, etc il y a bien une hiérarchie.
La règle pour les niveaux de titre est que le premier soit un h1 (il peut y en avoir plusieurs) puis un h2 ou un autre h1. Un h2 est suivi d'un autre h2 frère ou d'un h3 fils mais pas d'un h4, h5 ou h6 ou d'un nouveau h1 (fin de la "branche h2") : il ne doit jamais y avoir de saut.
En html5, on peut repartir avec un <h1> dans un <section> (ou <article>) mais c'est déconseillé pour des raisons d'accessibilité, les lecteurs d'écran ne connaissent pas encore ces subtilités. Mieux vaut rester avec la méthode de Felipe. Smiley cligne
Modifié par Patidou (02 Sep 2010 - 13:13)
Hello,

Pour ma part j'aime bien:
<!-- Page d'accueil -->
<h1>Mon Super Site</h1>
  <h2>Une rubrique</h2>
    <p>Invitation à lire du contenu</p>
  <h2>Une autre rubrique</h2>
    <p>Encore des liens, ou un formulaire, ou
    ce qu'on voudra...</p>

<!-- Page pour un article -->
<p>Mon Super Site</p>
<h1>Mon magnifique article</h1>
  <p>Intro de l'article</p>
  <h2>Ah tiens un titre dans l'article</h2>
    <p>Bla bla.</p>

C'est ce que j'utilise sur http://covertprestige.net/

La difficulté dans ce cas c'est s'il y a des titres après l'article (dans une sidebar ou un footer), le seul moyen de les isoler de l'article dans le plan du document, en HTML4, est d'utiliser un ou plusieurs H1. Ou alors on utilise un niveau de titre inférieur (H2, H3) et le plan résultant est faux. Mais en HTML4 c'est, pour la plupart des sites web, impossible de faire un plan du document juste tout en prenant en compte les contraintes de référencement par exemple, donc on se contente en général de limiter les dégâts en:
- descendant parfois d'un niveau de titre car les objectifs de référencement interdisent d'utiliser H1, voire H2, pour des éléments de l'interface générale (pas propres à la page);
- n'utilisant pas de titres HN pour des éléments de l'interface générale.

Patidou a écrit :
En html5, on peut repartir avec un <h1> dans un <section> (ou <article>) mais c'est déconseillé pour des raisons d'accessibilité, les lecteurs d'écran ne connaissent pas encore ces subtilités.

Un lecteur d'écran listera les deux H1 (le «titre du site» puis celui de l'article), ça ne devrait pas poser de problèmes.
Dans le cas d'arborescences plus profondes, mieux vaut utiliser des H2, H3 et H4 plutôt que des éléments H1 d'un bout à l'autre comme le permet HTML5, effectivement.
Florent V. a écrit :

Dans le cas d'arborescences plus profondes, mieux vaut utiliser des H2, H3 et H4 plutôt que des éléments H1 d'un bout à l'autre comme le permet HTML5, effectivement.


Je suis parfaitement d'accord ! Utiliser que des H1 réduit la compréhension sémantique de notre HTML.

Je prend le parti de mettre mon titre dans un <p>.

- accessibilité : le titre est déjà présent dans le title. Si je mets mon titre en plus dans un <h1>, un lecteur d'écran le lira 2 fois sur chaque page... très très lourd !
Modifié par Carine P (02 Sep 2010 - 16:43)
Carine P a écrit :
- accessibilité : le titre est déjà présent dans le title. Si je mets mon titre en plus dans un <h1>, un lecteur d'écran le lira 2 fois sur chaque page... très très lourd !


Il sera lu aussi dans un élément p. Par contre, en effet, dans un contexte de navigation par titre : le titre de site comme h1 (hors contexte page d'accueil) fait quelque peu tâche.

Personnellement, j'ai la même approche que Florent. Du fait du statut particulier de la page d'accueil, un h1 pour le titre de site me semble pertinent.

Romain
Hum je suis un peu perdu ...
Avant j'avais une approche simple.

du style:

<body>

<div id="entete"> 
<h1>titre principal</h1>
<div id="menu></div>
</div>

<div id="contenu">
<div id="colgauche"><h2>titre de la page</h2></div>

<div id="coldroite">
<div class="article"><h3>titre</h3><p>blabla</p></div>
<div class="article"><h3>titre</h3><p>blabla</p></div>
</div>

</div>

<div id="pied"></div>

</body>


Ok la c'etait simple... dans mon esprit c'est simple .. ma page entière est une grande section. Et c'est tout...

Maintenant avec l'html 5 on me dis:
Body est une section, nav est une section, seciton est une section et article est une section...
Logiqument pour moi uen section ca recommence à zero donc si je met un titre je met un h1
soit:


<body>

<header id="entete"> 
<h1>titre principal</h1>
<nav id="menu></nav>
</header>

<section id="contenu">
<div id="colgauche"><h1>titre de la page</h1></div>

<div id="coldroite">
<article class="article"><h1>titre</h1><p>blabla</p></div>
<article class="article"><h1>titre</h1><p>blabla</p></div>
</div>

</section>

<footer id="pied"></footer>

</body>


ca n'as aucune sens.. Alors quoi .. en html5 .. les Hn sont en rapport avec les balise qui sectionne la page ? Ou sans rapport... Ou on mélange en faisant comme bon nous semble.. parfois oui parfois non... Smiley ohwell c'est pas très clair tout ça
Sujet clos
Aller à