fbpx

HTML section

La etiqueta HTML <section> se utiliza para encerrar toda una sección genérica de un código en específico.

Es similar a la etiqueta <div>, pero se diferencia en que esta etiqueta encierra una parte del código, pero no necesariamente debe tener una intención o semántica.

Por ejemplo, en un blog la parte que conforman los comentarios puede encerrarse en una sección. Igualmente, la entrada del autor puedes encerrarla en otra sección. Y de esa manera puedes tener estructurado todo tu blog o página web.

Descripción

La codificación de la etiqueta section en HTML es <section> y </section> (ambas son obligatorias). Es usada frecuentemente para darle un estilo a la sección, determinando el contenido en todo el esquema.

Las secciones separadas son excelentes para ubicar rápidamente un tipo de contenido en específico, a la hora de realizar cualquier actualización.

Y es que la etiqueta section es temática, es decir, encierra las secciones con los elementos que pertenecen a un mismo tema.

Por ejemplo, los párrafos e imágenes que corresponden a la presentación de una página web pueden considerarse de un mismo tema y ser encerradas con la etiqueta HTML <section>.

Ejemplos

Algunos ejemplos del uso de la etiqueta section en HTML se presentan a continuación:

Ejemplo Nº 1

<section>
  <h1> Encabezado </h1>
  <p> Un contenido muy impresionante </p>
</section>

Ejemplo Nº 2

<section>
  <h2> Encabezado </h2>
  <img scr=”rosa.jpg” alt=”una rosa”>
</section>

Atributos

La etiqueta HTML <section> sólo tiene los atributos globales, que son los comunes para todas las etiquetas. A continuación, te indicamos algunos de ellos:

dir

Con este atributo puedes indicar la dirección del texto. Es muy útil para los idiomas que se escriben de la derecha hacia la izquierda, tales como el árabe (utiliza el valor ltr). Igualmente, puedes indicar que el texto vaya de izquierda a derecha como se escribe en el español y para éste utiliza el valor rtl.

Tiene un valor adicional con el que asigna automáticamente la dirección del texto, auto, de acuerdo a como encuentre los caracteres dentro del elemento.

hidden

Este atributo lo puedes utilizar cuando quieras esconder algún elemento, que no pueda ser mostrado hasta que se termine el proceso de ingreso.



Share This