Ambas etiquetas son etiquetas semánticas en HTML 5. En este artículo, discutiremos el comportamiento de las etiquetas <article> y <section>. Tanto las etiquetas <article> como <section> se representan de manera similar pero se usan con algún significado, ese significado es para los navegadores y los desarrolladores. Ambas etiquetas pueden reemplazarse entre sí ya que no habrá cambios en las salidas, pero será difícil de entender por parte de los desarrolladores y los navegadores para actuar sobre ese contenido.
Etiqueta <article> : esta etiqueta contiene contenido independiente que no requiere ningún otro contexto. Entonces, la etiqueta <article> se puede colocar dentro del contenido principal. Pero cada uno de los artículos tendrá contenido independiente dentro del mismo. Al igual que YouTube solía contener diferentes tipos de videos en una sola página, cada video es independiente o puede ver la página del curso de GeeksforGeeks , cada curso es independiente, cada curso puede tener su propia página.
Rasgo:
- Un artículo puede tener artículos anidados y eso debería hacer referencia al artículo principal.
- Las etiquetas de artículos son perfectas para la información de microdatos.
Etiqueta <section> : esta etiqueta se usa para dividir una página en secciones como Introducción, Información de contacto, Detalles, etc. y cada una de estas secciones puede estar en una etiqueta <section> diferente. La etiqueta <section> se introduce para resumir las cosas en una sección en particular. La etiqueta <section> divide el contenido en secciones y subsecciones. La etiqueta de sección se utiliza cuando se necesitan dos encabezados o pies de página o cualquier otra sección de los documentos. Etiqueta de sección que agrupa el bloque genérico de contenido relacionado.
Rasgo:
- Una sección puede tener secciones anidadas
Nota: Colocar la etiqueta <article> dentro de la etiqueta <section> es una buena práctica, ya que la sección básicamente define los tipos y los artículos contendrán los contenidos específicos en ese tipo de sección.
Ejemplo: En este ejemplo usaremos tanto las etiquetas dependiendo de su comportamiento como artículos que contienen una lista de contenido independiente y la etiqueta de sección contendrá secciones específicas en una página web.
html
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<title>
article tag over section tag
</title>
<style>
.container {
width: 650px;
height: auto;
}
.section {
float: right;
}
.article {
float: left;
}
h1 {
color: green;
}
</style>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<p>A Computer Science Portal</p>
<div class="container">
<div class="article">
<article>
<h2>This is article tag</h2>
<p>
Above header(h2) placed
in article tag
</p>
</article>
<h2>This is non-article tag</h2>
<p>
The header is larger compare
to above header
</p>
</div>
<div class="section">
<section>
<h2>This is section tag</h2>
<p>
Above header(h2) placed
in section tag
</p>
</section>
<h2>This is non-section tag</h2>
<p>
The header is larger compare
to above header
</p>
</div>
</div>
</center>
</body>
</html>
Producción:
Elige uno sobre otro:
- Etiqueta <section>: cuando solo desea decorar cualquier contenido en su página, es decir, desea agregar algunas funciones, puede usar la etiqueta <section>, que también puede ser reemplazada por la etiqueta <div>. La etiqueta de sección será buena cuando el contenido de cualquier página web sea apropiado para el esquema de contenido y los navegadores no presten atención a los esquemas.
- Etiqueta <article>: La etiqueta <article> es una etiqueta autocompletada, esto se puede usar por cualquiera de esos motivos, donde se requiere la etiqueta <section> más la etiqueta <article> para colocar el contenido de forma independiente. La etiqueta del artículo se puede utilizar para colocar cualquier publicación social, artículo de revista, blogs, lista de contenidos relacionados, cualquier contenido independiente.
Etiquetas para:
- Si su contenido contiene la fecha, el precio, el autor, la descripción, etc., busque la etiqueta del artículo. Básicamente, use una etiqueta de artículo para contener contenido que podría compartirse y, obviamente, para artículos reales. Envuelve tus publicaciones de blog en ellas.
- Si su contenido contiene algún tipo de procedimiento para hacer o crear algo que dependerá de algo, busque la etiqueta de sección como un div, cuando describe lo que incluiría el esquema de su documento.
Veamos las diferencias en forma tabular -:
| <sección> | <artículo> | |
| 1. | La etiqueta <section> define una sección en un documento. | La etiqueta <article> especifica contenido independiente e independiente. |
| 2. | La etiqueta <section> admite atributos globales | Admite atributos de eventos |
| 3. | La etiqueta <section> admite atributos de eventos. | Admite atributos globales |
| 4. |
La etiqueta <section> es compatible con los siguientes navegadores: Chrome (5.0), Microsoft Edge (9.0), Firefox (4.0), Safari (5.0), Opera Mini (11.5) |
Es compatible con los siguientes navegadores: Chrome (6.0), Microsoft Edge (9.0), Firefox (4.0), Safari (5.0), Opera Mini (11.1) |
Publicación traducida automáticamente
Artículo escrito por Sabya_Samadder y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA