2020(e)ko azaroaren 24(a), asteartea

7 | Etiqueta div (y etiqueta span)

En este post se presenta la etiqueta o marca <div> que aparecerá en la mayoría de las entradas de un blog. También se menciona la etiqueta o marca <span> cuyo uso es muy frecuente.

La etiqueta <div> se emplea para definir un bloque de contenido o sección de la página, para poder aplicarle diferentes estilos e incluso para realizar operaciones sobre ese bloque específico.

Frecuentemente nos encontraremos la marca <div> al alinear un texto, el atributo es align y su cuatro posibles valores son:

  1. left: el texto se alinea a la margen izquierda
  2. center: el texto es centrado
  3. right: el texto se alinea a la margen derecha
  4. justify: el texto es justificado o se alinea a ambas márgenes

Por ejemplo: <div align="center">Todo el párrafo de esta frase estará centrado</div>

Todo el párrafo de esta frase estará centrado

Como se ha visto, el uso de la etiqueta div es sencillo, se marca <div> para señalar el comienzo del bloque y se marca </div> para señalar el fin del bloque. Observemos este otro ejemplo:
<div>
<h1>Índice</h1>
Página principal<br />
Material multimedia<br />
Autores<br />
</div>
Hemos empleado la etiqueta para crear un bloque, que hará las veces de índice de contenidos. Visualmente la etiqueta no provoca ningún cambio, pero en la estructura interna del documento hemos aplicado una división muy importante. Este es el resultado del código anterior:

Índice

Página principal
Material multimedia
Autores
Tal y como se ve, al aplicar la etiqueta div no hay ninguna diferencia visible. Pero internamente el documento ya cuenta con un bloque específico al que se le podría dar un formato determinado. Por ejemplo, mediante el siguiente código encuadraremos el bloque y le daremos un color de fondo:
<div style="border: 2px solid rgb(204, 102, 204);">
<h1>Índice</h1>
Página principal<br />
Material multimedia<br />
Autores<br />
</div>
El resultado sería:

Índice

Página principal
Material multimedia
Autores

Es decir, la etiqueta <div> configura espacios dentro de la página.

Dado que mediante la etiqueta <div> también se puede establecer el tipo de letra (y otras características de formato) del bloque, se puede confundir con la etiqueta <span> que se presenta en Etiqueta span (y etiqueta div).

iruzkinik ez:

Argitaratu iruzkina