Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11

ol/a/li ou bien ol/li/a ?

13 réponses
Avatar
Une Bévue
Je suis en train de suivre un tuto sur le net :
An Introduction to Haml and Sinatra
<http://code.tutsplus.com/tutorials/an-introduction-to-haml-and-sinatra--net-14858>
et là je vois un arbre (pour un menu) ainsi réalisé :
<ol>
<a href... >
<li>Item 1</li>
</a>
...
</ol>

perso, "intuitivement", j'aurais plutôt écrit "l'inverse" comme
imbrication :

<ol>
<li>
<a href... >Item 1</a>
</li>
...
</ol>

euh, d'ailleurs, ce n'est pas ce que dit Mr W3c :
<http://dev.w3.org/html5/html-author/#the-ol-element>
4.3.5.7 The ol element:
Content Model:
Zero or more li elements.

10 réponses

1 2
Avatar
Olivier Miakinen
Le 22/10/2014 10:19, Une Bévue a écrit :
Je suis en train de suivre un tuto sur le net :
An Introduction to Haml and Sinatra
<http://code.tutsplus.com/tutorials/an-introduction-to-haml-and-sinatra--net-14858&gt;
et là je vois un arbre (pour un menu) ainsi réalisé :
<ol>
<a href... >
<li>Item 1</li>
</a>
...
</ol>

perso, "intuitivement", j'aurais plutôt écrit "l'inverse" comme
imbrication :

<ol>
<li>
<a href... >Item 1</a>
</li>
...
</ol>



Tu as raison. Soit dit en passant, je ne vois pas de « <ol » dans cette
page ni de « <li », et dans le code source les LI contiennent les A et
pas l'inverse.
Avatar
Paul Gaborit
À (at) Wed, 22 Oct 2014 10:19:45 +0200,
Une Bévue écrivait (wrote):

Je suis en train de suivre un tuto sur le net :
An Introduction to Haml and Sinatra
<http://code.tutsplus.com/tutorials/an-introduction-to-haml-and-sinatra--net-14858&gt;
et là je vois un arbre (pour un menu) ainsi réalisé :
<ol>
<a href... >
<li>Item 1</li>
</a>
...
</ol>



Comme quoi on trouve tout sur le net : le meilleur... comme le pire.

perso, "intuitivement", j'aurais plutôt écrit "l'inverse" comme
imbrication :

<ol>
<li>
<a href... >Item 1</a>
</li>
...
</ol>



C'est évidemment la bonne manière de faire (avec peut-être une petite
amélioration consistant à ne pas introduire d'espaces potentiellement
parasites : <li><a href="...">Item 1</a></li>).

euh, d'ailleurs, ce n'est pas ce que dit Mr W3c :
<http://dev.w3.org/html5/html-author/#the-ol-element&gt;
4.3.5.7 The ol element:
Content Model:
Zero or more li elements.



C'était déjà le cas en HTML 4, 3, 2 et 1 !

--
Paul Gaborit - <http://perso.mines-albi.fr/~gaborit/&gt;
Avatar
Eric Demeester
[ J'ai changé le sujet. ]

Bonjour,

Paul Gaborit (Wed, 22 Oct 2014 11:34:14 +0200
- fr.comp.infosystemes.www.auteurs) :

Une Bévue écrivait (wrote):
> <ol>
> <li>
> <a href... >Item 1</a>
> </li>
> ...
> </ol>

C'est évidemment la bonne manière de faire (avec peut-être une petite
amélioration consistant à ne pas introduire d'espaces potentiellement
parasites : <li><a href="...">Item 1</a></li>).



Dans quels cas la notation avec l'indentation, donc avec l'introduction
d'une espace puisque le passage à la ligne et la tabulation seront
considérés comme tel, risque-t-elle de poser problème ?

Je demande parce je procède comme ça quand j'estime que la complexité du
code le nécessite pour améliorer sa lisibilité.

