[HTML] Comment créer un Sommaire ▬ Usage des Ancres

Bonjour à tous ! ♥

Bon, ce n'est pas grand chose mais je me dis que je pourrais toujours filer 2-3 tuyaux/bases en codage CSS/HTML quand j'ai le temps. Alors, je vous propose aujourd'hui de voir comment on s'y prend pour faire un sommaire.
Ceci peut se révéler utile lorsque dans un même sujet vous avez plusieurs notions d'aborder. Pour voir un exemple d'utilisation, je vous invite à regarder ICI. (car un exemple vaut 1000 mots)

Pour réaliser ceci, il existe deux méthodes qui s'appuient toutes les deux sur le fait de créer un lien menant vers ce que l'on nomme "une ancre".
En fait, c'est surtout pour expliquer le principe des ancres et donc l'utilisation en html des attributs id et name à l'usage de redirection, que va servir ce tutoriel.

Méthode 01 ▬ Attribut Name

La première façon nous donnera ce genre de codage :

Code:

Le sommaire sous forme de lien donc :
<a href="#ancre1">Titre 1</a>
<a href="#ancre2">Titre 2</a>

Des lignes et des lignes de texte. Veiller à ce que cela reste sur une seule page de sujet, mais ça peut aussi mener à d'autres messages du sujet.
<a name="ancre1">Titre 1</a>
Des lignes et des lignes de texte. Veiller à ce que cela reste sur une seule page de sujet, mais ça peut aussi mener à d'autres messages du sujet.
<a name="ancre2">Titre 2</a>
Le texte

Voici donc comment on fait un sommaire, de façon simple. Néanmoins, pour servir d'ancre, name se doit d'être utiliser avec la balise a ! Car à l'origine, "name" est un attribut ayant plus de fonction dans le php que dans le html.

Méthode 02 ▬ Attribut Id

L'autre façon de faire passe par l'usage de "id". En somme, on se sert d'une identification comme ancre. Ce qui peut avoir d'autres intérêt et usage. Voici donc un code pour visualiser la différence :

Code:

Le sommaire sous forme de lien donc :
<a href="#ancre1">Titre 1</a>
<a href="#ancre2">Titre 2</a>

Des lignes et des lignes de texte. Veiller à ce que cela reste sur une seule page de sujet, mais ça peut aussi mener à d'autres messages du sujet.
<h2 id="ancre1">Titre 1</h2>
Des lignes et des lignes de texte. Veiller à ce que cela reste sur une seule page de sujet, mais ça peut aussi mener à d'autres messages du sujet.
<h2 id="ancre2">Titre 2</h2>
Le texte

Comme vous le voyez, "ID" n'est pas utilisé avec la balise a. En fait, il peut s'utiliser dans des balises comme span, div, h, p. Bref, toutes les balises de mises en forme CSS. Y compris les balises que vous pourriez avoir inventer en CSS.
L'avantage est donc dans la personnalisation des choses. Car un lien aura toujours une apparence de lien, et un A NAME aura toujours les effets donnés aux liens sur votre forum (ligne dessous, surbrillance, couleur différente, typo différente etc...) qu'avec le ID, vous n'aurez pas ce "soucis".

Au final : qui choisir ?

Utiliser id ou name ? Les auteurs devraient considérer les points suivants au moment de décider lequel attribut utiliser entre id et name pour le nom d'une ancre.

▬ L'attribut id peut faire plus qu'un nom d'ancre (par exemple, être personnaliser sous la forme de #ancre1 dans une feuille CSS)
▬ Certains agents utilisateurs anciens ne gèrent pas les ancres créées par l'attribut id. NAME est donc une valeur sûre si on n'est pas certain que tous les utilisateurs sont avec une version récente de leur navigateur.

Je reste disponible si vous avez des questions !
En espérant que ce petit sujet vous aide ♥

Merci pour le partage !
J'avoue qu'avant j'utilisais la vieille fonction de poster un nouveau message pour coller le lien dans le premier message et ainsi avoir mon sommaire mais... c'est super comme méthode pour éviter d'avoir 40 messages !

De rien ^^

Contente que cela puisse servir !