¿Es semánticamente correcto mi XHTML?

Hola chicos, soy un asiduo lector de CristaLab, pero este es mi primer post. Ya he diseñado varias cosas con CSS, pero no se por qué para esto necesito un poquito de ayuda. Sobre todo a la hora de elegir la estructura XHTML. Quiero hacer esto:


No se muy bien cómo diseñar la estructura de este div. En principio he pensado en hacer un div con id cuadroBusqueda con la propiedad backgroud con este gif:


Ahora vienen todas las dudas. Lo fácil sería hacer una tabla, pero... NO! TENGO QUE EVITARLO! LAS TABLAS NO SON PARA ESTO!

Mi XHTML sería algo así (corríganme por favor):

Código :

<div id="cuadroBusqueda">
  <h2>Buscar alojamiento</h2>
  <div class="formLogin">
   <ul>
     <li>
       <label for="desde">Desde</label><input name="desde" /><a href="#"><img src="calendario.gif"  /></a>
    </li>
     <li>
       <label for="hasta">Hasta</label><input name="hasta"  /><a href="#"><img src="calendario.gif"  /></a>
    </li>
    <li>
      <input name="capacidad" />
    </li>
  </ul>
  <a id="botonOK" href="#">
          <span class="btnLeft"></span>
          <span class="btnMiddle">OK</span>
          <span class="btnRight"></span>
  </a>
  <p>Cambiar búsqueda
    <ul>
      <li><a href="#">Por tipo de vivienda</a></li>
      <li><a href="#">Por municipio</a></li>
    </ul>
  </p>

Mis dudas principales:
El botón me parece una auténtica chapuza porque le he puesto tres <span>, pero como puede ser que en el botón se escriba una frase más larga, no puedo hacerlo con una sola imagen
La lista <ul> no se si debería de aparacer o no, y los <li> no se qué deberían contener

Después vendrán los problemas de CSS, pero de momento quiero asegurarme de que el XHTML sea semánticamente correcto. ¿Cómo lo veis?

Semanticamente hablando para la parte del formulario le va mejor una lista de definicion que una no ordenada. Lo de tu boton OK esta bien, asi le permitira crecer a lo que contenga. Y en el input "capacidad" le colocaria el <label>, pero desde CSS lo esconderia con display: none, asi si tu pagina tuviera los CSS deshabilitados, se lograria ver el label de Capacidad:

El parrafo de cambiar busqueda lo cerraria donde termina la frase, en ves de que cierre terminando el UL, o sea <p>Cambiar búsqueda</p> y de ahi el UL.

Luego te falta encerrar el div "frmLogin" en la etiqueta <form> con los atributos que corresponda.

Hay muchas versiones de qué es lo semanticamente correcto para los formularios, algunos dicen las listas de definicion, otros que las etiquetas de label e inputs son suficientes, y otros defienden a las tablas porque llenar un formulario es como llenar una tabla dinamicamente (para formularios super complejos). Yo te diria que sí trates de mantener todo semanticamente correcto, pero no te vuelvas loco con el tema, a veces por tratar de pegarse a esa regla terminas teniendo un documento muy pesado que no beneficia al usuario final, a veces vas a tener que hacer formulario grandes con muchos campos y 3 o 4 columnas, en lo cual una tabla podria ser la mejor opcion.

En google puedes encontrar paginas que debaten sobre este tema, al final tu eres quien elige qué es lo mejor que puedes ofrecer.

Un span sería suficiente para el boton. La verdad 3 span + la etiqueta a es algo de código innecesario.

@ivanfc0o

Bueno si se considera de usar elmetodo expuesto en esa pagina que se conoce como "sliding doors" pues si, solo se necesita un span, y si desea colocar cualquier tamaño de texto, tendria que crear una imagen mas grande, lo suficientemente grande para que no se acabe facilmente por mas largo que sea el texto.

Muchas gracias a los dos

drarock escribió:

Totalmente de acuerdo

drarock escribió:

Sigue sin convencerme

drarock escribió:

Bien! No se me había ocurrido

drarock escribió:

Ok, pero entonces parece que la frase Cambiar búsqueda y la lista de opciones de búsqueda no tienen relación cuando sí que la tienen ¿no?

drarock escribió:

Generalmente soy bastante meticuloso, por eso esto del XHTML y CSS me vino de perlas, separar contenido y diseño me pareció fantástico, por eso me da tanta rabia cosas como la del botón, incluso en el caso de un único <a> y un solo <span>, ¡¡¡debería poder hacerse con tan sólo un <a>!!

ivanfc0o escribió:

Gracias, había leido varias veces sobre esta técnica, pero nunca me quedó claro. Ahora que me surge el problema lo entiendo mejor. A pesar de ello, me sigue dando mucha, mucha, mucha rabia tener que poner el <span>

Muchas gracias a ambos, vamos a ver qué tal queda y os digo.

TomasCrespo escribió:

Se entiende al leerlo, la idea de mantener semanticamente estructurado un xhtml es encontrarle el significado al contenido de cada etiqueta con leerla, ademas un <UL> no puede estar dentro de un <P>, es semanticamente incorrecto, quizas aun no validas tu codigo, o estas trabajando con xhtml transitional, te recomiendo que uses el XHTML 1.0 Strict ya que te gusta mantener tu codigo limpio.

Y repito, no te me aloques con el tema de la semantica

Bien chicos, ya casi lo tengo. Sin embargo sigo teniendo un problemilla con el botón. Finalmente me decidí por la opción de "puertas correderas" para utilizar un solo <span>, pero surge un problema colateral con las transparecias de las dos imágenes .png
Con el método de tres <span> no había problema porque las imágenes en ningún momento estaban superpuestas.
Sin embargo con el método de un solo <span> se superponen las dos imágenes, por lo que las transparencias de estas hacen un efecto no deseado:


Se me ocurren dos soluciones:

Hacer una única imagen para el botón y ponerla de fondo para <a>
[list=2]
Hacerlo con tres spans y tres imágenes

El caso es que me gustaría poder hacerlo con el método de "puertas correderas" para poder utilizarlo en cualquier botón, independientemente del ancho

Un saludo

Otra solucion para continuar hacerlo con sliding doors el <A> tenga el fondo de "imagen 1" y tenga un padding-left del ancho de "imagen 1" (o la cantidad que consideres suficiente para que no traspace a la parte transparente), y dentro el <SPAN> con fondo de "imagen 2" con un padding-right del mismo tamaño de ancho que "imagen 1" (para que tengan un mismo colchon a los extremos); tanto <span> como <a> deben ser display:block;

Chachi piruli !!!!

Ahora se queda genial !

Muchas gracias, este es el resultado con css y el botón con el método de puertas correderas:



Se siguen aceptando sugerencias de diseño