¿Cuál es el significado real de la separación de contenido y presentación?

Question

¿Cuál es el significado real de la separación de contenido y presentación?

¿Es sólo significa evitar CSS en línea?

¿Quiere decir que el diseño debe ser capaz de manipular sin cambiar el código HTML?

¿Se puede realmente hacer cualquier cambio en el diseño de CSS solamente?

• Si queremos cambiar el tamaño de imágenes a continuación, vamos a tener que ir en código HTML
• Si WAN para añadir una mayor salto de línea en el párrafo a continuación, de nuevo sin tiene que ir en el código HTML
• Si queremos añadir un separador más en algún lugar, de nuevo tendremos ir en el código HTML

¿Qué X / etiqueta HTML que debemos evitar utilizar para mantener la separación de contenido y presentación?

es la separación del contenido y la presentación también es útil para los usuarios de accesibilidad del lector / pantalla? ... y para el programador / desarrollador / diseñador?

Answer 1

En la definición de lo que es el contenido y la presentación, véase el documento HTML como un contenedor de datos. Luego pregúntese lo siguiente en cada elemento y atributo:

• ¿Representa el / elemento de atributo de una entidad significativa en mis datos?
  Por ejemplo, son las palabras entre la etiqueta <b> están en negrita sólo con fines de exhibición o dejaron Quiero añadir énfasis en que los datos?

• ¿Estoy usando el atributo / elemento adecuado a la propiedad representan el tipo de datos que yo quiero representar?
  Ya que quiero añadir énfasis en esa sección en particular, debería utilizar <em> (esto no significa cursiva, esto significa que el énfasis y se puede hacer negrita) o <strong> dependiendo del nivel de énfasis deseado.

• ¿Estoy usando el / elemento de atributo sólo con fines de exhibición? Si es así, se puede quitar el elemento y el elemento principal de estilo usando CSS?
  A veces una etiqueta de presentación, simplemente se puede sustituir por reglas CSS en el elemento padre. En cuyo caso, la etiqueta de presentación debe ser eliminado.

Después de hacerse estas tres preguntas sencillas, que suelen ser capaces de tomar una decisión muy informado. Un ejemplo:

  

Código original:   <label for="name"><b>Name:</b></label>

     

Comprobación de la etiqueta <b> ...

     

¿Representa el / elemento de atributo de una entidad significativa en mis datos?
  No, la etiqueta no representa un nodo de datos. Es allí exclusivamente para su presentación.

     

¿Estoy usando el atributo / elemento adecuado a la propiedad representan el tipo de datos que yo quiero representar?
  <b> se utiliza para la presentación de los elementos en negrita.

     

¿Estoy usando el / elemento de atributo sólo con fines de exhibición? Si es así, se puede quitar el elemento y el elemento principal de estilo usando CSS?
  Desde <b> es de presentación y lo estoy usando para su presentación, sí. Y puesto que el elemento <b> afecta a toda la <label>, que se puede quitar y el estilo se aplica a la <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 se etiqueta en particular representan en el documento. De esta forma, las aplicaciones pueden ser creadas (es decir, .:. motor de búsqueda) para decidir inteligentemente lo que significa que su contenido y clasificar en consecuencia

Por lo tanto, tiene sentido utilizar la content: propiedad CSS para agregar comillas alrededor de texto ubicado en una etiqueta <q> (no tiene ningún valor a los datos contenidos en el documento de otra que la presentación), pero no tiene sentido para el uso de la misma CSS propiedad para añadir un símbolo © en el pie de página, ya que tiene un valor de los datos.

Lo mismo se aplica a los atributos. Usando el atributo width y height en una etiqueta <img> que representa un icono en tamaño 16x16 tiene sentido semántico, ya que es importante entender el significado de la etiqueta <img> (un icono puede tener diferentes representaciones, dependiendo del tamaño que se muestra en). Utilizando los mismos atributos de una etiqueta <img> que representa una imagen en miniatura de una imagen más grande no lo hace.

A veces se necesita añadir elementos no semánticas que ser capaz de alcanzar su presentación deseada, pero por lo general los que son evitables.

No hay elementos equivocados. Hay usos incorrectos de elementos particulares. <b> no debe utilizarse cuando se añade énfasis. <small> se debe utilizar para sub-texto legal, no para hacer el texto más pequeño (ver HTML5 - Sección 4.6.4 de por qué), etc ... Todos los elementos tienen un escenario de uso particular y todos ellos representan los datos (menos de presentación ELements, pero tienen un uso en algunos casos). No hay elementos deben dejarse a un lado.

Los atributos son una cosa diferente. La mayoría de los atributos de presentación son en la naturaleza. Los atributos como <img border> y <body fgcolor> rara vez tienen la significación de los datos que se está representando por lo tanto, no se debe utilizar ellos (excepto en aquellos casos raros).

---

Los motores de búsqueda son un buen ejemplo de por qué los documentos semánticas son tan importantes. Microformatos son un conjunto predefinido de elementos y clases que se puede utilizar para representar datos, que los motores de búsqueda entenderán en cierta forma. La información de precio del producto en las búsquedas de Google es un ejemplo de la semántica en trabajo.

