Cómo semánticas X/HTML puede ahorrar tiempo cuando vamos a escribir CSS?

Question

Cómo Semánticas X/HTML mark-up puede ahorrar tiempo -

1. cuando vamos a escribir CSS para sitio web
2. y si alguno de los cambios de diseño viene de cliente en el futuro.
3. Y por qué de Mesa basado en diseños tomar más tiempo siempre en los dos condición

Hoy tengo que Explicar estas cosas a los estudiantes.

He de ejemplo pero quiero algo más de buen ejemplo y las ideas para explicar muy bien.

Quiero explicar cuáles son los beneficios Semántico X/HTML mark-up de los desarrolladores punto de vista.

Gracias de antemano

Actualización:

Los beneficios del uso de la semántica de mark-up:

1. Será legible en buena manera a la gente ver el documento en un entorno donde CSS no puede ser aplicada.
2. Será mucho más fácil para los desarrolladores web para mantener el código, y para separar el contenido (HTML) de presentación (CSS).
3. Marcado semántico puede reducir las necesidades de css grupo selectores en algunos casos.

Answer 1

Desde mi experiencia de trabajo:He tenido varias veces ahora a ver legado de marcado de mi predecesor, o desde totalmente de otras personas (y de hecho una o dos veces de mí mismo).A veces he tenido sólo lo que vino a partir de la visualización de la fuente en un navegador.Mis conclusiones hasta el momento fueron:

• Si el autor utiliza marcado semántico la medida de lo posible, junto con clara y lógica de los nombres de clase, era muy fácil y divertida de descubrir la estructura de la página y, por ejemplo, el código de un nuevo widget o reestructurar el diseño de la columna o cosas

• Si el autor utiliza la tabla se basa el diseño, y yo también tenía cosas desde el final de la década de los 90 a la vista, es un completo desastre.Usted tiene que averiguar, los cuales fila de la tabla hace qué, de que la celda de la tabla donde pertenece y si usted comienza a pensar que vas a tener un agarre, se han pasado por alto un rowspan="3" 300lines de marcado anteriormente.Incluso en Firebug puede vuelto loco con una sopa de etiqueta.

  Añadiendo cosas nuevas aquí puede llegar a ser bastante aventurero.Si va a agregar contenido a una celda de la tabla, y no completamente fijar la anchura y la altura de las cosas nuevas, puede que te encuentres con desagradando brechas de toda la página y olvidar para abrir o cerrar <td>s en algún lugar (con 200 errores de validación en la página original que probablemente se pierda algo en algún lugar) puede conducir a una completamente atornillada a la vista.

• Si el autor utiliza divs y se extiende por todo el lugar, pero no con marcado semántico (es decir, de la escritura <div class="header1"/> en lugar de <h1/>), es aún maneras mejor que la tabla de diseño (en la mayoría de los porque de la mencionada rowspan y colspan y porque hav una posibilidad de que la página no totalmente volar, si hay un </div> desaparecidos en algún lugar), pero todavía se puede ir loco en el marcado como

  </div></div>
  </div>
     </div>
    </div>
  </div></div>
    </div>
  

  Además, si tuviera que acompaña a una hoja de estilos, era sobre todo un completo desastre, demasiado.La diferenciación entre .header, .header1, div.header_level1 y #middle .h1 te obliga a saltar hacia atrás y adelante entre la hoja de estilos y marcas.

Answer 2

La principal ventaja, además de la más fiable y controlable código, para los desarrolladores es claro código.Con la escritura semántica XHTML puedes evitar escribir vaga código que va a ser difícil de descifrar por otros desarrolladores o a ti mismo en el futuro.

Es decir. <address> es mejor para la inclusión de una dirección que el uso de un <div> (lo cual sucede mucho...), a pesar de tener la misma flexibilidad, el estilo y la mejora de la legibilidad.

Answer 3

1. vamos a escribir CSS primera vez, para el sitio web

Cada sitio web tiene diferente aspecto/diseño, tienes que escribir el css para que, por primera vez, a menos que hay una cierta similitud entre sus diseños.

2. y si alguno de los cambios de diseño viene de cliente en el futuro.

Usted puede hacer que sus sitios web utilizando el patrón de diseño MVC, esto va a elevar un montón de cambios en el diseño de su sitio.

3. Y por qué Tabla diseños basados tomará más tiempo siempre en los dos condición

Debido a su marcado está diseñado de manera que usted tiene que escribir más, mientras que en div diseños basados utilizamos claro y flotador principalmente que hacen un gran trabajo de creación rápida de los diseños.