Etiquetas HTMLson las partes de punto inicial y final de un documento HTML, comienza con < (menor que) y finaliza con > (mayor que paréntesis angular).
Las etiquetas en HTML son palabras clave en las que cada etiqueta individual específica tiene un significado único.
Diferencia entre la etiqueta <article>, la etiqueta <p> y la etiqueta <section> en HTML:
Etiqueta HTML <article>: La etiqueta <article> es una etiqueta semánticaque describe su significado tanto para el desarrollador como para el navegador.Especifica independencias, contenido autocontenido. No requiere ningún otro contexto. Un artículo tiene un significado propio y debe distribuirse independientemente del resto del sitio web (aunque puede estar relacionado). Estas etiquetas son perfectas para presentar información de microdatos.
Algunas fuentes potenciales deelemento artículo puede ser:
- Entrada de blog
- Comentario enviado por un usuario
- Artículo de periódico/revista
- Publicación en el foro
Nota: el artículoEl elemento no representa nada especial en un navegador. Por defecto, el elemento del artículo es de nivel de bloque.
El artículo se utiliza principalmente en dos contextos:
- En una página que consta de una sola pieza de contenido, se usa un solo elemento <article> para contener el contenido principal y separarlo del resto de la página.
- En una página, como una página de resultados de búsqueda, una página de índice de blog, etc., se utilizan varios elementos <article> para contener piezas individuales de contenido.
Ejemplo: Este ejemplo muestra el caso de uso de la etiqueta <article> en nuestra página web.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
article {
background-color: rgb(236, 233, 233);
width: 300px;
border: 2px solid black;
padding: 5px;
border-radius: 10px;
margin: auto;
box-sizing: border-box;
}
img {
height: 150px;
width: 150px;
}
</style>
</head>
<body>
<article>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220120191044/logo-200x145.png"
alt="GfG Logo">
<h1>GeeksforGeeks</h1>
<p>
A Computer Science portal for geeks.
It contains well written, well thought
and well-explained computer science
and programming articles, quizzes,
and live courses
</p>
</article>
</body>
</html>
Producción:
Etiqueta HTML <p> : la etiqueta <p> es tanto de presentación como semántica. Define párrafos en HTML. Cualquier cosa escrita dentro de <p> y </p> se trata como un párrafo. El navegador agrega automáticamente un espacio (una sola línea en blanco) antes y después de cada elemento <p> , que son simplemente márgenes agregados por el navegador. El navegador reduce múltiples líneas y espacios agregados por los usuarios a uno solo.
Nota: De forma predeterminada, el elemento <p> es de nivel de bloque. La etiqueta <p> es más útil cuando hay varios párrafos para agregar en artículos, historias, etc.
El estilo CSS predeterminado para el elemento <p> en la mayoría de los navegadores es el siguiente.
p {
margin-right: 0;
margin-left: 0;
margin-bottom: 1em;
margin-top: 1em;
}
Ejemplo: Este ejemplo muestra el caso de uso de la etiqueta <p> en nuestra página web.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Paragraph Tag</title>
<style>
.container {
height: 100px;
width: 650px;
background-color: green;
font-weight: 500;
padding-top: 3px;
color: whitesmoke;
}
</style>
</head>
<body>
<div class="container">
<p>
Hi Geeks, Welcome to GeeksforGeeks.
This is Paragraph 1.
It has multiple lines
</p>
<p>
Hi Geeks, Welcome to GeeksforGeeks.
This is Paragraph 2.
It also has multiple lines
</p>
</div>
</body>
</html>
Producción:
Etiqueta HTML <section> : La etiqueta <section> es una etiqueta semántica. Divide una página en diferentes secciones, como introducción, detalles, información de contacto, etc., que en su mayoría están contenidas en diferentesetiquetas <section> . Incluso puede dividir los contenidos en subsecciones. Se usa principalmente cuando se necesitan requisitos de 2 encabezados o cualquier otra sección de documentos.
Nota: Por defecto , el elemento <section> es de nivel de bloque.
Ejemplo: Este ejemplo muestra el caso de uso de la etiqueta <section> en nuestra página web.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Section Tag</title>
<style>
.container {
width: 400px;
height: 400px;
background-color: #dadada;
margin: auto;
}
div>section {
height: calc(100%/3);
width: 100%;
font-size: 2rem;
font-weight: 500;
}
div>section:nth-of-type(2n) {
background-color: green;
color: white;
}
.sub {
font-size: 1.2rem;
font-weight: 400;
}
</style>
</head>
<body>
<div class="container">
<section> Section 1 - Education
<section class="sub">Subsection 1 - About College</section>
<section class="sub">Subsection 2 - About School</section>
</section>
<section>Section 2 - Hobbies</section>
<section>Section 3 - Contact Info</section>
</div>
</body>
</html>
Producción:
La siguiente tabla explica las diferencias entre la etiqueta <article>, la etiqueta <p> y la etiqueta <section> en HTML.
| etiqueta <artículo> | etiqueta <p> | etiqueta <sección> |
|---|---|---|
| La etiqueta del artículo es una etiqueta semántica. | El párrafo es una etiqueta de presentación y semántica. | La etiqueta de sección es una etiqueta semántica. |
|
Cuándo usar:
|
Cuándo usar: agregar varios párrafos en artículos, historias, blogs informativos. | Cuándo usar: Agregar múltiples encabezados o secciones en un documento. |
| La propiedad de visualización CSS predeterminada es «Bloquear» | La propiedad de visualización CSS predeterminada es «Bloquear» | La propiedad de visualización CSS predeterminada es «Bloquear» |
Publicación traducida automáticamente
Artículo escrito por siddharthredhu01 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA