Ejemplo de creación de página web con capas y migración a HTML5

Ejemplo de creación de página web con capas y migración a HTML5

Durante esta serie de apuntes de HTML hemos mencionado que el lenguaje de marcas sirve para dotar de estructura y contenido a un documento web.

Hoy veremos la etiqueta div y algunas otras que sirven para organizar y dotar de semántica a las páginas web.

Pero en primer lugar hagamos el símil de cómo se debería estructurar una página web comparándolo con un libro.

En un libro encontramos por este orden:

  1. Una portada.
  2. Un prólogo o introducción.
  3. Un índice.
  4. Un conjunto de capítulos dónde se desarrolla el contenido verdaderamente importante.
  5. Un epílogo.
  6. Una contraportada.

Todas estas partes las deberíamos encontrar en un escrito de calidad. Y si os fijáis en bloggers de calidad que se trabajan las publicaciones así suele ser…

El lenguaje de marcado es la herramienta que nos permite conseguirlo.

Este resumen tendrá 2 partes:

Estructuración de contenidos a la vieja usanza

Antiguamente o cuando tenemos dudas o no disponemos de una etiqueta en HTML5 adecuada para crear una capa usamos la etiqueta <div>.

La etiqueta <div> suele llevar algunos de los atributos class o id. Aunque también puede llevar algunos otros.

Una capa es un contenedor que agrupa informaciones relacionadas.

etiqueta div html
Etiqueta div html
layout ejercicio capas

Volviendo al símil del libro, el vocabulario que se suele usar en jerga inglesa es el siguiente:

  • Header (no confundir con head). Lo usaremos para designar la cabecera de un documento.
  • Nav o menú para designar una lista de navegación.
  • Main (lo usaremos para definir el contenido principal de un documento.
  • Aside(lo usaremos para definir el contenido secundario anexo en una página web. En ocasiones veremos la palabra sidebar.
  • Footer (servirá para designar un pié de página)
  • Usaremos contenedores auxiliares con nombres ingleses como “container” y/o “wrapper”.

Algunas de las palabras anteriores dieron lugar a etiquetas HTML5 que veremos a posteriori.

La transformación de la siguiente propuesta de estructura web:

Derivaría en la siguiente resolución que se hizo en la pizarra:

pizzarra html
Resolución a la antigua (con divs) de ejercicio de capas html. Imagen cortesía de un alumno. J.S.R

Estructuración de contenidos con nuevas etiquetas HTML5

Entra las muchas novedades que la actualitzación del XHTML nos ha traído encontramos la inclusión de etiquetes semánticas que ayudan a aportar significado semántico a determinades secciones de un documento web.

De este modo, los motores de búsquedas saben interpretar major las pàgines web y quedarse con la información más relevante.

Se ha estado hablando de HTML5 durante más de 10 años hasta que el stándard oficial salió a la luz en 2014.

Por el camino se han creado y deshecho muchas propuestas de etiquetes que han salido en todo tipo de medios especializados como revistas y blogs.

Como consecuencia, algunes etiquetes que parecía que saldrían a la luz finalment e no lo hicieron o si lo hicieron no con la intención inicial. (como ejemplos econtramos las etiquetas sidebar y menú.)

Existen muchas etiquetas importantes. Pero las imprescindibles para mi con el fin de dotar de estructura son las siguientes:

  • <header> se recomienda sólo uno por documento web. A no confundir con <head>
  • <nav> – se recomienda sólo uno por documento web.
  • <main>
  • <aside>
  • <section>
  • <article>
  • <figure>

Después ya encontraríamos otras con el fin de dar significado semántico como <mark>, <blockquote>, <figcaption>, … que está bien recordarlas y usarlas pero que tampoco nos tienen que quitar el sueño.

Una posible solución para el ejercicio anterior podría ser la que se muestra en la imagen a continuación.

Resolución ejercicio

Notar que

  • Únicamente se ha usado un <nav> en considerar la capa nav2 del aside de poca importancia.
  • En el <main> hemos optado por poner <article> dentro de <section> aunque también hubiese podido ser los <section> dentro de <article>. Es una cuestión subjetiva. Puedes tener un escrito muy largo con varias secciones o viceversa

Querido lector, hasta aquí el ejemplo de hoy. Espero que las imágenes te puedan ser de utilidad para ponerte a escribir tu ahora también.

¡Da igual que lo hagas con Sublime o Brackets pero hazlo!

Enseguida verás que no es difícil, sólo requiere de práctica.

Francesc Ricart
hola@francescricart.com

Aprender y enseñar. Enseñar y aprender. En el ámbito docente soy docente ocupacional. En el ámbito profesional consultor web. Ofrezco servicios de mejora continua y mantenimiento web. ¿Qué quieres aprender hoy? Encontraréis más acerca de mi en la página sobre mi

1 Comentario
  • rafael
    Publicado a las 09:12h, 20 febrero Responder

    Muy buena, más contenido con menos instrucciones.

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.