En la cabecera <head> de la página hay que:
En la página se reconocen agrupaciones con color de fondo común o con un borde común, para las que tiene sentido utilizar secciones.
El dibujo siguiente muestra una posible elección de elementos de secciones para esta página:
En vez de las etiquetas <article> y <section>, se podrían haber utilizado sólo una u otra, o haberlas utilizado al revés.
Las secciones <section> y <article> contienen títulos <h2> y <h3> respectivamente.
La página sólo contiene las etiquetas que se muestran en la imagen del apartado anterior (<main>, <h1>, <section>, <h2>, <article>, <h3>, <footer> y <p>.
No es necesario utilizar clases para distinguir los párrafos de las efemérides del párrafo del pie de página, ya que podemos utilizar selectores de descendientes (article p o footer p).
Internet Explorer requiere que el bloque main tenga la propiedad display con el valor block.
Las tres secciones section tienen el mismo ancho y todos los artículos article tiene también el mismo ancho, mientras que las alturas de cada elemento dependen del contenido. Eso indica que sólo se ha establecido el ancho width, en unidades absolutas (rem o px, por ejemplo).
Las secciones se muestran una al lado de la otra. Además, al hacer zoom o al estrechar o ensanchar la ventana, el número de secciones por fila se ajusta automáticamente. Eso se puede conseguir con posicionamiento flotante.
Los artículos se muestran uno al lado del otro. Al estrechar o ensanchar la ventana no cambia la posición de los artículos, pero al hacer zoom el número de artículos por fila se ajusta automáticamente. Eso se puede conseguir con posicionamiento flotante.
El pie de página no se pone al lado de las secciones, lo que indica que el pie de página incluye la propiedad clear.
Para que el tamaño del bloque main tenga en cuenta las secciones flotantes se debe incluir la propiedad overflow con el valor auto. De esa manera las secciones se ven rodeadas con el fondo blanco del bloque main.
Estas son las propiedades CSS utilizadas:
El código HTML del ejercicio puede consultarse abriendo la página web del ejercicio y abriendo el código fuente (Ctrl+U).
La hoja de estilo del ejercicio puede consultarse abriendo este enlace a la hoja de estilo del ejercicio Efemérides 14 de diciembre.
Tenga en cuenta que en estos ejercicios hay a menudo varias maneras de conseguir el mismo resultado, por lo que la solución no es nunca única.