Contenido del cuerpo. Etiqueta article
El cuerpo de nuestro documento ya está completo. La estructura básica de la página web está terminada y ahora tenemos que trabajar en el contenido. Los elementos HTML5 que hemos visto en los tutoriales anteriores nos ayudan a identificar cada sección del diseño y a asignar una función intrínseca para cada uno de ellos, pero lo que es realmente importante es lo que hay dentro de cada una de esas secciones.
La mayoría de los elementos ya estudiados fueron creados para dar una estructura a la página web que los navegadores y nuevos dispositivos puedan identificar.
Las etiquetas <body> son para declarar el cuerpo o las partes visibles del documento, las etiquetas <header> son para englobar información importante para el cuerpo, las etiquetas <nav> para aportar ayuda a la navegación, las etiquetas <section> contienen el contenido más importante y las etiquetas <aside> y <footer> suministran información adicional. Pero ninguno de estos elementos declaran nada sobre el contenido en si mismo. Todos tienen una función estructural muy específica. |
Cuanto más profundizamos en el documento, más nos acercamos a la definición del contenido. Esta información estará compuesta de elementos visuales diferentes como títulos, textos, imágenes, videos y aplicaciones interactivas entre otras. Necesitamos poder diferenciar estos elementos y establecer relaciones entre ellos.
<article>
De las misma manera en que los blogs están divididos en entradas, las páginas webs están divididas en partes que tienen características similares. El elemento <article> nos permite identificar cada una de estas partes.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="description" content="Ejemplo de HTML5">
<meta name="keywords" content="HTML5">
<title>edu4java Home</title>
<link rel="stylesheet" href="edu4javastyles.css">
</head>
<body>
<header>
<h1>edu4java</h1>
</header>
<nav>
<ul>
<li>Tutoriales Web-Html</li>
<li>Tutoriales Juegos Android</li>
<li>Tutoriales Java para principiantes</li>
<li>Tutoriales Sql</li>
<li>Contacto</li>
</ul>
</nav>
<section>
<article>
VIDEO TUTORIALES JAVA
Tutoriales de java para principiantes o iniciación. Aquí aprenderemos desde cero a programar en java. Algunos de los conceptos que veremos son genéricos de programación pero los veremos siempre en el entorno de java.
</article>
<article>
VIDEO TUTORIALES SQL
Tutoriales de sql para principiantes. Aquí aprenderemos como utilizar el lenguaje de consulta SQL.
</article>
</section>
<aside >
English Version
</aside>
<footer>
Copyright © 2012-2013
</footer>
</body>
</html>
Como podemos ver en el código, las etiquetas <article> están dentro de las etiquetas <section>. Las etiquetas <article> pertenecen a esa sección. Son sus hijos, de la misma manera que las etiquetas que están dentro de las etiquetas <body> son hijos del cuerpo. Pero como con todo hijo del nodo cuerpo, las etiquetas <article> son colocadas una después de la otra, ya que cada una de ellas es una parte independiente de <section>.
Este es el resultado;
Como hemos dicho antes, la estructura HTML puede ser descrita como un árbol, con el elemento <html> de raiz. Otra forma de describir las relaciones entre los elementos es denominarlos, padres , hijos o hermanos según la posición en la estructura del árbol. Por ejemplo, en un documento HTML típico, el elemento <body> es el hijo del elemento <html> y hermano del elemento <head>. Tanto, <body> como <head>, tiene el elemento <html> como padre.
El elemento <article> no está limitado por su nombre- no sólo habla de artículos.
El elemento <article> está creado para contener una unidad independiente de contenido, por lo que puede llevar un post de un foro, un artículo de una revista, una entrada de un blog, un comentario de un usuario, etc. Este elemento agrupará unidades de información relacionadas entre sí, sin tener en cuenta la naturaleza de la información.
Como parte independiente del documento, el contenido de cada elemento <article> tendrá su estructura independiente. Para definir esta estructura podemos sacar ventaja a la versatilidad de las etiquetas <header> y <footer> ya estudiadas anteriormente. Estas etiquetas son portables y pueden ser utilizadas fuera del cuerpo, en todas las secciones del documento.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="description" content="Ejemplo de HTML5">
<meta name="keywords" content="HTML5">
<title>edu4java Home</title>
<link rel="stylesheet" href="edu4javastyles.css">
</head>
<body>
<header>
<h1>edu4java</h1>
</header>
<nav>
<ul>
<li>Tutoriales Web-Html</li>
<li>Tutoriales Juegos Android</li>
<li>Tutoriales Java para principiantes</li>
<li>Tutoriales Sql</li>
<li>Contacto</li>
</ul>
</nav>
<section>
<article>
<header>
<h1>VIDEO TUTORIALES JAVA </h1>
</header>
Tutoriales de java para principiantes o iniciación. Aquí aprenderemos desde cero a programar en java. Algunos de los conceptos que veremos son genéricos de programación pero los veremos siempre en el entorno de java.
<footer>
<p>comments (0)</p>
</footer>
</article>
<article>
<header>
<h1>VIDEO TUTORIALES SQL </h1>
</header>
Tutoriales de sql para principiantes. Aquí aprenderemos como utilizar el lenguaje de consulta SQL.
<footer>
<p>comments (0)</p>
</footer>
</article>
</section>
<aside >
English Version
</aside>
<footer>
Copyright © 2012-2013
</footer>
</body>
</html>
Aquí tenemos un ejemplo de una unidad de información creada con el elemento <article> con una estructura propia. Primero con la etiqueta <header> que contiene el título definido con el elemento <h1>. A continuación tenemos el contenido propiamente dicho, un texto describiendo el tutorial. Y finalmente, después del texto, tenemos la etiqueta <footer> especificando el número de comentarios.
Este es el resultado del código:
| << Estructura del cuerpo. Etiqueta footer | Contenido del cuerpo. Etiqueta: <hgroup> >> |