Al definir qué es contenido y presentación, vea su documento HTML como contenedor de datos. Luego pregúntese lo siguiente en cada elemento y atributo:
Qué representa el/elemento de atributo de una entidad significativa en mis datos?
Por ejemplo, ¿las palabras entre <b> están en negrita simplemente con fines de visualización o si deseo agregar énfasis en esa información?
¿Estoy usando el atributo/elemento adecuado para que la propiedad represente el tipo de datos que quiero representar?
Como quiero enfatizar esa sección en particular, debería usar <em> (no significa cursiva, significa énfasis y puede hacerse en negrita) o <strong> dependiendo del nivel de énfasis deseado.
¿Estoy utilizando el atributo/elemento solo para fines de visualización? En caso afirmativo, ¿se puede eliminar el elemento y diseñar el elemento padre con CSS?
En ocasiones, una etiqueta de presentación simplemente puede reemplazarse por reglas de CSS en el elemento padre.En ese caso, la etiqueta de presentación debe eliminarse.
Después de hacerse estas tres simples preguntas, por lo general puede tomar una decisión bastante informada. Un ejemplo:
Código original: <label for="name"><b>Name:</b></label>
Comprobación de la etiqueta <b> ...
Qué representa el/elemento de atributo de una entidad significativa en mis datos?
No, la etiqueta no representa un nodo de datos. Está allí puramente para la presentación.
¿Estoy utilizando el atributo/elemento adecuado para que la propiedad represente el tipo de datos que quiero representar?
<b> se utiliza para la presentación de elementos en negrita.
¿Estoy utilizando el atributo/elemento solo para fines de visualización? En caso afirmativo, ¿se puede eliminar el elemento y diseñar el elemento padre con CSS?
Dado que <b> es de presentación y lo estoy usando para la presentación, sí. Y dado que el elemento <b> afecta a la totalidad de <label>, se puede quitar y aplicar el estilo al <label>.
Semántica El objetivo de HTML no es para simplificar el diseño y rediseño o para evitar un estilo en línea, sino para ayudar a un analizador de entender lo que representa etiqueta en particular en el documento. De esta manera, se pueden crear aplicaciones (es decir, motor de búsqueda) para decidir inteligentemente qué significa su contenido y clasificarlo en consecuencia.
Por lo tanto, tiene sentido utilizar la propiedad CSS content: para agregar comillas alrededor del texto ubicado en una etiqueta <q> (no tiene valor para los datos contenidos en su documento otra presentación), pero no tiene sentido el uso del mismo Propiedad de CSS para agregar un símbolo © en su pie de página, ya que tiene un valor en sus datos.
Lo mismo se aplica a los atributos. El uso del atributo width y height en una etiqueta <img> que representa un icono en el tamaño 16x16 tiene sentido semántico ya que es importante comprender el significado de la etiqueta <img> (un icono puede tener diferentes representaciones dependiendo del tamaño en que se muestre). El uso de los mismos atributos en una etiqueta <img> que representa una miniatura de una imagen más grande no lo hace.
A veces necesitará agregar elementos no semánticos para poder lograr la presentación deseada, pero por lo general son evitables.
No hay elementos incorrectos. Hay usos incorrectos de elementos particulares. <b> no se debe utilizar al agregar énfasis. <small> se debe utilizar para el texto legal, no para hacer texto más pequeño (consulte HTML5 - Section 4.6.4 para saber por qué), etc ... Todos los elementos tienen un escenario de uso particular y todos representan datos (menos elementos de presentación, pero sí tienen uso en algunos casos). No se deben dejar de lado elementos.
Los atributos son algo diferente.La mayoría de los atributos son de naturaleza presentacional. Los atributos como <img border> y <body fgcolor> rara vez tienen significado en los datos que está representando, por lo tanto, no debe usarlos (excepto en esos casos excepcionales).
Los motores de búsqueda son un buen ejemplo de por qué los documentos semánticos son tan importantes. Microformats son un conjunto predefinido de elementos y clases que puede usar para representar datos que los motores de búsqueda entenderán de cierta manera. The product price information in Google Searches es un ejemplo de semántica en el trabajo.
Al usar las reglas predefinidas en los estándares establecidos para almacenar información en su documento, los programas de terceros pueden entender lo que parece ser una pared de texto sin usar algoritmos heurísticos que pueden ser propensos a fallas. También ayuda a los lectores de pantalla y otras aplicaciones de accesibilidad a comprender más fácilmente el contexto en el que se presenta la información. También ayuda enormemente a la mantenibilidad de su marcado ya que todo está vinculado a una definición establecida.
pero sólo tiene imágenes de fondo. quiere decir que no deberíamos usar![]()
si queremos mantener la separación del contenido y la presentación –
Todos los diseños en la galería CSS Zen Garden están usando el mismo archivo HTML, que puede ver aquí: http://www.csszengarden.com/ zengarden-sample.html. Nada se cambia entre cada diseño. Solo la referencia al archivo CSS correcto. Hay más de 200 diseños y la variación es drástica. –
@Jitendra: No, no, no ... nadie dice que tenga que evitar una etiqueta en particular. El objetivo es ser sensato y lógico al respecto, y obtener una separación lo más limpia posible. CSS Zen es un excelente sitio de demostración, pero buena suerte tratando de obtener ese nivel de separación con una aplicación web. – slugster