En este artículo, veremos cómo representar el artículo en HTML.
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 ejemplo, 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.
Sintaxis:
<article> {
display:block;
}
Ejemplo: este ejemplo utiliza 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="article tag" width="300" height="250" class="alignnone size-medium wp-image-560930" /> <h1>GeeksforGeeks</h1> <p> What We Offer We provide a variety of services for you to learn, thrive and also have fun! Free Tutorials, Millions of Articles, Live, Online and Classroom Courses ,Frequent Coding Competitions, Webinars by Industry Experts, Internship opportunities and Job Opportunities. </p> </article> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por sravankumar8128 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA