Usando CSS: HTML es para contenido

Estoy hasta las pelotas de los comentarios de “Diseñar con CSS es difícil”.

Para hacer un diseño con CSS, hay que entender la separación de contenido y presentación: HTML es para contenido. CSS es para presentación. Es obvio que es imposible que estén absolutamente separados —para algo están las classes y los ids— pero hay que empezar por separar lo que se puede.

El contenido es Rey

Empezá por imaginarte que no existe el CSS, que no existen los atributos style, y que tenes que pagar $100 cada vez que usas una tabla (no, usar tablas no está mal, pero usarlas para lo que no se debe está mal).

Tus tags: h1-h7, p, strong, em, a, ul, ol, li y opcionalmente hr.¹ Poné tus títulos en h1, subtítulos en h2, etc. Cada parrafo envuelto en <p></p>. Listas con ul/ol y li. Si querés resaltar una palabra, em o strong. Dado que un menú es una “lista de links”, obviamente, usá una lista. Y, obviamente, head y title para el título de la página, body envolviendo todo el contenido, y un html encerrando todo.

Listo. Con eso tendrías que hacer TODA tu página. Hay muy pocas excepciones para esa regla.

Obviamente que no es lo más lindo del mundo. Pero el punto, ahora mismo, no es que sea lindo; es que tenga sentido. Los títulos son títulos porque los envolviste en h1/2/lo que sea, no porque “tienen una fuente más grande”. Las cosas marcadas tienen sentido cuando las marcas así. Eso es el HTML: un lenguaje de MARCAS (Markup).

¿Y ahora? Ahora creas tu CSS.

Estructurando

El primer paso es armar tu estructura. Tu página hasta ahora no se presta demasiado para la estructura, así que te presento un nuevo elemento: div. Este elemento sirve para determinar las áreas de tu página: Envolve en divs (uno por seccion) a lo que sea tu encabezado, tu pie, el contenido principal, menúes, etc., mientras a cada uno le ponés el atributo id correspondiente a su sección.²

Con tus areas definidas, podés empezar a definir la estructura.³ Y eso queda para el próximo artículo.