Separación clara entre estructura y estilo

Al separar claramente contenido y diseño, creamos un documento con una estructura lógica muy marcada. Todo lo que pertenece al contenido se puede identificar claramente como tal sin necesidad de medidas auxiliares y el documento, a su vez, es perfectamente comprensible, independientemente de su representación visual..

Separación clara entre estructura y estilo | Aprender CSS | Al separar claramente contenido y  diseño, creamos un documento con una estructura lógica muy marcada. Todo lo que  pertenece al contenido se puede identificar claramente como tal sin necesidad  de medidas auxiliares y el documento, a su vez, es perfectamente comprensible,  independientemente de su representación visual.
COMPÁRTELO:

Toda página Web a la que se le quiera dar un diseño CSS y reducirle las barreras al máximo, debe contener como base un documento perfectamente estructurado.

Al separar claramente contenido y diseño, creamos un documento con una estructura lógica muy marcada. Todo lo que pertenece al contenido se puede identificar claramente como tal sin necesidad de medidas auxiliares y el documento, a su vez, es perfectamente comprensible, independientemente de su representación visual.

La representación óptica de los contenidos se regula mediante instrucciones de formato centralizadas que se guardan, inteligentemente, fuera del documento en sí.

Eliminar los obstáculos para tener libre acceso al documento es relativamente fácil y representa un paso gigantesco en la supresión de barreras.

Al documento se le pueden añadir funciones de ampliación (por ejemplo, con JavaScript, PHP y similares), siempre que no dificulten el acceso a los contenidos.

Estructura lógica y textos resaltados

Las páginas Web son documentos. HTML no describe el aspecto de un documento o su ubicación. HTML describe qué es un documento: un título, una lista, una imagen, una tabla, etc.  Por eso los elementos y atributos de HTML se deben utilizar correctamente a nivel semántico, es decir, conforme a su significado según las especificaciones.

Un HTML semánticamente estructurado es la clave para conseguir tiempos de carga mínimos, independencia de la plataforma, eliminar barreras y, no menos importante, un diseño impecable. Un ejemplo importante son los títulos: agrupan partes de texto y sirven como orientación ya que jerárquicamente están por encima del texto normal. Son más importantes que el texto fluido, por lo que se deben declarar como título. Igualmente importante es la jerarquía de los títulos. Algunos títulos son más importantes que otros, por lo que deberán pertenecer a un nivel superior. El título más importante es el de primer nivel <h1>, mientras que los niveles siguientes <h2><h3><h4>, etc. son subordinados suyos. Los subtítulos de igual importancia se deberían colocar en el mismo nivel.

Así los documentos pueden ser rápidamente leídos tanto por navegadores de texto, lectores de pantalla o un robot. Con un lector de pantalla también se puede navegar por los títulos o bien leerlos agrupados por niveles, por ejemplo, "todos los títulos de nivel 1", "todos los títulos de nivel 2", etc. De ese modo es fácil hacerse una idea clara y rápida de todos los contenidos del texto.

Un título correctamente jerarquizado a nivel semántico ofrecería este aspecto:

<h1>Título de primer nivel</h1>

Un título incorrectamente jerarquizado (en el sentido semántico) sería, por ejemplo:

<div id="headline">Un título de primer nivel </div>

O, incluso peor:

<p><font size="6"><b>Un título de primer nivel </b></font></p>

Al crear un título lo que menos importa, en un primer momento, es qué tamaño fuente se utilizará o si será de color verde o irá en negrita, o qué lugar ocupará exactamente. Lo único que importa en el código fuente es que ese elemento es un título.

Otro sinsentido (semántico) es insertar en el texto etiquetas  vacías, o de cualquier otro tipo, simplemente para crear un (in) determinado espacio, por ejemplo:

<p>Aquí tenemos un párrafo de texto</p>
<p>&nbsp;</p>
<p>Aquí tenemos otro párrafo de texto</p>

Lo mismo puede decirse para todos los demás elementos del texto, ya sean párrafos, listas, citas, formularios o tablas. No debemos perder el tiempo pensando en la fuente, tamaño o el color que le daremos a un elemento, ni qué distancias guardará respecto a los elementos contiguos. Lo importante aquí no es el aspecto óptico, sino el significado lógico, que deberá ser reconocible por todos: desde una persona invidente a quien le leerán la página, o un robo-buscador para el que la presentación no cuenta en lo más mínimo.

