Ambas etiquetas ( <div> y <section> ) se usan en la página web, la etiqueta <section> significa que el contenido interno se relaciona con un solo tema, y la etiqueta <div> se usa como una parte de bloque de la página web y no no transmite ningún significado en particular.
Etiqueta HTML <div>: se llama etiqueta de división. La etiqueta <div> es un elemento a nivel de bloque que solo representa sus elementos secundarios y no tiene un significado especial. Toma el Ancho Total disponible en la pantalla. Generalmente se usa con los atributos title y class. La etiqueta <div> es una de las etiquetas más utilizadas en la creación de sitios web. Use el elemento <div> para fines de estilo o para envolver párrafos dentro de una sección a la que se les debe dar propiedades similares. También requiere la etiqueta de cierre </div>.
Nota: Se recomienda usar el elemento <div> como última opción y usar otras etiquetas como <main>, <article> o <nav> ya que esta práctica es más conveniente para los lectores.
Sintaxis:
<div> <h1>Title</h1> <p>Information goes here....</p> </div>
Ejemplo: Este ejemplo muestra la etiqueta <div>.
HTML
<!DOCTYPE html> <html> <head> <title>Div example</title> </head> <body> <h1 style="color:green">GeeksForGeeks</h1> <div style="background-color:#189"> <h2>This is heading inside Div tag</h2> <p>This is paragraph inside Div tag.</p> </div> <p style="color:red">This is outside div tag</p> </body> </html>
Producción:
Etiqueta Html <section>: La etiqueta <section> no es un contenedor genérico en una página web. El contenido dentro de la etiqueta <section> se agrupará, es decir, se conectará a un solo tema y aparecerá como una entrada en un esquema de la página. Una regla común es que el elemento <section> es válido solo si el contenido de ese elemento se incluye explícitamente en el esquema del documento. La etiqueta de sección se utiliza para distribuir el contenido con un tema similar. La principal ventaja de la etiqueta de sección es que describe su significado en una página web. Se usa principalmente cuando se necesitan encabezados, pies de página o cualquier otra sección de documentos en una página web. También requiere la etiqueta de cierre </section>.
Sintaxis:
<section> <h1>Title</h1> <p>Information goes here....</p> </section>
Ejemplo: Este ejemplo muestra la etiqueta <section>
HTML
<!DOCTYPE html> <html> <head> <title>Title of the document</title> </head> <body> <h1 style="color:green">GeeksForGeeks</h1> <section> <h2>GeeksForGeeks </h2> <ul> <li>Machine learing</li> <li>DSA</li> <li>Competitive programming</li> <li>Web-Development</li> <li>Java</li> </ul> </section> <section> <h3>Books</h3> <p>Learn Machine learing</p> <p>Learn DSA</p> <p>Learn Competitive programming</p> <p>Learn Web-Development</p> <p>Learn Java</p> </section> </body> </html>
Producción:
Diferencias entre las etiquetas <div> y <section> :
| <div> | <sección> |
|---|---|
| Se llama como etiqueta de división. | Se llama como etiqueta de sección. |
| Representa sus elementos secundarios y no tiene un significado especial. | Representa sus elementos secundarios y tiene un significado especial. |
| No tiene ningún significado específico. | Describe su significado en la página web. |
| Use el elemento <div> para fines de estilo en la página web. |
use <sección> durante los requisitos de encabezados o pies de página o cualquier otra sección de documentos. |
Publicación traducida automáticamente
Artículo escrito por saksham894954 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA