[Résolu] Bootstrap et validation HTML5

Bonsoir à tous,

Je suis en train de finaliser un site Internet, j'utilise Bootstrap et quand je passe au validateur HTML, j'ai cette erreur :

error: Element “ul” not allowed as child of element “ul” in this context. (Suppressing further errors from this subtree.)

En gros, j'ai une navbar (celle de Bootstrap) qui imbrique des ul dans d'autres ul. Je ne vois pas comment faire autrement vu que c'est le code donné tel quel (enfin, j'ai apporté mes modifications mais des ul dans d'autres, ça c'est de "base").

J'ai donc besoin de vous pour une solution / idée / piste / n'importe quoi qui pourrais aider

Merci.

EDIT : sur cette page il est écris ceci :

Contexts in which this element can be used:
Where flow content is expected.

Mais je ne sais pas quoi faire de cette information.


EDIT final : ok, j'ai trouvé d'où vient le problème, un li mal placé, merci.
Modifié par MagicCarpet (24 Jan 2015 - 13:44)

Salut,

L'explication à cette erreur est très simple : un élément ul ne peut avoir pour enfants directs que des éléments li (ainsi que des éléments script et template depuis le HTML 5). Autrement dit, si tu souhaites obtenir une liste imbriquée, le code HTML ressemblera à ça :

<ul>
  <li>item de menu 1</li>
  <li>item de menu 2
    <ul>
      <li>item de sous-menu 2-1</li>
      <li>item de sous-menu 2-2</li>
    </ul>
  </li>
  <li>item de menu 3</li>
</ul>

Quant à la citation de la spec (soit dit en passant, cette source permet de l'afficher sans que la page mette trois plombes à se charger ), elle indique simplement dans quels types d'élément l'élément en question peut être utilisé (ici, le type « flow content »). Mais, si tu lis attentivement la partie de la spec HTML 5 présentant l'élément ul, tu as cette portion importante :

La spec HTML 5 a écrit :
Content model:
Zero or more li and script-supporting elements.

CQFD

Merci pour ta réponse. Alors pour résumé ul>li ok mais ul>ul, pas bon.

J'ai copié coller le code fourni pour les nav-bar de Bootstrap et le code est bien valide HTML5.
Du coup, j'ai vérifier mon code, qui a priori est bon (mais je passe à côté d'un truc forcement vu que j'ai toujours la même erreur). Donc je colle mon code ici :

		<header>
	<nav class="navbar navbar-inverse navbar-fixed-top">
		<div class="container-fluid">
			<!-- Brand and toggle get grouped for better mobile display -->
			<div class="navbar-header">
				<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
					<span class="sr-only">Toggle navigation</span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
				<a class="navbar-brand" href="index.html"></a>
			</div>

			<!-- Collect the nav links, forms, and other content for toggling -->
			<div class="collapse navbar-collapse">
				<ul class="nav navbar-nav navbar-right navbar-custom">
					<li class="active"><a href="index.html">home</a></li>
					<li ><a href="gallery.html">gallery</a></li>
					<li ><a href="exhibitions.html">exhibitions</a></li>
					<li ><a href="history.html">history</a></li>
					<li ><a href="download.html">download</a></li>
					<li ><a href="contact.html">contact</a></li>
					<ul class="nav navbar-nav navbar-right">
						<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" style="padding-left: 30px;">EN <span class="caret"></span></a>
							<ul class="dropdown-menu" role="menu">
								<li><a href="en/index.html">EN</a></li>
								<li><a href="cs/index.html">CZ</a></li>
								<li><a href="fr/index.html">FR</a></li>
								<li class="disabled"><a href="de/index.html">DE</a></li>
								<li class="disabled"><a href="sp/index.html">ES</a></li>
							</ul>
						</li>
					</ul>
				</ul>
			</div>
		</div>
	</nav>
</header>

En gros, j'ai juste supprimer la partie de code où ce trouve les menus de gauche dans l'exemple de Bootstrap.

Merci pour l'aide.

Le code que tu reproduis n'est pas valide : tu as un élément ul enfant direct d'un autre élément ul ; en revanche, l'élément ul de classe "dropdown-menu" est correctement imbriqué.

Victor BRITO a écrit :
Le code que tu reproduis n'est pas valide : tu as un élément ul enfant direct d'un autre élément ul ; en revanche, l'élément ul de classe "dropdown-menu" est correctement imbriqué.

Le mot important et ici est le mot enfant direct
<ul1><ul2></ul></ul> pas possible ul2 est direct à l intérieur/par rapport a ul1 ou child
<ul1><li><ul2></ul></li></ul> est possible

<ul1><li><ul2></ul></li><ul3></ul3></ul> compliqué mais ul3 est il direct ici ?
<ul1>texte .....................<ul3></ul3></ul> compliqué mais ul3 est il direct ici ?
<ul1> <ul3></ul3></ul> compliqué mais avec l'espace ul3 est il direct ici ?
ceci serait pour une raison syntaxique et pas sémantique !!!
Est ce un détail ou non ? je ne sais pas .... d ou ma question
Cela tourne un peu comme conforme html5 qui ne garantie pas tout/rien sur le visuel .
discussion forum non officiel http://tinyurl.com/l88ceg7
NB : 1 et 2 et 3 de ul1 ul2 ul3 n existent évidemment pas dans le vrai code html
Modifié par 75lionel (05 Feb 2015 - 18:22)