Paragraphe :
<p>
Formatage sur plusieurs lignes permettant une lecture facile dans
l'éditeur.
</p>

Image clicable :
<a href="http://www.unsite.tld/" target="_blank" class="text-blue hover:opacity-90 " style="word-break: break-all;" rel="noopener nofollow">http://www.unsite.tld/"&gt" target="_blank" class="text-blue hover:opacity-90 " style="word-break: break-all;" rel="noopener nofollow">http://www.unsite.tld/" target="_blank" class="text-blue hover:opacity-90 " style="word-break: break-all;" rel="noopener nofollow">http://www.unsite.tld/"&gt;
<img class="ma_classe"
alt="http://www.unsite.tld/" target="_blank" class="text-blue hover:opacity-90 " style="word-break: break-all;" rel="noopener nofollow">http://www.unsite.tld/ - Intitulé du site"
src="images/partenaires/vignettes2/logo_du_site.jpg"
title="http://www.unsite.tld/" target="_blank" class="text-blue hover:opacity-90 " style="word-break: break-all;" rel="noopener nofollow">http://www.unsite.tld/ - Intitulé du site">
</a>

Et, plus généralement, une indentation de toutes les balises imbriquées.
Avatar
Une Bévue
Le 22/10/14 11:24, Olivier Miakinen a écrit :
Tu as raison. Soit dit en passant, je ne vois pas de « <ol » dans cette
page ni de « <li », et dans le code source les LI contiennent les A et
pas l'inverse.



si si à "Step 5: Adding a Meny (and Tidying Up)" je lis bien :
#nav
%ol
%a(href="/")
%li Home
%a(href="about")
%li About

...
Avatar
Une Bévue
Le 22/10/14 11:34, Paul Gaborit a écrit :
C'est évidemment la bonne manière de faire (avec peut-être une petite
amélioration consistant à ne pas introduire d'espaces potentiellement
parasites : <li><a href="...">Item 1</a></li>).



alors là, je suis d'accord mais bon derrière un templating comme Haml,
pas sûr que je puisse le contrôler.

j'ai vu comme ça en passant un <p /> du genre :

<p> Le blah blah du "p"
</p>
Avatar
Olivier Miakinen
Le 22/10/2014 14:30, Une Bévue a écrit :

Tu as raison. Soit dit en passant, je ne vois pas de « <ol » dans cette
page ni de « <li », et dans le code source les LI contiennent les A et
pas l'inverse.



si si à "Step 5: Adding a Meny (and Tidying Up)" je lis bien :
#nav
%ol
%a(href="/")
%li Home
%a(href="about")
%li About



Ah. Mais bon, ça n'a qu'un lointain rapport avec HTML.

Tu es sûr qu'il ne réorganise pas les balises lors de la traduction
en vrai HTML ? En tout cas, si la page web a été faite dans ce langage,
la traduction semble correcte.
Avatar
Paul Gaborit
À (at) Wed, 22 Oct 2014 13:20:13 +0200,
Eric Demeester écrivait (wrote):

Paul Gaborit (Wed, 22 Oct 2014 11:34:14 +0200

C'est évidemment la bonne manière de faire (avec peut-être une petite
amélioration consistant à ne pas introduire d'espaces potentiellement
parasites : <li><a href="...">Item 1</a></li>).



Dans quels cas la notation avec l'indentation, donc avec l'introduction
d'une espace puisque le passage à la ligne et la tabulation seront
considérés comme tel, risque-t-elle de poser problème ?



Dès que l'on fait de la mise en page un peu précise en CSS, les espaces
parasites peuvent commencer à poser problème.

Je demande parce je procède comme ça quand j'estime que la complexité du
code le nécessite pour améliorer sa lisibilité.

Paragraphe :
<p>
Formatage sur plusieurs lignes permettant une lecture facile dans
l'éditeur.
</p>

