Etiqueta section en HTML

¿Qué es la etiqueta section en HTML?

La etiqueta <section> es una de las nuevas etiquetas en HTML5 que se utiliza para identificar una sección distinta y coherente en un documento HTML.

Esta etiqueta permite agrupar contenido lógico en secciones separadas dentro de un documento, lo que facilita la organización y la estructuración de contenido.

Cada sección dentro de una etiqueta <section> debe tener un título que describa su contenido y puede incluir cualquier tipo de contenido, como texto, imágenes, tablas, formularios, etc.

Es importante notar que cada sección dentro de una etiqueta <section> debe ser independiente y significativa por sí sola, y no simplemente una parte de una sección más grande.

La etiqueta <section> es una forma semántica de marcar contenido en un documento HTML y puede ser útil para mejorar la accesibilidad y la usabilidad del contenido, así como para mejorar la estructuración y la organización del contenido.

Al utilizar la etiqueta <section>, los motores de búsqueda y los lectores de pantalla pueden comprender mejor la estructura y el contenido del documento.

Ejemplo de uso

Aquí hay otro ejemplo de cómo se puede usar la etiqueta <section> en HTML5:

<body> <header> <h1>Mi sitio web</h1> <nav> <ul> <li><a href="#inicio">Inicio</a></li> <li><a href="#nosotros">Nosotros</a></li> <li><a href="#servicios">Servicios</a></li> <li><a href="#contacto">Contacto</a></li> </ul> </nav> </header> <main> <section id="inicio" class="destacada"> <h2>Bienvenidos a mi sitio web</h2> <p>En este sitio encontrarás información sobre nuestra empresa y los servicios que ofrecemos.</p> </section> <section id="nosotros" class="normal"> <h2>Nosotros</h2> <p>Somos una empresa dedicada a ofrecer soluciones tecnológicas innovadoras y eficientes para pequeñas y medianas empresas.</p> <p>Contamos con un equipo altamente capacitado y comprometido con la satisfacción de nuestros clientes.</p> </section> <section id="servicios" class="destacada"> <h2>Servicios</h2> <ul> <li>Desarrollo de software a medida</li> <li>Implementación de tecnologías de la información</li> <li>Consultoría y asesoramiento tecnológico</li> <li>Mantenimiento y soporte técnico</li> </ul> </section> <section id="contacto" class="normal"> <h2>Contacto</h2> <form action="enviar_mensaje.php" method="post"> <label for="nombre">Nombre:</label> <input type="text" id="nombre" name="nombre" required> <label for="email">Email:</label> <input type="email" id="email" name="email" required> <label for="mensaje">Mensaje:</label> <textarea id="mensaje" name="mensaje" required></textarea> <input type="submit" value="Enviar"> </form> </section> </main> <footer> <p>Todos los derechos reservados © 2023</p> </footer> </body>
Lenguaje del código: HTML, XML (xml)

En este ejemplo, se utiliza la etiqueta <section> para identificar diferentes secciones en una página web, como inicio, nosotros, servicios y los detalles de contacto.

Cada sección tiene su propio contenido y título, y está enlazado a través de una barra de navegación en la cabecera de la página.

Atributos

La etiqueta <section> en HTML5 no tiene atributos específicos, pero puede utilizar los atributos globales de HTML, como id, class, style, title, entre otros.

  • id: permite identificar de forma única una sección en particular dentro de un documento HTML y se utiliza para hacer referencia a la sección desde otros elementos, como enlaces.
  • class: permite asignar una o varias clases a una sección y utilizarlas para estilos CSS.
  • style: permite especificar estilos CSS para una sección en particular, directamente en la etiqueta.
  • title: permite especificar un título adicional para una sección que puede ser útil para mejorar la accesibilidad del contenido.

En resumen, los atributos de la etiqueta <section> permiten personalizar y describir de forma más detallada el contenido dentro de una sección.

Ejemplo

Aquí hay un ejemplo de cómo se pueden utilizar los atributos en la etiqueta <section> en HTML5:

<body> <header> <h1>Mi sitio web</h1> </header> <nav> <ul> <li><a href="#seccion1">Sección 1</a></li> <li><a href="#seccion2">Sección 2</a></li> <li><a href="#seccion3">Sección 3</a></li> </ul> </nav> <main> <section id="seccion1" class="destacada" style="background-color: lightgray;"> <h2>Sección 1</h2> <p>Esta es la sección 1 del sitio web, con estilo destacado y fondo gris claro.</p> </section> <section id="seccion2" class="normal"> <h2>Sección 2</h2> <p>Esta es la sección 2 del sitio web, con estilo normal.</p> </section> <section id="seccion3" class="destacada" style="background-color: lightblue;"> <h2>Sección 3</h2> <p>Esta es la sección 3 del sitio web, con estilo destacado y fondo azul claro.</p> </section> </main> <footer> <p>Todos los derechos reservados.</p> </footer> </body>
Lenguaje del código: HTML, XML (xml)

En este ejemplo, se utiliza el atributo id para identificar de forma única cada sección y hacer referencia a ellas desde los enlaces de la barra de navegación.

Además, se utiliza el atributo class para asignar diferentes estilos a cada sección y el atributo style para especificar estilos CSS adicionales para cada sección.

