Etiqueta HTML5 <artículo>

La etiqueta <article> es uno de los nuevos elementos de sección en HTML5. La etiqueta HTML <article> se utiliza para representar un artículo. Más específicamente, el contenido dentro de la etiqueta <article> es independiente del resto del contenido del sitio (aunque puede estar relacionado).

En otras palabras, el elemento del artículo representa un componente de una página que consiste en una composición independiente en un documento, página o sitio. por ej. en sindicación.

Una fuente potencial para el elemento del artículo son:

  • Un artículo de revista/periódico
  • una entrada de blog
  • Una publicación del foro
  • Un usuario envió un comentario

Esta etiqueta se usa con mayor frecuencia en dos contextos:

  • En una página con una sola pieza de contenido, se puede usar un solo elemento <article> para contener el contenido principal y diferenciarlo del resto de la página.
  • En una página con múltiples piezas de contenido (una página de índice de blog, una página de resultados de búsqueda, una página de categoría, fuente de noticias), se pueden usar múltiples elementos <article> para contener cada pieza individual de contenido.

De cualquier manera, es similar al elemento <div> y muestra el mismo estilo de trabajo. Sin embargo, el uso del elemento <article> en lugar de <div> proporciona más información semántica a los lectores de pantalla, los motores de búsqueda y las aplicaciones de terceros.

Nota: esta etiqueta no se muestra como algo especial en un navegador, debe usar CSS para eso.

Configuración predeterminada de CSS: la mayoría de los navegadores mostrarán el elemento Artículo con los siguientes valores.

HTML

<article> {
    display:block;
}

Ejemplo:  uso de estilo en línea en un elemento de artículo

HTML

<!DOCTYPE html>
<html>
  <body>
    <article
      style="
        width: 300px;
        border: 2px solid gray;
        padding: 10px;
        border-radius: 10px;
        margin: 5px;
      "
    >
      <img
        src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
        alt=""
        width="300"
        height="250"
        class="alignnone size-medium wp-image-560930"
      />
      <h1>GeeksforGeeks</h1>
       
 
<p>
        Sandeep Jain(FOUNDER) An IIT Roorkee alumnus and
        founder of GeeksforGeeks. Apart from GeeksforGeeks,
        he has worked with DE Shaw and Co. as a software
        developer and JIIT Noida as an assistant professor.
      </p>
 
 
    </article>
  </body>
</html>

Producción: 

Navegadores compatibles: 

  • Google Chrome 5.0 y superior
  • Borde 12.0 y superior
  • Internet Explorer 9.0 y superior
  • Firefox 4.0 y superior
  • Ópera 11.1 y superior
  • Safari 5.0 y superior

Publicación traducida automáticamente

Artículo escrito por AshishVishwakarma1 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *