Читать книгу El gran libro de HTML5, CSS3 y Javascript - Diego Gauchat Juan - Страница 25

En el diseño de la Figura 1-1, la barra lateral está junto a la Información principal. Las etiquetas <aside> definen una columna o sección que normalmente contiene los datos relativos a la información principal, pero no es tan relevante ni importante como aquella. En el ejemplo de un diseño de blog estándar presentado en la Figura 1-2, la Barra lateral contiene una lista de enlaces a cada entrada del blog o proporcionan información adicional sobre el autor del blog. La información que contiene esta sección está por lo tanto relacionada con la Información principal, pero no es relevante por sí misma. Siguiendo el ejemplo del blog, podemos decir que las entradas del blog son relevantes, pero los vínculos y las previsualizaciones cortas de las entradas solo facilitan la navegación y aquello en lo que el usuario o lector estará más interesado.

En HTML5 podemos identificar este tipo de información secundaria con el elemento <aside>.

Código 1-15

Uso del elemento <aside>.

El elemento <aside> no tiene una posición predefinida, de manera que puede situarse tanto del lado derecho como del izquierdo de la página. Este elemento describe la información que contiene y no su ubicación en la estructura y puede por tanto estar situado en cualquier parte, siempre y cuando su contenido no sea considerado parte de la información principal del documento. Por ejemplo, podemos utilizar el elemento <aside> dentro de un elemento <section>, o incluso dentro de la información principal, por decir algo, para mostrar una cita de texto dentro de la página.

Conceptos básicos

El elemento <blockquote> utilizado para mostrar información relacionada con cada artículo de la página en el Código 1-15 define un bloque de texto que se cita desde otra parte del documento. Los navegadores muestran de este elemento por defecto con los márgenes, proporcionando un formato específico al párrafo que contienen.