Elemento nav

hackjose · #1 (**permalink**) 09/12/2013, 20:00

Buenas noches

Estoy empezando a desarrollar una web y aparecio una duda sobre el elemento nav

Código HTML:

Ver original<html>
<head>
    <title></title>
    <meta charset="utf8" />
<style type="text/css">
@font-face
{
  font-family: 'Electrolize';
  font-style: normal;
  font-weight: 400;
  src: local('Electrolize'), local('Electrolize-Regular'), url(http://themes.googleusercontent.com/static/fonts/electrolize/v2/DDy9sgU2U7S4xAwH5thnJ4bN6UDyHWBl620a-IRfuBk.woff) format('woff');
}
*
{
    font-family: Electrolize;
    font-size: 16px;
    margin: 0;
    padding: 0;
}
#hdrpagina
{
    background-color: #0F558E;
    height:32px;
    line-height: 32px;
    text-align: center;
    width:100%;
}
#hdrpagina h1
{
    color: #fff;
    display: inline-block;
    font-size: 1em;
    font-weight: 900;
}
#hdrpagina input[type="text"]
{
    border:none;
    border-bottom-left-radius:5px;
    border-top-left-radius:5px;
    height:1.25em;
    width: 170px;
}
#hdrpagina input[type="button"]
{
    background-color: #fff;
    border:none;
    border-left:1px #000 dotted;
    border-bottom-right-radius:5px;
    border-top-right-radius:5px;
    color: #000;
    font-weight: 900;
    height:1.25em;
    margin-left: -8px;
}
 
#misc
{
    margin: 5px 0;
    text-align: center;
    width: 100%;
}
#misc ul li
{
    display: inline-block;
}
#misc li.first
{
    width: 33%;
}
#misc li.middle
{
    width: 27%;
}
#misc li.last
{
    width: 40%;
}
#navpagina
{
    margin: 0 auto;
    text-align: center;
    width: 240px;
}
#navpagina #hdrcat
{
    font-size: 1.5em;
}
#navpagina select
{
    border-radius: 10px;
    border:2px #0F558E  solid;
    width: 98%;
}
#navpagina select option:nth-child(even)
{
    background-color: #ddd;
}
#navpagina select option:nth-child(odd)
{
    background-color: #bbb;
}
</style>
</head>
<body>
<header id="hdrpagina">
    <h1>CAMBIOS XD</h1>
    <input type="text" name="txtbuscar" id="txtbuscar" />
    <input type="button" name="btnbuscar" id="btnbuscar" value="Ok" />
</header>
 
<div id="misc">
    <ul>
        <li class="first">Iniciar Sesion</li><li class="middle">Registrate</li><li class="last">Haz un Cambio</li>
    </ul>
</div>
 
<nav id="navpagina">
    <section ="stncat">
        <header id="hdrcat">Categorias</header>
        <select size="8" name="cat">
            <option>Audio y Video</option>
            <option>Animales y Mascotas</option>
            <option>Arte y Antiguedades</option>
            <option>Autos, Motos y Otros</option>
            <option>Bebes</option>
            <option>Coleccionables</option>
            <option>Computacion</option>
            <option>Deportes</option>
            <option>Electronica</option>
            <option>Herramientas</option>
            <option>Hogar y Electrodomesticos</option>
            <option>Hombre</option>
            <option>Insdustria y Oficina</option>
            <option>Inmuebles</option>
            <option>Instrumentos Musicales</option>
            <option>Joyas y Otros</option>
            <option>Juguetes y Juegos</option>
            <option>Libros, Revistas y Otros</option>
            <option>Mujer</option>
            <option>Musica y Peliculas</option>
            <option>Niños y Niñas</option>
            <option>Salud y Belleza</option>
            <option>Servicios</option>
            <option>Videojuegos y Consolas</option>
            <option>Otras Categorias</option>
        </select>
    </section>
    <section id="stnsub">
        <header id="hdrcat">Subcategorias</header>
        <select size="4" name="cat">
            <option>Casas</option>
            <option>Terrenos</option>
            <option>Bodegas</option>
            <option>Locales</option>
            <option>Oficinas</option>
            <option>Apartamentos</option>
            <option>Departamentos</option>
        </select>
    </section>
</nav>
 
 
</body>
</html>

Los option enviarian peticiones mediante AJAX y el contenido de la pagina se reemplazaria con el nuevo contenido.

Osea nunca navegaria a otras paginas, incluso los option no me servirian para navegar en la misma pagina(#seccion1, #seccion2)

Como yo lo tengo no obedece a la especificacion que dice que nav contiene los enlaces para navegar a travez del sitio o para navegar en la misma pagina.

Me gusta nav por que hace mi codigo de facil lectura
Que opinan deberia cambiarlo por un section o que otro elemento?

A mi parecer "categorias" y "subcategorias" forman una agrupacion tematica y pues pienso que si estan en el outline sin titulo.

saludos