0

Tengo entendido que estas (Y otras etiquetas 'wrap' parecidas) sirven para maximizar compatibilidad con dispositivos mobiles, sin embargo, habia aprendido que para esto tenemos cosas como el responsive web design entre otros. Entonces, ¿Que tan importantes son estas en un documento web? ¿Da igual usarlas o no? ¿Todas se pueden substituir por css?

Gracias!

1
  • Falta incluir información sobre lo buscado/investigado sobre el tema. Para más detalle véase Cómo preguntar.
    – Rubén
    el 21 abr. 2017 a las 4:06

1 respuesta 1

2

En realidad, <article>y <figure> aparecidos a partir de HTML5 no fueron creados en función de la responsividad, sino en función de organizar mejor el contenido de los documentos HTML. De hecho, la documentación no hace referencia al tema de la responsividad cuando explica el sentido de estas etiquetas.

article

Pertenece al grupo de elementos de HTML5 que sirven para el Seccionamiento del contenido los cuales, de acuerdo a la documentación de MDN:

Permiten organizar los contenidos del documento en partes lógicas. Usa los elementos de seccionado para crear una descripción amplia de los contenidos de tu página, incluyendo el encabezado y pie de página y elementos para identificar secciones.

Entre esos elementos se encuentran por ejemplo <section>, <header>, <footer> ... y otros.

MDN define el elemento <article> del siguiente modo:

El Elemento article de HTML () representa una composición auto-contenida en un documento, página, una aplicación o en el sitio, que se destina a distribuir de forma independiente o reutilizable, por ejemplo, en la sindicación. Podría ser un mensaje en un foro, un artículo de una revista o un periódico, una entrada de blog, un comentario de un usuario, un widget interactivo o gadget, o cualquier otro elemento independiente del contenido.

Notas de uso:

  • Cuando los elementos están anidados, los internos representan artículos relacionados con el exterior. Por ejemplo, los comentarios de un blog pueden ser elementos anidados al que representa la entrada del blog.
  • Los datos del autor de un elemento pueden ser proporcionados a través del elemento , pero no se aplica a los elementos anidados.
  • La fecha de publicación y el tiempo de un elemento pueden ser descritos con el atributo pubdate atributo de un elemento .

Especificación de article

Aquí puedes ver la especificación de <article> y también varios ejemplos de cómo usarlo.


figure

Figúrate que <figure> pertenece en HTML5 al grupo de elementos que tratan el Contenido del texto, los cuales, siempre de acuerdo a la doc de MDN, sirven:

Para organizar bloques o secciones de contenido colocados entre los tags de apertura <body> y cierre. Es importante para la accessibilidad y el SEO, que estos elementos se identifiquen con el objetivo o la estructura de ese contenido.

Hermanos de <figure>, serían los ya conocidos <div>, <p>, <li> ... y otros.

Como verás, cuando la doc define a <figure>, tampoco hace referencia a la responsividad.

El elemento HTML <figure> representa contenido independiente, a menudo con un título. Si bien se relaciona con el flujo principal, su posición es independiente de éste. Por lo general, se trata de una imagen, una ilustración, un diagrama, un fragmento de código, o un esquema al que se hace referencia en el texto principal, pero que se puede mover a otra página o a un apéndice sin que afecte al flujo principal.

Notas de uso:

  • Al ser una seccionador raíz, el esbozo del contenido del elemento <figure> está excluido del esbozo principal del documento.
  • Un título puede estar asociado con el elemento <figure> mediante la inserción de un <figcaption> en su interior (como el primero o el último hijo).

Especificación de figure

Aquí puedes ver la especificación de <figure> y también varios ejemplos de cómo usarlo.


¿Da igual usarlas o no?

En buena práctica de programación no da igual usarlas o no. Si existen son para algo y, si quieres ser un buen programador, entonces cumple las normas. Si escribes un documento HTML5 que contiene un <article> o una <figure> entonces etiquétalos como tal.

Buena práctica de programación significa también ayudar a que las páginas que escribas tengan un mejor y mayor impacto a nivel de SEO, y para esto también usar las etiquetas adecuadas es importante.

Digamos que un documento con faltas de ortografía podría ser legible, pero no es lo mismo que si está escrito correctamente. Lo mismo pasa con nuestros documentos HTML escritos con las etiquetas correspondientes o no.

¿Todas se pueden sustituir por CSS?

Sustituir... pues no. ¿Para qué? Lo que sí se pueden es alcanzar usando CSS para aplicarles reglas de estilo. ¿Acaso sustituimos a sus hermanos por CSS, me refiero a los <p>, <div>, <ul>, <section> ..., ¿no los sustituimos verdad? sino que usamos CSS para aplicarles estilo. Pues hemos de darle el mismo trato a estos hermanos más pequeños que acaban de nacer.

Un anexo interesante

Esto sería un diagrama decisional que nos ayuda a tener algunos criterios para decidir cuándo usar los elementos de HTML tomando en cuenta las novedades de HTML5. Prometo traducirlo más adelante si es necesario, pero se entiende.

diagrama de uso de etiquetas HTML5

1
  • Gracias, me ha quedado mas claro, ahora me suena a necedad lo de substituirlas por css jeje
    – Marco Diaz
    el 21 abr. 2017 a las 21:42

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.