Más ejemplos

Aquí hay dos ejemplos de cómo se pueden utilizar la etiqueta <section> en HTML5:

Ejemplo 1:

<body> <header> <h1>Mi sitio web</h1> <nav> <ul> <li><a href="#introduccion">Introducción</a></li> <li><a href="#caracteristicas">Características</a></li> <li><a href="#ventajas">Ventajas</a></li> </ul> </nav> </header> <main> <section id="introduccion" class="destacada"> <h2>Introducción</h2> <p>Bienvenidos a mi sitio web, donde encontrarás información sobre un producto innovador y único en su clase.</p> </section> <section id="caracteristicas" class="normal"> <h2>Características</h2> <ul> <li>Diseño elegante y compacto</li> <li>Pantalla táctil de alta resolución</li> <li>Cámara trasera de alta calidad</li> <li>Procesador rápido y eficiente</li> </ul> </section> <section id="ventajas" class="destacada"> <h2>Ventajas</h2> <ul> <li>Uso intuitivo y fácil</li> <li>Múltiples opciones de almacenamiento</li> <li>Batería duradera</li> <li>Soporte de actualizaciones y mejoras constantes</li> </ul> </section> </main> <footer> <p>Todos los derechos reservados © 2023</p> </footer> </body>
Lenguaje del código: HTML, XML (xml)

En este ejemplo, se utiliza el atributo id para identificar de forma única cada sección y hacer referencia a ellas desde los enlaces de la barra de navegación.

Además, se utiliza el atributo class para asignar diferentes estilos a cada sección, de manera que la sección de introducción y ventajas tenga un estilo destacado y la sección de características tenga un estilo normal.

Ejemplo 2:

<body> <header> <h1>Mi periódico en línea</h1> <nav> <ul> <li><a href="#nacionales">Noticias nacionales</a></li> <li><a href="#internacionales">Noticias internacionales</a></li> <li><a href="#deportes">Noticias deportivas</a></li> <li><a href="#entretenimiento">Noticias de entretenimiento</a></li> </ul> </nav> </header> <main> <section id="nacionales" class="destacada"> <h2>Noticias nacionales</h2> <article> <h3>Nueva medida del gobierno para combatir la inflación</h3> <p>El gobierno anunció hoy una nueva medida económica para combatir la inflación que ha afectado al país en los últimos meses.</p> <p>Esta medida consiste en un control de precios más estricto para los productos de la canasta básica y un aumento en la producción de alimentos en el país.</p> </article> <article> <h3>Inauguración de nuevo hospital en la ciudad</h3> <p>La ciudad acaba de inaugurar un nuevo hospital con equipamiento de última generación y un equipo médico altamente capacitado.</p> <p>Este hospital será de gran ayuda para la población y mejorará la atención médica en la región.</p> </article> </section> <section id="internacionales" class="normal"> <h2>Noticias internacionales</h2> <article> <h3>Acuerdo comercial entre países europeos</h3> <p>Varios países europeos acaban de firmar un acuerdo comercial que impulsará el comercio entre ellos y mejorará la economía de la región.</p> </article> <article> <h3>Nueva tecnología para el ahorro de energía en el hogar</h3> <p>Una compañía tecnológica acaba de lanzar al mercado una nueva tecnología que permitirá a los hogares ahorrar hasta un 30% en el consumo de energía eléctrica.</p> </article> </section> <section id="deportes" class="destacada"> <h2>Noticias deportivas</h2> <article> <h3>Nuevo récord mundial en natación</h> <p>Un nadador acaba de romper el récord mundial en la prueba de 200 metros estilo libre en los Juegos Olímpicos de la Juventud.</p> <p>Este logro ha sido el resultado de años de arduo entrenamiento y dedicación por parte del atleta.</p> </article> <article> <h3>Equipo de fútbol gana campeonato nacional</h3> <p>El equipo de fútbol local acaba de ganar el campeonato nacional después de una intensa competencia contra otros equipos de la liga.</p> <p>La victoria ha sido celebrada por los aficionados y se espera que el equipo siga mejorando en próximas temporadas.</p> </article> </section> <section id="entretenimiento" class="normal"> <h2>Noticias de entretenimiento</h2> <article> <h3>Nueva película de acción en cartelera</h3> <p>Una nueva película de acción ha llegado a las carteleras y se espera que sea un éxito en taquilla.</p> <p>La película cuenta con un reparto estelar y efectos visuales impactantes.</p> </article> <article> <h3>Concierto de música en vivo en la ciudad</h3> <p>La ciudad acogerá próximamente un concierto de música en vivo con algunos de los artistas más populares de la escena musical actual.</p> <p>Este concierto promete ser una noche inolvidable para los amantes de la música.</p> </article> </section> </main> <footer> <p>Todos los derechos reservados &copy; Mi periódico en línea 2023</p> </footer> </body>
Lenguaje del código: HTML, XML (xml)

En este ejemplo se utiliza la etiqueta <section> para separar las diferentes categorías de noticias en la página de un periódico en línea.

Cada sección incluye un título y varios artículos relacionados con las noticias. Además, se utilizan atributos como id y class para identificar cada sección y aplicar estilos en CSS.