Categorías: HTML5Nuevos input, etiquetas y atributos en HTML5

Etiqueta article HTML5: Definiendo el contenido específico de una web

Voy a repasar la nueva etiqueta article HTML5, dicha etiqueta nos ayuda a definir un contenido específico dentro de una web y que por si solo tiene sentido.

Un código independiente y con sentido puede ser:

Mensajes de un foro.
Comentarios.
Artículos de periódicos, revistas y blogs.
Widget y similares.

La definición oficial de esta nueva etiqueta HTML5 es la siguiente:

The article element represents a complete, or self-contained, composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.

Sintaxis de la etiqueta article HTML5

Vamos a ver la sintaxis de este elemento HTML5 extraída de su web oficial:

<article>
<!-- Código HTML -->
</article>

Podemos ver como article tiene sus etiquetas de apertura y cierre, el código que se encuentre entre ambas se considerará perteneciente a un contenido o información única y específica de la web.

Código de ejemplo de la etiqueta article HTML5

Os pongo un código de ejemplo básico:

<article>
    <h1>Titular o nombre</h1>
    <p>Texto descriptivo similar a una entradilla.</p>
</article>

La etiqueta article también puede interactuar con las etiquetas header, footer y section. Aquí os pongo un código de ejemplo:

<section>
 <header><h2>Noticias relacionadas</h2></header>
 
 <article>
  <header>
   <h1>Noticia 1</h1>
   <p>Texto descriptivo 1</p>
  </header>
  <footer>
          <p>Publicado el XXX del XXX de XXX</p>
    </footer>
 </article>

 <article>
  <header>
   <h1>Noticia 2</h1>
   <p>Texto descriptivo 2</p>
  </header>
  <footer>
          <p>Publicado el XXX del XXX de XXX</p>
    </footer>
 </article>
</section>

Explico el código superior:

El código superior es un ejemplo de cómo podríamos hacer un apartado de noticias relacionadas.
Todo el código está bajo la etiqueta section.
Cada noticia relacionada sería un article con sus header y footer.