Titres obligatoirement dans paragraphes ?

Fermé
Juju - Modifié par Juju le 9/02/2016 à 17:01
 Juju - 10 févr. 2016 à 09:09
Bonjour,

- Est-ce que les titres h1, h2... Doivent obligatoirement (selon les règles d'accessibilité) être dans des paragraphes ?

- Est-ce pareil si le titre est englobé par un lien ? Ex :

<body>
  <p>
    <a href="https://www.google.fr/">
      <h1>Mon titre</h1>
    </a>
  <p>
</body>

respecte mieux les règles que
<body>
  <a href="https://www.google.fr/">
    <h1>Mon titre</h1>
  </a>
</body>


Merci ! :)

1 réponse

Bonjour,

un paragraphe comme son nom l'indique est un paragraphe donc le titre doit en être différencié. Le titre n'étant pas le paragraphe et le paragraphe n'est pas non plus le titre.
<h1>Titre du paragraphe</h1>
<p>Contenu du paragraphe</p>

Mais comme les éléments HTML(balises) sont impraticables à l'infini on peut utiliser celui ci de manière imbriquée comme l'on veux, seule la logique du document l'impose.
Ainsi
<h1>Titre du pargraphe</h1>
<p>Ceci est un paragraphe<h2>Un sous titre pour une subdivision<h3>auquel on donne un titre</h3></h2></p>

est juste même s'il n'a pas d'application réelle.

Par contexte ceci est faux:
<a href='monlien.html>
<h1>aller à mon lien</h1>
</a>


Ce qui est nécessaire en HTML5 pour les titres c'est d'en indiquer un à chaque subdivision de la page, la balise article, elle même comprise dans section.

Ainsi la bonne sémantique qui permet l'accessibilité et la lecture par les robots d'indexation pour l'afficher dans les moteurs de recherche est:

<section>
<article>
<h1>Le but de HTML5</h1>
<p>HTML est le langage des pages Internet...</p>
<p>Ses règles sont sémantiques</p>
</article>
<article>
<h2>Description technique de HTML</h2>
<p>Ce sont des balises qui peuvent comporter un ou plusieurs atttributs</p>
</article>
</section>
<!--Si l'on veux rajouter un autre sujet on peut le différencier avec une autre balise section: -->
<section>
<article>
<h2>Mes sites Internet</h2>
<p>Je vous parle des mes sites Internet</p>
</article>
</section>

En effet un titre se rapporte au document(la page) si c'est le titre d'un autre page c'est le H1 de celle ci qui indique son titre.
le lien n'a pas besoin de sémantique puisque sa balise indique déjà que c'est un lien.

Seul petit bémol c'est que la plupart des navigateurs n'implémente pas encore la fonctionnalité théoriquement plus juste et possible d'utiliser plusieurs titres principaux comme article.
Cela viendra vite mais pour l'instant j'ai utilisé une seule balise H1 et des balises H2 même si on peut voir que dans l'exemple écris au dessus 'le but de HTML5' et 'description technique de HTML' ont la même importance hiérarchique et devrais tout 2 utiliser une balise H1.

Pour le respect des normes(accessibilité mais surtout l'indexation des moteurs de recherches, essentiellement celui de Google) le mieux est de se référencer au manuel du W3C qui est bien fait et permet de tester en ligne l'écriture technique.

http://www.w3schools.com/tags/tag_hn.asp

Vous avez aussi les validateurs HTML (vérifiant les normes et indiquant les erreurs)ainsi que des programmes qui permettent de vérifier que la table des matières(donc les différents en-tête/titre du document) est correcte et complète(il ne peut pas avoir de balise article sans titre).

https://gsnedders.html5.org/outliner/


/!\ attention aussi à ne pas utiliser h1, h2, ...h6 pour l'affichage. HTML a une valeur structurelle et sémantique. Pour mettre en gras, changer la taille du texte et tout les aspect visuels c'est C.S.S. qui intervient.

Cela à bien des avantages, l'un d'eux est de pouvoir utiliser facilement la même page Internet et lui donner des apparences différentes en changeant le C.S.S. Il y a aussi des possibilités de généralisation ou ciblage des éléments HTML par CSS qui permet d'indiquer un style(des règles graphiques et de mise en pages) qui peut être repris par toutes les balises de la page, toutes les balises d'un type donné(tout les p par ex.)dans la page, plusieurs balises de la page désignée comme telle(avec class) ou une balise unique(avec id).

La charge de travail et simplicité d'écriture aussi bien lors de la création de la page que pour des modifications en est largement amoindrie.
0
Merci beaucoup pour cette réponse très détaillée ! :-)

Donc si je comprend bien, je ne peux pas mettre de lien dans un titre h1 ?
0