Editar

<p><span style="color: #000000;"><span style="font-size: 12px; font-family: Arial, Helvetica, sans-serif; line-height: 20px;"><span style="font-family: arial, sans-serif; line-height: normal; font-size: 14px; color: #444444;"><span style="color: #000000; font-size: 12px; font-family: Arial, Helvetica, sans-serif; line-height: 20px;"><img style="float: right;" src="http://farm3.static.flickr.com/2788/4513108921_8573b25f91_o.png" alt="" /></span>Este es un sencillo c&oacute;digo que deber&iacute;amos tener dominado para respetar la estructura l&oacute;gica de la heredaci&oacute;n y anidaci&oacute;n de elementos en el HTML. Siendo que el XHTML es una variaci&oacute;n del HTML como una variaci&oacute;n m&aacute;s estricta del mismo, tendremos el beneficio de que nuestras listas se vean perfectas tanto estructural como visualmente (con CSS) en cualquier vanegador y/o dispositivo.</span></span></span></p> <p>Ya sea &lt;ol&gt; o &lt;ul&gt; aveces la dificultad est&aacute; entre los items de lista &lt;li&gt;, porque no todos saben con certeza d&oacute;nde ubicar la sublista.</p> <p>Propuse ejemplos con enlaces ya que es lo m&aacute;s com&uacute;n que se puede encontrar en las listas y en lo que m&aacute;s se complica.</p> <h2>&iquest;C&oacute;mo crear listas de la forma correcta?</h2> <p>Esta ser&iacute;a la estructura m&aacute;s b&aacute;sica,&nbsp;que corresponde a una simple lista:</p> <pre class="codigo"><span class="c1"><span class="c2"><span class="c3"><span class="c4"><span class="c5">&lt;ul&gt;<br />&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="..." title="..."&gt;...&lt;/a&gt;&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="..." title="..."&gt;...&lt;/a&gt;&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="..." title="..."&gt;...&lt;/a&gt;&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="..." title="..."&gt;...&lt;/a&gt;&lt;/li&gt;<br />&lt;/ul&gt;</span></span></span></span></span></pre> <p>Luego, si queremos agregar una sublista al segundo item debemos abrir &lt;/a&gt; y &lt;/li&gt; del mismo:</p> <pre class="codigo"><span class="c1"><span class="c2"><span class="c3"><span class="c4"><span class="c5">&lt;ul&gt;<br />&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="..." title="..."&gt;...&lt;/a&gt;&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="..." title="..."&gt;...&lt;/a&gt;<br /><br />&nbsp;&nbsp; &nbsp;&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="..." title="..."&gt;...&lt;/a&gt;&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="..." title="..."&gt;...&lt;/a&gt;&lt;/li&gt;<br />&lt;/ul&gt;</span></span></span></span></span></pre> <p>Para poner la sublista que queramos en el mismo orden que se muestra al principio.</p> <pre class="codigo"><span class="c1"><span class="c2"><span class="c3"><span class="c4"><span class="c5">&lt;ul&gt;<br />&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="..." title="..."&gt;...&lt;/a&gt;&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="..." title="..."&gt;...&lt;/a&gt;<br />&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &lt;ul&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="..." title="..."&gt;...&lt;/a&gt;&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="..." title="..."&gt;...&lt;/a&gt;&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="..." title="..."&gt;...&lt;/a&gt;&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/ul&gt;<br />&nbsp;&nbsp; &nbsp;&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="..." title="..."&gt;...&lt;/a&gt;&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="..." title="..."&gt;...&lt;/a&gt;&lt;/li&gt;<br />&lt;/ul&gt;</span></span></span></span></span></pre> <p>As&iacute; sucesivamente, podemos jugar con las listas y hacer muchas dentro de ella.</p> <pre class="codigo"><span class="c1"><span class="c2"><span class="c3"><span class="c4"><span class="c5">&lt;ol&gt;<br />&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="..." title="..."&gt;...&lt;/a&gt;&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="..." title="..."&gt;...&lt;/a&gt;<br />&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &lt;ul&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="..." title="..."&gt;...&lt;/a&gt;&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="..." title="..."&gt;...&lt;/a&gt;&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="..." title="..."&gt;...&lt;/a&gt;<br />&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;ul&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="..." title="..."&gt;...&lt;/a&gt;&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="..." title="..."&gt;...&lt;/a&gt;&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="..." title="..."&gt;...&lt;/a&gt;&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/ul&gt;<br />&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="..." title="..."&gt;...&lt;/a&gt;&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/ul&gt;<br />&nbsp;&nbsp; &nbsp;&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="..." title="..."&gt;...&lt;/a&gt;&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="..." title="..."&gt;...&lt;/a&gt;&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="..." title="..."&gt;...&lt;/a&gt;<br />&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &lt;ul&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="..." title="..."&gt;...&lt;/a&gt;&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="..." title="..."&gt;...&lt;/a&gt;&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/ul&gt;<br />&nbsp;&nbsp; &nbsp;&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="..." title="..."&gt;...&lt;/a&gt;&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="..." title="..."&gt;...&lt;/a&gt;&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="..." title="..."&gt;...&lt;/a&gt;&lt;/li&gt;<br />&lt;/ol&gt;</span></span></span></span></span></pre> <p>La idea no ser&iacute;a hacer algo tan grotesco como el ejemplo.</p> <h2>&iquest;C&oacute;mo NO crear listas de la forma correcta?</h2> <p>Este constituir&iacute;a un mal ejemplo, donde la sublista se agrega despu&eacute;s del item y no dentro de &eacute;l:</p> <pre class="codigo"><span class="c1"><span class="c2"><span class="c3"><span class="c4"><span class="c5">&lt;ul&gt;<br />&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="..." title="..."&gt;...&lt;/a&gt;&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="..." title="..."&gt;...&lt;/a&gt;&lt;/li&gt;<br />&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &lt;ul&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="..." title="..."&gt;...&lt;/a&gt;&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="..." title="..."&gt;...&lt;/a&gt;&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/ul&gt;<br />&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="..." title="..."&gt;...&lt;/a&gt;&lt;/li&gt;<br />&lt;/ul&gt;</span></span></span></span></span></pre> <p>Ya est&aacute;, no hay otra forma de equivocarse, solo hay que respetar las respectivas anidaciones en el orden &lt;ul&gt; &lt;li&gt; &lt;ul&gt; &lt;li&gt;.</p> <div id="_mcePaste" style="overflow: hidden; position: absolute; left: -10000px; top: 929px; width: 1px; height: 1px;"> <pre class="codigo"><span class="c1"><span class="c2"><span class="c3"><span class="c4"><span class="c5">&lt;ul&gt;<br />&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="..." title="..."&gt;...&lt;/a&gt;&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="..." title="..."&gt;...&lt;/a&gt;<br />&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &lt;ul&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="..." title="..."&gt;...&lt;/a&gt;&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="..." title="..."&gt;...&lt;/a&gt;&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="..." title="..."&gt;...&lt;/a&gt;&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/ul&gt;<br />&nbsp;&nbsp; &nbsp;&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="..." title="..."&gt;...&lt;/a&gt;&lt;/li&gt;<br />&nbsp;&nbsp;&nbsp; &lt;li&gt;&lt;a href="..." title="..."&gt;...&lt;/a&gt;&lt;/li&gt;<br />&lt;/ul&gt;</span></span></span></span></span></pre> </div>

o salir