Menu de navegación en pestañas

[Kickdog]

Hola a todos,

Tengo algunas dudas sobre la correcta maquetación para un menú de
pestañas y me gustaría saber vuestra opinión sobre tres ejemplos que
he visto en internet para saber cuál es el más correcto en cuanto a
estructura xhmtl y accesibilidad.

1.- Ejemplo : http://www.onlinetools.org/tools/domtabdata/
Resumen del código:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<div style="display: block;"> Contenido para el item 1 </div>
<div style="display: none;"> Contenido para el item 2 </div>
<div style="display: none;"> Contenido para el item 3 </div>

En este ejemplo, si lo vemos sin estilos, el item del menú y el
contenido no quedan relacionados, por lo que no lo veo muy correcto,
aunque he visto este ejemplo en un montón de páginas.

2.- Ejemplo: http://www.komodomedia.com/ (menú auxiliar de la derecha)

Resumen del código:
<ul>
<li>
<div>
<h3>Item 1</h3>
<ul>
<li><a href="#">Item 1-1</a></li>
<li><a href="#">Item 1-2</a></li>
</ul>
</div>
</li>

<li>
<div>
<h3>Item 2</h3>
<ul>
<li><a href="#">Item 2-1</a></li>
<li><a href="#">Item 2-2</a></li>
</ul>
</div>
</li>

<li>
<div>
<h3>Item 3</h3>
<ul>
<li><a href="#">Item 3-1</a></li>
<li><a href="#">Item 3-2</a></li>
</ul>
</div>
</li>
</ul>

En este segundo ejemplo, si lo vemos sin estilos, lo items de menú
principales quedan relacionados con el submenú que le corresponde. La
duda es si meter un elemeto <div> y <h3> es correcto dentro de un <li>


3.- Ejemplo: http://www.bcn.es/ (bloque de pestañas correspondiente a
La ciudad)
Resumen del código:
<div>
<h3>Item 1</h3>
<div>
<ul>
<li><a href="#">Item 1-1</a></li>
<li><a href="#">Item 1-2</a></li>
</ul>
</div>

<h3>Item 2</h3>
<div>
<ul>
<li><a href="#">Item 2-1</a></li>
<li><a href="#">Item 2-2</a></li>
</
ul>
</div>

<h3>Item 3</h3>
<div>
<ul>
<li><a href="#">Item 3-1</a></li>
<li><a href="#">Item 3-2</a></li>
</ul>
</div>
</div>

En este último ejemplo, los items principales de menú también quedan
relacionados con el items del submenú pero los items principales son
<h3> no son elementos de lista. Por lo general, los elementos de menú
de navegación siempre hay que meterlos en una lista, no?

Muchas gracias, espero que estas diferencias os resulten interesantes
para debatir y encontrar la forma más correcta de maquetar un menú de
pestañas.

Un saludo,

Oihana

[Julio Camarero]

Hola, 

podrías utilizar anclas para que los elementos de tu menú queden enlazados con el contenido real, y además, el navegador hará focus automáticamente al pinchar en ellos.

un saludo

2010/6/1 Kickdog <oihana....@gmail.com>

--
Has recibido este mensaje porque estás suscrito al grupo "Usable y Accesible" de Grupos de Google.
Para publicar una entrada en este grupo, envía un correo electrónico a usable-y-...@googlegroups.com.
Para anular tu suscripción a este grupo, envía un correo electrónico a usable-y-accesi...@googlegroups.com
Para tener acceso a más opciones, visita el grupo en http://groups.google.com/group/usable-y-accesible?hl=es.

[Kickdog]

Hola,

Muy interesante la valoración, la veo muy coherente.
Muchísimas gracias, voy a implemetar de esa forma el menú ;)

Un saludo

On 1 jun, 12:56, Julio Camarero <juliocamar...@gmail.com> wrote:
> Hola,
>
> podrías utilizar anclas para que los elementos de tu menú queden enlazados
> con el contenido real, y además, el navegador hará focus automáticamente al
> pinchar en ellos.
>
> un saludo
>

> 2010/6/1 Kickdog <oihana.albe...@gmail.com>

>
>
>
> > Hola a todos,
>
> > Tengo algunas dudas sobre la correcta maquetación para un menú de
> > pestañas y me gustaría saber vuestra opinión sobre tres ejemplos que
> > he visto en internet para saber cuál es el más correcto en cuanto a
> > estructura xhmtl y accesibilidad.
>
> > 1.- Ejemplo :http://www.onlinetools.org/tools/domtabdata/
> >     Resumen del código:
> >     <ul>
> >        <li>Item 1</li>
> >        <li>Item 2</li>
> >        <li>Item 3</li>
> >     </ul>
> >     <div style="display: block;"> Contenido para el item 1 </div>
> >     <div style="display: none;"> Contenido para el item 2 </div>
> >     <div style="display: none;"> Contenido para el item 3 </div>
>
> > En este ejemplo, si lo vemos sin estilos, el item del menú y el
> > contenido no quedan relacionados, por lo que no lo veo muy correcto,
> > aunque he visto este ejemplo en un montón de páginas.
>

> > 2.- Ejemplo:http://www.komodomedia.com/(menú auxiliar de la derecha)

> > 3.- Ejemplo:http://www.bcn.es/(bloque de pestañas correspondiente a

> > usable-y-accesi...@googlegroups.com<usable-y-accesible%2Bunsubs cr...@googlegroups.com>