Cómo usar correctamente el HTML y CSS
4 (80%) 1 voto

En este post hablaré acerca de la teoría de cómo usar correctamente el HTML y CSS, es decir, de cómo se debería usar el código y cómo se deberían usar los estilos en una página web.

En la práctica podría parecer que esto da lo mismo, pues lo importante, al final, es que el sitio que desarrollemos se vea bien en todos los navegadores… las personas no estarán mirando nuestro código y no dejarán de visitar nuestros sitios porque el código es sucio o está mal hecho, ¿cierto?.

Pero hay otros factores que sí debemos considerar y que sí son importantes a la hora de desarrollar: el SEO, la velocidad de carga, y la mantención de nuestros códigos a futuro, de los cuales hablaré más adelante, pero primero enfoquémonos en aclarar bien los conceptos.

HTML

Para clarificar los conceptos, el objetivo de un archivo HTML es contener solamente la información semántica, especificando el tipo de contenidos entre etiquetas. Su función es ver los objetos de manera estructurada, pero sin definir sus propiedades. Se ve que hay un párrafo, pero no se sabe sus características.

En estricto rigor, un texto que corresponda a un párrafo, debería ir entre las etiquetas <p> y </p> (paragraph); un texto destacado, debería ir entre <em> y </em> (emphasis), etc. Lo ideal es que al ver el código fuente, no se vean las características o propiedades de los objetos, sino que sólo el contenido de manera estructurada.

El archivo CSS es el que define la apariencia de la página, especificando los estilos de cada uno de los componentes de la estructura HTML. Por ejemplo, es el que define de qué color van a ser los párrafos, cuanto ancho tendrá una columna, etc.

La utilización de ambos documentos en conjunto, generan una página Web completa que es vista correctamente en cualquier navegador.

El objetivo que se debe perseguir es velar por mantener estos conceptos, evitando definir estilos y propiedades directamente en el código HTML, lo cual ayudará a una comprensión mucho más fácil de los documentos.

CSS

La función del documento CSS es contener todas las propiedades de cada elemento HTML. Por esto, hay que tener en mente nunca escribir las especificaciones de estilo directamente en el código, sino que crear clases o id’s.

Para definir los términos que se utilizarán, los componentes de una definición de CSS son:

body{
	width: 600px;
}

Selector: body
Propiedad: width
Valor: 600
Unidad:
px

Para aclarar los términos, el código HTML es un lenguaje compuesto por etiquetas, las cuales definen el tipo de objeto que encierran. Por ejemplo, <p>párrafo</p>, <div>división</div>, <em>enfatizado</em>, etc. Estas etiquetas son llamadas en CSS directamente por su nombre:

p{
	/*acá van las propiedades para todos los elementos p de la página...*/
}
body{
	/*acá van las propiedades del body...*/
}

Cada elemento (definido a través de las etiquetas), puede tener un ID, que sirva para identificarlo del resto de los elementos y para llamarlo vía JavaScript. Este ID debe ser único en toda la página, y generalmente se le asigna ID a los objetos importantes y únicos, como al pie, al cuerpo, o la cabecera. Por CSS, los elementos que poseen ID, deben ser llamados anteponiéndole el signo #:

#cuerpo{
	/*acá van las propiedades del elemento "cuerpo"...*/
}

Adicionalmente, e independiente de si posee ID o no, cada elemento puede tener una o más clases (class). Las clases definen un tipo de objeto, por lo que pueden ser aplicadas a cualquier elemento de la página. Para definir propiedades de una clase en CSS, se antepone un punto:

.menu{
	/*acá van las propiedades para los elementos de clase "menu"*/
}

Las definiciones de CSS funcionan por jerarquía, por lo que si un elemento tiene un ID aplicado (para este ejemplo, será el id “ultimo_parrafo”), se accede al elemento de la siguiente manera:

p#ultimo_parrafo{
	/*acá van las propiedades del elemento p que tiene el id "ultimo_parrafo"*/
}

Si el elemento p, con el id “ultimo_parrafo” se encuentra dentro de un div, se accede a él anteponiendo |div+espacio|, de la siguiente manera:

