Читать книгу El gran libro de HTML5, CSS3 y Javascript - Diego Gauchat Juan - Страница 28
1.5.1 <article>
ОглавлениеEl diseño básico con el que venimos trabajando (Figura 1-1) es hoy en día la estructura más común y básica para sitios web en Internet, pero también ilustra cómo son mostrados en pantalla los contenidos más relevantes.
De la misma manera que los blogs se dividen en entradas, los sitios web suelen presentar la información relevante dividida en partes que comparten características similares. El elemento <article> es el que nos permite identificar cada una de estas partes.
Código 1-17
Uso del elemento <article>.
Como se puede ver en el Código 1-17 que acabamos de presentar, las etiquetas <article> se encuentran dentro de las etiquetas <section>. Las etiquetas <article> están subordinadas a la sección <section> de la misma manera que cualquier elemento colocado entre las etiquetas del elemento <body> está subordinado a este último. E igual que sucede con cualquier elemento anidado dentro del elemento <body>, las etiquetas <article> se colocan una tras otra, y cada una constituye una parte independiente del elemento <section>, como se muestra en la Figura 1-4.
Figura 1-4
Representación visual de las etiquetas <article> dentro de la sección creada para albergar la información relevante de la página web.
Conceptos básicos
Ya hemos explicado antes que la estructura HTML puede ser descrita como un árbol cuya raíz es el elemento <html>. Otra forma de describir las relaciones entre los elementos es nombrarlos como padres, hijos o hermanos de acuerdo a su posición en la estructura de árbol. Por ejemplo, en un documento HTML típico, el elemento <body> es hijo del elemento <html> y hermano del elemento <head>. Ambos, <body> y <head>, tienen al elemento <html> como padre.
El elemento <article> no está limitado a artículos de noticias, por ejemplo, sino que está destinado a contener cualquier elemento de contenido independiente. Por tanto, puede incluir ya sea una entrada de un foro, un artículo de una revista, una entrada de un blog, un comentario de usuario, o cualquier otro contenido similar. Este elemento, <article>, agrupará segmentos de información relacionados entre sí, independientemente de la naturaleza de la información.
Como una parte independiente del documento, el contenido de cada elemento <article> tendrá su propia estructura independiente. Para definir esta estructura, podemos tomar ventaja de la versatilidad de las etiquetas <header> y <footer> estudiadas anteriormente. Estas etiquetas son portátiles y pueden ser utilizadas no solo en el cuerpo sino también en cada sección de nuestro documento.
Código 1-18
Construcción de la estructura <article>.
Conceptos básicos
El elemento <p> que hemos usado dentro del pie o, lo que es lo mismo, dentro del elemento <footer> de cada artículo del Código 1-18, define un párrafo. Por defecto, los navegadores muestran los contenidos de estas etiquetas con márgenes y saltos de línea. Además de declarar párrafos, también es posible sacar provecho de las propiedades de este elemento para aplicar formato a textos breves, que es el uso que se le ha dado en este ejemplo.
Los dos artículos insertados en el Código 1-18 se construyeron con el elemento <article> y tienen una estructura específica. En primer lugar, las etiquetas <header> contienen el título, que se define con un elemento <h1>. A continuación está el contenido en sí, que es el texto del artículo. Y finalmente, después del texto, está la etiqueta <footer> que especifica en este caso el número de comentarios.
