5568 sujets

Sémantique web et HTML

Bonjour,

je suis confronté au problème que voici.

Une collègue de travail vient de me dire qu'il serait possible d'imbriquer un balise <p> de paragraphe directement dans une balise de liste <ul>.

De mon coté je trouve cela aberrant et n'est pas trouvé de preuve que cela est possible. Le W3C ne relate comme enfant à UL, uniquement la balise LI. Ce qui me semble logique.

Ma collègue vient de faire une page de test avec cette fameuse imbrication <ul><p></p></ul> et apparemment cela passe au validateur W3C.


Déjà quel intérêt allez vous me dire ?

Ça serait pour créer un titre à la liste... Smiley rolleyes


Que pensez vous de tout ca ?
Est ce possible ?
Modifié par Cocci_uk (16 Dec 2008 - 18:19)
C'est bien toi qui as raison.

Le code suivant :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr" >
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />		<title>Test</title>
	</head>
	
	<body>
		<ul>
			<p>Mon paragraphe de test</p>
			<li>item de liste 1</li>
			<li>item de liste 2</li>
			<li>item de liste 3</li>
		</ul>
	</body>
</html>


Me génère 4 erreurs :

a écrit :

1. Error Line 9, Column 5: document type does not allow element "p" here; assuming missing "li" start-tag.

<p>Mon paragraphe de test</p>


2. Error Line 10, Column 6: document type does not allow element "li" here; missing one of "ul", "ol" start-tag.

<li>item de liste 1</li>


The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.

One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").

3. Error Line 11, Column 6: document type does not allow element "li" here; missing one of "ul", "ol" start-tag.

<li>item de liste 2</li>

The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.

One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").

4. Error Line 12, Column 6: end tag for "li" omitted, but OMITTAG NO was specified.

</ul>

You may have neglected to close an element, or perhaps you meant to "self-close" an element, that is, ending it with "/>" instead of ">".
5. Info Line 9, Column 3: start tag was here.

<p>Mon paragraphe de test</p>


Après, il faut voir avec quel doctype et/ou quel validateur ta collègue aurait passé sa page au validateur !!!

Et puis sémantiquement, ajouter un titre de cette façon n'est pas correct. Elle aurait dit <hx>, admettons, mais un paragraphe...
Modifié par mistike (16 Dec 2008 - 16:52)
Bonjour,

a écrit :
Ça serait pour créer un titre à la liste...


Créer un titre avec un p ouch !!!! Smiley ohwell

Et pourquoi pas mettre tout betement la balise qui va bien avant la liste genre au hasard un Hn.

Ha tiens grilled par mistike Smiley lol
Modifié par knarf (16 Dec 2008 - 16:54)
Hello Cocci_uk,

Je plussoie évidemment mes prédécesseurs concernant l'utilisation d'un titre de niveau pour créer ...un titre.
Evidemment, ce Hn sera forcemment imbriqué dans une balise li et non directement enfant de ul (qui ne contient évidemment que des li comme enfants directs) :

<ul>
	[#blue]<li>Beurk Sylvain</li>
	<li>Merci de vous reporter au code de Florent</li>[/#]
</ul>

Ou effectivement avant la liste comme le préconise Knarf.
Un lien, cher à Heyoan, fort pratique Smiley cligne :
http://giminik.developpez.com/xhtml/ul.html

Cdt,
Sylvain
Modifié par 6l20 (16 Dec 2008 - 17:52)
Bonjour,

Non:
<ul>
	<li><h2>Titre de section 1</h2></li>
	<li>section 1.1</li>	
	<li>section 1.2</li>
	<li>section 1.3</li>
	<li><h2>Titre de section 2</h2><li>
	<li>section 2.1</li>	
	<li>section 2.2</li>
	<li>section 2.3</li>
	<li>Et caetera.</li>
</ul>


Oui:
<h2>Titre de section 1</h2>
<ul>
	<li>section 1.1</li>	
	<li>section 1.2</li>
	<li>section 1.3</li>
</ul>
<h2>Titre de section 2</h2>
<ul>
	<li>section 2.1</li>	
	<li>section 2.2</li>
	<li>section 2.3</li>
	<li>Et caetera.</li>
</ul>


Et oui:
<ul>
	<li>
		<h2>Titre de section 1</h2>
		<ul>
			<li>section 1.1</li>	
			<li>section 1.2</li>
			<li>section 1.3</li>
		</ul>
	</li>
	<li>
		<h2>Titre de section 2</h2>
		<ul>
			<li>section 2.1</li>	
			<li>section 2.2</li>
			<li>section 2.3</li>
		</ul>
	</li>
	<li>Et caetera.</li>
</ul>


Petite préférence pour le premier oui, car pourquoi faire plus compliqué que nécessaire?
Modifié par Florent V. (16 Dec 2008 - 17:32)
6l20, la structure que tu donnes met au même niveau titre et item ... Smiley decu
La meilleure solution reste un titre avec sa liste (non) ordonnée.
Donc dans ton exemple 2 titres et 2 listes. Smiley cligne

<edit>Grilled (Carbonized Smiley lol ) by Sir Florent V. Smiley cligne </edit>
Modifié par yodaswii (16 Dec 2008 - 17:38)
Cela vous rassure si je vous dit que c'est exactement ce que j'avais en tête et que je comptais poster ?
Problème de connexion neuronale, je retourne boire du café...
Tout a été dit et corrigé, thanks Smiley cligne
Oula je m'attendais aps à autant de réactions !

Merci à tous ! Smiley smile

Pour ma part je suis votre raisonnement. Me voilà donc rassuré.

Pour le doctype utilisé je ne sais pas trop mais "apparemment" ça serait du XHTML strict 1.0 (ce qui me semble louche !).

Si je devais le faire moi même j'utiliserais la technique N°2 de Florent.

Encore une fois merci à tous pour ces (supermega rapide) réactions ! Smiley biggol
Modifié par Cocci_uk (16 Dec 2008 - 18:20)