Image clicable :
<a href="http://www.unsite.tld/" target="_blank" class="text-blue hover:opacity-90 " style="word-break: break-all;" rel="noopener nofollow">http://www.unsite.tld/"&gt" target="_blank" class="text-blue hover:opacity-90 " style="word-break: break-all;" rel="noopener nofollow">http://www.unsite.tld/" target="_blank" class="text-blue hover:opacity-90 " style="word-break: break-all;" rel="noopener nofollow">http://www.unsite.tld/"&gt;
<img class="ma_classe"
alt="http://www.unsite.tld/" target="_blank" class="text-blue hover:opacity-90 " style="word-break: break-all;" rel="noopener nofollow">http://www.unsite.tld/ - Intitulé du site"
src="images/partenaires/vignettes2/logo_du_site.jpg"
title="http://www.unsite.tld/" target="_blank" class="text-blue hover:opacity-90 " style="word-break: break-all;" rel="noopener nofollow">http://www.unsite.tld/ - Intitulé du site">
</a>

Et, plus généralement, une indentation de toutes les balises imbriquées.



Le HTML n'est a priori pas conçu pour être lisible.

Un bon exemple d'espace parasites concerne les liens qui sont soulignés
par défaut. Ce soulignement dépase du texte s'il y a des espaces
parasites en début ou en fin de texte (mais dans <a>...</a>).

--
Paul Gaborit - <http://perso.mines-albi.fr/~gaborit/&gt;
Avatar
Une Bévue
Le 22/10/14 18:00, Olivier Miakinen a écrit :
Ah. Mais bon, ça n'a qu'un lointain rapport avec HTML.



c'est du Haml...

Tu es sûr qu'il ne réorganise pas les balises lors de la traduction
en vrai HTML ?



oui, justement.

En tout cas, si la page web a été faite dans ce langage,
la traduction semble correcte.



je ne sais pas comment la page a été faite.
Avatar
Olivier Miakinen
Bonjour,

Le 22/10/2014 13:20, Eric Demeester a écrit :

Je demande parce je procède comme ça quand j'estime que la complexité du
code le nécessite pour améliorer sa lisibilité.

Paragraphe :
<p>
Formatage sur plusieurs lignes permettant une lecture facile dans
l'éditeur.
</p>



Je fais comme ça aussi, les espaces sont correctement supprimées au
début et à la fin d'un paragraphe (c'est-à-dire aux frontières entre
le type 'block' et le type 'inline').

