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 © 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.