Mediante el uso de las reglas predefinidas en estándares del sistema para almacenar información en su documento permite a los programas de terceros para entender lo que parece ser un muro de texto sin utilizar heurísticas algoritmos que pueden ser propensos a fallos. También ayuda a los lectores de pantalla y otras aplicaciones de accesibilidad para entender más fácilmente el contexto en el que se presenta la información. También ayuda en gran medida la capacidad de mantenimiento de su margen de beneficio, ya que todo está ligado a una definición de conjunto.

Answer 2

El mejor ejemplo es probablemente el CSS Zen Garden .

El objetivo de este sitio es dar a conocer lo que es posible con sólo el diseño basado en CSS, con una separación estricta de los contenidos del diseño. Las hojas de estilo aportados por distintas diseñadores gráficos se utilizan para cambiar la presentación visual de un solo archivo HTML , produciendo cientos de diferentes diseños. El propio lenguaje de marcado HTML nunca cambia entre los diferentes diseños.

En cada página de diseño, que tendría un enlace para ver el archivo CSS de ese diseño.

Answer 3

  

¿Cuál es el significado real de la separación de contenido y presentación?

Es más bien una filosofía de diseño que algo concreto. En general, esto significa que usted debe conservar la semántica del contenido, piense en su contenido como de una pieza de información estructurada. Y eso también significa que usted debe tener todos los detalles estéticos lejos de esta información estructurada.

  

¿Es sólo significa evitar CSS en línea?

Como notado anteriormente, los estilos en línea no tienen nada que ver con la semántica de su contenido y debe ser evitado a toda costa. Pero no es solo que.

  

es simplemente significa si después de escribir HTML de acuerdo con el diseño de entonces, si a continuación, si queremos hacer ningún cambio en el diseño, entonces debería ser solamente con CSS, sin necesidad de html

Por desgracia, no siempre es posible lograr algunos de los objetivos estéticos de hormigón sin modificar el margen de beneficio subyacente; CSS3 intenta lo mejor es hacer frente a estos problemas.

  

¿Qué X / etiqueta HTML que debemos evitar utilizar para mantener la separación de contenido y presentación?

Busque etiquetas en desuso en W3C HTML 4.01 / XHTML 1.0 Referencia

  

¿Es la separación del contenido y la presentación también es útil para los usuarios de accesibilidad del lector / pantalla?

Sin duda. Una mejor información estructurada generalmente permanece legible incluso si algunos navegadores muestran estilos de forma incorrecta (o no se representan en absoluto). Dicho contenido puede parecer más adecuada en medios impresos (aunque los estilos de impresión se pueden aplicar para lograr aún mejores aestherics - que, de nuevo, no tienen nada que ver con la semántica de contenido).

  

¿Es la separación de contenido y presentación también útiles para el programador / desarrollador / diseñador?

Por supuesto. La separación de contenido y presentación tiene sus raíces en la filosofía más general, la separación de las preocupaciones. Todo el mundo beneficiarse de la separación:. Al proveedor de contenidos no tiene que ser un buen diseñador y viceversa

Answer 4

Poner en saltos de línea en ciertos puntos es inevitable, generalmente existirá cierta superposición de presentación y contenido. Siempre se debe tratar para la separación perfecta sin embargo.

Tome el otro extremo: Una página que contiene cargas y cargas de tablas que se utilizan únicamente para fines de diseño. Este es el anti-patrón definido que debe ser evitado a toda costa. El contenido desempeña un papel secundario después de la disposición aquí; que a menudo no está en el orden correcto y por lo tanto difícilmente legible por máquina. No máquina de contenido legible es malo para la accesibilidad y malo para el ranking del motor de búsqueda de la página.

Por el marcado de contenido sin preocuparse por la presentación, usted es, ante todo, por lo que es legible por máquina. Usted es entonces también en condiciones de servir el mismo contenido a diferentes clientes en diferentes formatos, por ejemplo en una versión optimizada para móviles. También puede cambiar la presentación fácilmente sin tener que meterse con los archivos HTML, digamos para un gran rediseño.

Otro beneficio que viene de forma natural mediante la separación de contenido y presentación (HTML - archivos CSS) es que usted tiene que escribir menos y menos para mantener, además de sus páginas pueden tener un estilo coherente aplicado con mucha facilidad. Contraste miles de estilos en línea frente a una definición de estilo en un archivo CSS, que es "natural" se aplica a todos los elementos con el mismo "sentido" (marcado).

Lo ideal sería que (X) HTML consiste solamente, el marcado semántico significativo y el CSS de estilos que utilizan esta marcado por sus selectores. En el mundo real se le suelen mezclar las clases y los identificadores en su margen de beneficio que no agregan significado adicional, ya que necesita estos "ganchos" extra de estilo de todo lo que la forma en que desea. Pero incluso en este caso hay una diferencia entre class="blue right-aligned" y class="contact-info secondary". Siempre trate de añadir significa para el contenido, no el estilo. Equilibrar esto es todo un arte en sí mismo. :)