Image clicable :
<a href="http://www.unsite.tld/" target="_blank" class="text-blue hover:opacity-90 " style="word-break: break-all;" rel="noopener nofollow">http://www.unsite.tld/" target="_blank" class="text-blue hover:opacity-90 " style="word-break: break-all;" rel="noopener nofollow">http://www.unsite.tld/" target="_blank" class="text-blue hover:opacity-90 " style="word-break: break-all;" rel="noopener nofollow">http://www.unsite.tld/" target="_blank" class="text-blue hover:opacity-90 " style="word-break: break-all;" rel="noopener nofollow">http://www.unsite.tld/" target="_blank" class="text-blue hover:opacity-90 " style="word-break: break-all;" rel="noopener nofollow">http://www.unsite.tld/" target="_blank" class="text-blue hover:opacity-90 " style="word-break: break-all;" rel="noopener nofollow">http://www.unsite.tld/" target="_blank" class="text-blue hover:opacity-90 " style="word-break: break-all;" rel="noopener nofollow">http://www.unsite.tld/"&gt" target="_blank" class="text-blue hover:opacity-90 " style="word-break: break-all;" rel="noopener nofollow">http://www.unsite.tld/" target="_blank" class="text-blue hover:opacity-90 " style="word-break: break-all;" rel="noopener nofollow">http://www.unsite.tld/" target="_blank" class="text-blue hover:opacity-90 " style="word-break: break-all;" rel="noopener nofollow">http://www.unsite.tld/" target="_blank" class="text-blue hover:opacity-90 " style="word-break: break-all;" rel="noopener nofollow">http://www.unsite.tld/" target="_blank" class="text-blue hover:opacity-90 " style="word-break: break-all;" rel="noopener nofollow">http://www.unsite.tld/" target="_blank" class="text-blue hover:opacity-90 " style="word-break: break-all;" rel="noopener nofollow">http://www.unsite.tld/" target="_blank" class="text-blue hover:opacity-90 " style="word-break: break-all;" rel="noopener nofollow">http://www.unsite.tld/" target="_blank" class="text-blue hover:opacity-90 " style="word-break: break-all;" rel="noopener nofollow">http://www.unsite.tld/"&gt;
<img class="ma_classe"
alt="http://www.unsite.tld/" target="_blank" class="text-blue hover:opacity-90 " style="word-break: break-all;" rel="noopener nofollow">http://www.unsite.tld/" target="_blank" class="text-blue hover:opacity-90 " style="word-break: break-all;" rel="noopener nofollow">http://www.unsite.tld/" target="_blank" class="text-blue hover:opacity-90 " style="word-break: break-all;" rel="noopener nofollow">http://www.unsite.tld/" target="_blank" class="text-blue hover:opacity-90 " style="word-break: break-all;" rel="noopener nofollow">http://www.unsite.tld/" target="_blank" class="text-blue hover:opacity-90 " style="word-break: break-all;" rel="noopener nofollow">http://www.unsite.tld/" target="_blank" class="text-blue hover:opacity-90 " style="word-break: break-all;" rel="noopener nofollow">http://www.unsite.tld/" target="_blank" class="text-blue hover:opacity-90 " style="word-break: break-all;" rel="noopener nofollow">http://www.unsite.tld/ - Intitulé du site"
src="images/partenaires/vignettes2/logo_du_site.jpg"
title="http://www.unsite.tld/" target="_blank" class="text-blue hover:opacity-90 " style="word-break: break-all;" rel="noopener nofollow">http://www.unsite.tld/" target="_blank" class="text-blue hover:opacity-90 " style="word-break: break-all;" rel="noopener nofollow">http://www.unsite.tld/" target="_blank" class="text-blue hover:opacity-90 " style="word-break: break-all;" rel="noopener nofollow">http://www.unsite.tld/" target="_blank" class="text-blue hover:opacity-90 " style="word-break: break-all;" rel="noopener nofollow">http://www.unsite.tld/" target="_blank" class="text-blue hover:opacity-90 " style="word-break: break-all;" rel="noopener nofollow">http://www.unsite.tld/" target="_blank" class="text-blue hover:opacity-90 " style="word-break: break-all;" rel="noopener nofollow">http://www.unsite.tld/" target="_blank" class="text-blue hover:opacity-90 " style="word-break: break-all;" rel="noopener nofollow">http://www.unsite.tld/ - Intitulé du site">
</a>



Là, en revanche, on est au milieu d'un type 'inline', et tu peux te
retrouver avec une espace soulignée entre le début de l'élément A et
celui de l'élément IMG, ou entre la fin de IMG et la fin de A.

Pour éviter ce problème, il m'est arrivé de faire ceci :

<a href="http://www.unsite.tld/" target="_blank" class="text-blue hover:opacity-90 " style="word-break: break-all;" rel="noopener nofollow">http://www.unsite.tld/" target="_blank" class="text-blue hover:opacity-90 " style="word-break: break-all;" rel="noopener nofollow">http://www.unsite.tld/" target="_blank" class="text-blue hover:opacity-90 " style="word-break: break-all;" rel="noopener nofollow">http://www.unsite.tld/" target="_blank" class="text-blue hover:opacity-90 " style="word-break: break-all;" rel="noopener nofollow">http://www.unsite.tld/" target="_blank" class="text-blue hover:opacity-90 " style="word-break: break-all;" rel="noopener nofollow">http://www.unsite.tld/" target="_blank" class="text-blue hover:opacity-90 " style="word-break: break-all;" rel="noopener nofollow">http://www.unsite.tld/" target="_blank" class="text-blue hover:opacity-90 " style="word-break: break-all;" rel="noopener nofollow">http://www.unsite.tld/"
<img class="ma_classe"