Agrupar los elementos de página

Lo siguiente que se puede hacer es agrupar diferentes partes del documento en bloques lógicos (contenedores) que más tarde se podrán ordenar o formatear conforme al diseño visual que se desee. La división de la página Web de nuestro ejemplo, clásico y sencillo, es la siguiente:

- Header (encabezado)
- Main menu (menú principal)
- Content (contenido)
- Footer (pie)

Cree un contenedor para cada área e identifique cada contenedor con alguna señal, por ejemplo, asignándole un ID. La etiqueta HTML <div> cobra aquí un significado especial. Este elemento bloque carece prácticamente de propiedades, ya que no define ningún párrafo determinado ni tabla, ni nada similar; simplemente delimita un área determinada. En el código fuente quedaría así:

<body>
<div id="header">Logo</div>
<div id="menu">Navegación principal</div>
<div id="content">Títulos y textos</div>
<div id="footer">Derechos reservados</div>
</body>

De ese modo ha creado cuatro áreas a las que puede acceder por separado con ayuda de CSS.

#header {
Valor propiedad;
}

#menu {
Valor propiedad;
}

#content {
Valor propiedad;
}

#footer {
Valor propiedad;
}

#header {
Valor propiedad;
}

Los contenidos de estos contenedores tambièn se puede hacer accesibles y diseñarlos con relación al contexto, por ejemplo:

#content h1 {
Valor propiedad
}

#content p {
Valor propiedad
}

Con estas  dos últimas instrucciones hacemos que sólo se tengan en cuenta los títulos (<h1>) y los párrafos (<p>) que aparecen dentro del contenedor con ID content.

Naturalmente, los contenedores también se pueden anidar, es decir, podemos crear contenedores dentro de contenedores. Pero debemos preguntarnos antes seriamente si de verdad necesita contenedores dentro de contenedores, o si no es suficiente con la estructura semántica del contenido. Recordemos que queremos mantener el código fuente lo más claro y reducido posible. Con un anidamiento múltiple de contenedores <div>, por ejemplo, resulta superfluo que en la mayoría de los casos, ya que podemos obtener el mismo resultado por otros medios, por ejemplo dando formato directamente a los elementos que queremos vincular.

Sin barreras

Consideremos la página Web nuevamente desde un punto de vista conceptual. Al decidir seguir los estándares ya ha dado el paso más importante en la eliminación de barreras, pues queda implícito que quiere dar total accesibilidad a su página. Por eso vale la pena dar un paso más y considerar qué más se podría hacer para eliminar barreras. Existen prejuicios inveterados en contra de la creación de páginas Web sin barreras, pero sin prejuicios que, al analizarlos, se desvanecen como las falsas creencias que son.

🤖

ChatGPT Gratis
Realiza preguntas sobre cualquier tema

¡Participa!

¡Compártelo en tus Redes Sociales!
Compartir en:

CITAR ARTÍCULO


Para tareas, investigaciones, tesis, libros, revistas, blogs ó artículos académicos

Referencia en Formato APA:

Delgado, Hugo. (2015).
Separación clara entre estructura y estilo.
Recuperado 28 de marzo, 2024, de
https://disenowebakus.net/separacion-clara-entre-estructura-y-contenido-en-html-y-css.php

Profesor en la Universidad de Guadalajara

Hugo Delgado Desarrollador y Diseñador Web en Puerto Vallarta

Profesional en Desarrollo Web y Posicionamiento SEO desde hace más de 15 años continuos.
Contamos con más de 200 constancias y reconocimientos en la trayectoria Académica y Profesional, incluidos diplomados certificados por Google.

CONTINÚA APRENDIENDO

Menú categoría


Aprender CSS

TAMBIÉN MERECE LA PENA VISITAR:

¿Te gustaría aprender más sobre Diseño Web?

Conoce todos los cursos y tutoriales que tenemos para ti completamente gratis
Aprender Diseño Web

¿Todavía no encuentras lo que necesitas?

Usa nuestro buscador interno para descubrir más información
Contenido relacionado:
 

Deja tu Comentario

PATROCINADOR

Tu negocio también puede aparecer aquí. Más información
Anunciate aquí

Tu navegador ha bloqueado la publicidad.
Por favor 🙏 permite visualizar los anuncios para poder acceder, gracias.