div p#ultimo_parrafo{
	/*acá van las propiedades del elemento p que tiene el id "ultimo_parrafo" y que se encuentra dentro de algún DIV*/
}

En este caso, la separación a través de un espacio define que el objeto se encuentra “dentro”. Si no se utiliza un espacio, significa que es el mismo elemento el que posee el ID.

Para el caso de las clases, la jerarquía se utiliza de la misma manera.

En el caso de las clases, es posible utilizar varias en un mismo elemento, separándolas con espacios. Por ejemplo, <p class=”ancho destacado no_imprimir”>.

La teoría

Ahora tenemos que ya tenemos claro para que sirve cada uno de estos dos lenguajes (que son completamente opuestos en todo sentido, pero son complementarios), podemos empezar a definir el porqué es necesario respetar la lógica y el espacio de cada uno.

Como primera afirmación, puedo decirles que siempre se debe evitar utilizar estilos directo en el HTML (por ejemplo, decir <p style=”margin-bottom:0;”>), y no porque sea “malo” o no vaya a funcionar, sino porque hay que respetar la labor que tiene cada lenguaje.

¿Por qué crees que se inventaron los dos lenguajes?…
¿o por qué crees que se diseñaron como dos lenguajes separados y complementarios?…
Supongo que alguien se dió todo ese trabajo por algo, ¿no crees?

Bueno, así lo fue… incluso anteriormente, cuando aún se usaba el HTML 4, era muy común utilizar las mismas etiquetas para armar la estructura de las páginas (por ejemplo usando tablas), e incluso habían atributos de cada etiqueta HTML que servían para definir estilos en el mismo código, como bgcolor, para la etiqueta <body>, o size y color para la etiqueta <font> (que aberración!!! – tápense los ojos niños)… Y así fue como las personas que crearon el lenguaje siguiente (XHTML – que se utilizó por muchos años) decidieron separar código de estilo, lo cual fue una muy buena decisión, y que se mantuvo incluso en la nueva versión que se utiliza hoy en día, llamada HTML5.

SEO, velocidad de carga y mantención

Más allá de toda esta teoría, es muy importante entender que respetar esta lógica hace bien no sólo para nosotros como desarrolladores, sino también para el SEO (Search Engine Optimization), ya que al trabajar de esta manera, hacemos sitios mucho más “Google friendly” (si, el resto de los buscadores no importan mucho), y sitios que pueden cargar más rápido, sobre todo cuando los archivos de estilos se almacenan en el caché del navegador. Incluso, muchos sitios que nos ayudan a verificar el SEO de nuestros desarrollos, como seositecheckup.com, revisan que no tengamos estilos (ni código JavaScript) insertados en nuestro HTML, como parte de su rutina de revisiones.

Y obviamente, también hay que considerar nuestra labor como desarrolladores… en unos meses o años más, es muy probable que tengamos que volver a abrir nuestros códigos antiguos para realizar mejoras, cambios o correcciones… y claramente ninguno de nosotros quiere tener que abrir un código que no se entienda, que sea lento, pesado o difícil de corregir.

Así que te aliento a que revises tus códigos e intentes hacer códigos 100% limpios (si tienes alguno del cual estés orgulloso, pon el link en los comentarios para echarle un vistazo). Creo que una vez que entendamos esto de la semántica detrás del HTML y de la función del CSS como elementos separados, podremos trabajar más rápido, más fluido, y tendremos códigos más optimizados y libres de “obesidad” (hablaré de eso en un futuro post), y como dicen algunos, podremos desarrollar viendo “la matrix”.

Originally posted 2016-02-08 10:02:40.

Cómo usar correctamente el HTML y CSS
Etiquetado en:            

Deja un comentario

¿Quieres recibir el contenido V.I.P de Preceptos Digitales?

¿Quieres recibir el contenido V.I.P de Preceptos Digitales?

Ingresa tu correo y te enviaremos contenidos especiales para quienes escuchan el Podcast!



Te has suscrito exitosamente! Nos hablamos!