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:
1 2 3 |
<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:
1 2 3 4 |
<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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<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.
Etiquetas semánticas y de estructura HTML5
En este post recopilo estas etiquetas: