Apuntes sobre diseño webApuntes sobre diseño web
El proceso de maquetación web es la transformación del diseño de un producto web en un conjunto de archivos (html, css y otras tecnologías como javascript, jquery, etc) capaces de ser ejecutados por los navegadores web.
La maquetación web es el proceso en el que el diseño gráfico pasa a transformase en código html y css aplicando estándares web aprobados, para que los navegadores puedan interpretarlo correctamente.
Para estructurar una página web, HTML 5 pone a nuestra disposición las siguientes etiquetas básicas que debemos conocer y entender.
Esta etiqueta sirve para delimitar el cabecero de la página, o el de cualquier otra zona de contenido. Es decir, puede haber varios header en un mismo documento HTML, que se corresponderán con una u otra parte de la página dependiendo del elemento dentro del cual lo coloquemos.
A continuación te dejo un ejemplo de una página con un cabecero para un artículo y un cabecero global de la página.
<body>
<header>
<p>PÁGINA</p>
<p>Cabecero de la página</p>
</header>
<article>
<header>
<p>ARTÍCULO</p>
<p>Cabecero del artículo</p> </header> <!-- Más etiquetas dentro del artículo -->
</article>
</body>
¿Qué información se suele incluir en el cabecero del artículo? El título de éste, quizá una imagen destacada, la fecha en que fue escrito… ¿Y el cabecero de la página? El título de ésta, una frase corta o eslogan, un logo… Muy sencillo de entender como ves.
Comentábamos que el cabecero albergaba el título, de la página si el cabecero era general, y del artículo si el cabecero pertenecía a éste. ¿Cómo se representa este título? Con las etiquetas de título, que van desde el <h1>hasta el <h6>.
Habiendo 6 etiquetas de título, su importancia se reduce a medida que aumenta su número. Es decir, <h1>es mucho más importante que <h6>. Por ello en la página debe haber un único <h1>. No es una norma de oro y puedes incumplirla (HTML no nos fuerza a nada en este sentido), pero es óptimo si sólo hay uno.
En el <h1> puede ir el título de la página si se trata de la página principal del sitio web, o el título de un artículo si estás en la página de ese artículo. En la portada los <h2> podrían ser los títulos de todos los artículos, mientras que los <h3> podrían ser las secciones de cada uno de los artículos, y los <h4> cada una de las partes de dichas secciones… Así hasta llegar al <h6>.
Como ves, el significado de la información que contienen determina si necesitamos un h1 o un h2. Esto es parte de la semántica que tanto mencionamos cuando hablamos de HTML 5. Lo que siempre va a cumplirse es que en un <h1> incluiremos el título más importante -o relevante- de esa página, y en siguientes etiquetas (<h2>, <h3>…) los títulos que son menos importantes.
Ampliando el ejemplo anterior, veamos un ejemplo con títulos:
<body>
<header>
<h1>Mi nueva página en HTML 5</h1>
</header>
<article>
<header>
<h2>Mi curso de HTML</h2>
</header>
<!-- Más etiquetas dentro del artículo -->
</article>
<article>
<header>
<h2>HTML 5 me gusta</h2>
</header>
<!-- Más etiquetas dentro del artículo -->
</article>
</body>
Su propio nombre lo indica: esta etiqueta sirve para delimitar menús de navegación. El típico menú superior como el que tiene esta página arriba del todo, o también el de “Ver artículo siguiente” y “Ver artículo anterior”, o los de paginación entre el listado de artículos…
Si creamos un menú con esta etiqueta dentro de la etiqueta <body>, parece evidente que se trata de un menú de navegación general de la página. Si lo creamos dentro de la etiqueta <article>, en principio podría ser un menú de artículo siguiente y artículo anterior. Volvemos a la semántica ;)
Esta etiqueta no nos dice qué tiene que ir dentro de ella: si una lista, párrafos o simplemente un texto, por lo que podremos construir nuestros menús como queramos, aunque hay unas formas más recomendables (listas) que otras (párrafos). Más adelante veremos la forma adecuada de construir menús.
Ampliamos el ejemplo anterior con menús:
<body>
<header>
<h1>Mi nueva página en HTML 5</h1>
</header>
<nav>
<p>Inicio</p>
<p>Acerca de</p>
</nav>
<article>
<header>
<h2>Mi curso de HTML</h2>
</header>
<!-- Más etiquetas dentro del artículo -->
</article>
<article>
<header>
<h2>HTML 5 me gusta</h2>
</header>
<!-- Más etiquetas dentro del artículo -->
</article>
</body>
En inglés main significa “principal”. Utilizaremos la etiqueta <main> para abarcar la parte de la web donde se encuentra el contenido que los visitantes quieren leer. Los visitantes no quieren leer los menús (no entran en una página a leer los menús de navegación), ni las barras laterales, ni el pie de página. Los visitantes entran a leer los artículos, posts de un blog, comentarios en un foro… Y es sólamente ese contenido el que debe ir englobado dentro de <main>. Fuera deberán quedar barras laterales, cabecero y pie de página, entre otros.
Esta etiqueta sirve para delimitar una unidad independiente de contenido. Una noticia completa, una guía, un artículo… Todo ello iría dentro de la etiqueta <article>. La regla general es que si coges todo lo que hay dentro de esa etiqueta y lo colocas en Facebook o en otra página web, el contenido será completo (toda la noticia, todo el artículo, etc) y tendrá sentido. Con independiente nos referimos justamente a eso: que tiene sentido por si misma tanto en tu página como fuera de ella.
Imagina una página web de noticias, donde en la portada se muestran al mismo tiempo unas pocas noticias. Cada una de esas noticias sería un <article> dentro del cual podría ir un <header> con el título, un <footer>con más información (veremos esta etiqueta más adelante) u otras etiquetas.
Otro ejemplo puede ser esta misma página web. Desde el título del artículo arriba del todo (“Curso de HTML: maquetación semántica de una página en HTML 5”) hasta el formulario para escribir comentarios, todo está englobado dentro de un <article>.
<article>
<h2>Título del artículo</h2>
<section>
<p>Párrafo.</p>
<p>Párrafo.</p>
<p>Párrafo.</p>
</section> <footer>
<p>Escrito por: ... </p>
</footer>
</article>
Colocaremos esta etiqueta encerrando en ella una parte del contenido del <article>. Por ejemplo, si contaras un cuento en un artículo en la página web, todo el cuento sería un <article>, pero cada uno de los capítulos sería un <section>.
Es decir, <section> son los apartados, subapartados, capítulos o secciones de un mismo contenido independiente. ¿Escribes un artículo, noticia o tutorial? Irá dentro de <article>, pero dentro de éste aún puedes dividirlo en varias partes con la etiqueta <section>.
<article>
<h2>Título del artículo</h2>
<section>
<h3>Título del primer capítulo</h3>
<p>Primer párrafo.</p>
<p>Segundo párrafo.</p>
<p>Tercer párrafo.</p>
</section>
<section>
<h3>Título del segundo capítulo</h3>
<p>Primer párrafo.</p>
<p>Segundo párrafo.</p>
<p>Tercer párrafo.</p>
</section>
<section>
<h3>Título del tercer capítulo</h3>
<p>Primer párrafo.</p>
<p>Segundo párrafo.</p>
<p>Tercer párrafo.</p>
</section>
<footer>
<p>Escrito por: ...</p>
</footer>
</article>
A veces puede interesarnos incluir bloques con información relacionada en nuestra página. Un anuncio, un listado de artículos relacionados, o incluso comentarios de los lectores sobre un artículo. Todo aquel contenido que, como el mencionado en estos ejemplos, esté de alguna manera relacionado con el contenido principal (el artículo, la noticia o lo que sea) pero que no sea parte de éste (recuerda la etiqueta <section>) irá englobado dentro de un bloque <aside>.
Algunos ejemplos claros son los mencionados hasta ahora. Recuerda que si colocas <aside> dentro de <article> estás indicando -por la semántica- que esa información está relacionada con el artículo o contenido en cuestión, pero si lo colocas fuera de éste, por ejemplo justo a su lado, dentro de <body>, estás indicando que es un contenido relacionado con la página, en general.
La etiqueta <footer> permite incluir información adicional sobre el contenido, o bien sobre la página completa, dependiendo del lugar donde esté. Si, como a la etiqueta <header>, lo colocamos inmediatamente dentro del <body>, estaremos hablando de un pie de página, mientras que si lo colocamos inmediatamente dentro de <article> hablaremos del pie de ese contenido en concreto, pudiendo haber varios <footer> en la página, uno general y uno para cada pieza de contenido.
No es necesario incluir ambas, <footer> y <header>, y ni <footer> tiene que ir abajo ni <header> arriba. Se trata de una cuestión de preferencia personal.
Hemos visto una serie de etiquetas-contenedor dentro de las cuales colocamos distintos tipos de información o contenido. Cada uno tiene una función concreta mediante la cual podemos dotar de significado al código de la página, pero existirán situaciones en las que ninguna de dichas funciones nos sirva.
Cuando ninguno de los contenedores anteriores nos sean útiles, recurriremos a la etiqueta <div>. Se trata de un contenedor genérico, que principalmente utilizaremos en estas situaciones:
Siguiente: Ejemplo práctico de maquetación web