alt="http://www.unsite.tld/" target="_blank" class="text-blue hover:opacity-90 " style="word-break: break-all;" rel="noopener nofollow">http://www.unsite.tld/" target="_blank" class="text-blue hover:opacity-90 " style="word-break: break-all;" rel="noopener nofollow">http://www.unsite.tld/" target="_blank" class="text-blue hover:opacity-90 " style="word-break: break-all;" rel="noopener nofollow">http://www.unsite.tld/" target="_blank" class="text-blue hover:opacity-90 " style="word-break: break-all;" rel="noopener nofollow">http://www.unsite.tld/" target="_blank" class="text-blue hover:opacity-90 " style="word-break: break-all;" rel="noopener nofollow">http://www.unsite.tld/" target="_blank" class="text-blue hover:opacity-90 " style="word-break: break-all;" rel="noopener nofollow">http://www.unsite.tld/" target="_blank" class="text-blue hover:opacity-90 " style="word-break: break-all;" rel="noopener nofollow">http://www.unsite.tld/ - Intitulé du site"
src="images/partenaires/vignettes2/logo_du_site.jpg"
title="http://www.unsite.tld/" target="_blank" class="text-blue hover:opacity-90 " style="word-break: break-all;" rel="noopener nofollow">http://www.unsite.tld/" target="_blank" class="text-blue hover:opacity-90 " style="word-break: break-all;" rel="noopener nofollow">http://www.unsite.tld/" target="_blank" class="text-blue hover:opacity-90 " style="word-break: break-all;" rel="noopener nofollow">http://www.unsite.tld/" target="_blank" class="text-blue hover:opacity-90 " style="word-break: break-all;" rel="noopener nofollow">http://www.unsite.tld/" target="_blank" class="text-blue hover:opacity-90 " style="word-break: break-all;" rel="noopener nofollow">http://www.unsite.tld/" target="_blank" class="text-blue hover:opacity-90 " style="word-break: break-all;" rel="noopener nofollow">http://www.unsite.tld/" target="_blank" class="text-blue hover:opacity-90 " style="word-break: break-all;" rel="noopener nofollow">http://www.unsite.tld/ - Intitulé du site"
</a>



Ce n'est pas super beau, mais ça fonctionne.

Cordialement,
--
Olivier Miakinen
Avatar
Eric Demeester
Bonjour,

Paul Gaborit (Thu, 23 Oct 2014 03:24:12 +0200 -
fr.comp.infosystemes.www.auteurs) :

Le HTML n'est a priori pas conçu pour être lisible.



:)

Je conçois, mais quand je code des trucs à la main, ce qui est fréquent,
et que je suis amené à y revenir pour les modifier, ce qui est fréquent
aussi, je préfère que ce soit lisible. Et commenté.

De façon connexe, quand je dois intervenir pour surcharger des trucs
dans le code d'un CMS, ce qui m'arrive fréquemment également, je
m'arrache souvent les cheveux par poignées. J'ai déjà du mal à entrer
dans la logique du code (chacun ses habitudes), mais quand en plus ça
s'affiche sous forme de gloubi-boulga, c'est l'estocade.

Un bon exemple d'espace parasites concerne les liens qui sont soulignés
par défaut. Ce soulignement dépase du texte s'il y a des espaces
parasites en début ou en fin de texte (mais dans <a>...</a>).



Merci à Olivier et toi pour ces utiles précisions, je me coucherai un
peu moins bête.
1 2