Tienda
0
Alojamiento web cloud Terrassa Sabadell

Definición destacada

¿Como funciona el comando en HTML5: 'section'?

ABCDEFGHIJKLMNOPQRSTUVWXYZLinuxHTML5Dominios
La imagen muestra un fondo azul con un texto centrado en letras blancas que muestra la palabra section

Última modificación: 2024-06-17

La Etiqueta <section> en HTML5

La etiqueta <section> es un elemento de bloque en HTML5 que se utiliza para delimitar secciones o áreas temáticamente relacionadas de un documento web. Es importante en la estructuración de la semántica de una página, proporcionando mayor claridad y organización tanto para los desarrolladores como para los motores de búsqueda y tecnologías asistivas.

Atributos de la Etiqueta <section>

La etiqueta <section> en sí no tiene atributos específicos más allá de los atributos globales comunes a todos los elementos HTML. A continuación, se mencionan algunos de estos atributos globales más importantes:

  1. Atributo id

    • Descripción: Define un identificador único para el elemento.
    • Ejemplo: <section id="introduccion"></section>

  2. Atributo class

    • Descripción: Asigna una o más clases al elemento, permitiendo su estilización mediante CSS o selección mediante JavaScript.
    • Ejemplo: <section class="contenido"></section>

  3. Atributo style

    • Descripción: Define estilos en línea para el elemento.
    • Ejemplo: <section style="background-color:lightgrey;"></section>

  4. Atributo title

    • Descripción: Proporciona un texto alternativo que aparece como una descripción emergente cuando el usuario pasa el ratón sobre el elemento.
    • Ejemplo: <section title="Sección de introducción"></section>

  5. Atributo lang

    • Descripción: Especifica el lenguaje del contenido del elemento.
    • Ejemplo: <section lang="es"></section>

Uso de la Etiqueta <section> en HTML5

La etiqueta <section> se utiliza para agrupar contenido temáticamente relacionado en un documento. Cada sección puede tener su propio encabezado y considerarse un área independiente del documento, aunque esté contextualizada dentro de la página más grande.

Ejemplos Sencillos de Uso

  1. Sección del Encabezado del Artículo

    <section>
 <h2>Introducción a HTML5</h2>
 <p>HTML5 es la última revisión del modelo de renovación de HTML...</p>
</section>

  2. Secciones Distintas en una Página de Noticias

    <section id="noticias-recientes">
 <h2>Noticias Recientes</h2>
 <article>
   <h3>Título de la Noticia 1</h3>
   <p>Resumen de la noticia 1...</p>
 </article>
 <article>
   <h3>Título de la Noticia 2</h3>
   <p>Resumen de la noticia 2...</p>
 </article>
</section>

  3. Una Página Web con Múltiples Secciones

    <!DOCTYPE html>
<html lang="es">
<head>
 <meta charset="UTF-8">
 <title>Mi Página Web</title>
</head>
<body>
 <header>
   <h1>Bienvenido a Mi Página Web</h1>
 </header>

 <nav>
   <ul>
     <li><a href="#sobre-mi">Sobre Mí</a></li>
     <li><a href="#portfolio">Portfolio</a></li>
     <li><a href="#contacto">Contacto</a></li>
   </ul>
 </nav>

 <section id="sobre-mi">
   <h2>Sobre Mí</h2>
   <p>Este es un pequeño resumen sobre mí...</p>
 </section>

 <section id="portfolio">
   <h2>Portfolio</h2>
   <p>Aquí están algunos de mis proyectos recientes...</p>
 </section>

 <section id="contacto">
   <h2>Contacto</h2>
   <p>Puedes contactarme a través de...</p>
 </section>

 <footer>
   <p>© 2023 Mi Página Web</p>
 </footer>
</body>
</html>

En resumen, la etiqueta <section> es muy útil para estructurar contenido relacionado temáticamente en un documento web, y sus atributos globales permiten personalizar y manejar estas secciones de manera efectiva.

Colaboraciónes de nuestros usuarios

¿Tienes algo que agregar? ¡Déjanos tu colaboración!

Contribuye a mejorar esta definición.