7 | Etiqueta div (y etiqueta span) [código HTML]

<table align="center" border="1" style="background-color: #bbccee; width: 600px;"><tbody>

<tr>

<td><div style="text-align: center;">

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

</td></tr>

</tbody></table>

<br />

La etiqueta <b>&lt;div&gt;</b> 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.

<br />

<p>Frecuentemente nos encontraremos la marca <b>&lt;div&gt;</b> al alinear un texto, el atributo es <b>align</b> y su cuatro posibles valores son:</p>

<ol style="text-align: left;">

  <li><i>left</i>: el texto se alinea a la margen izquierda</li>

  <li><i>center</i>: el texto es centrado</li>

  <li><i>right</i>: el texto se alinea a la margen derecha</li>

  <li><i>justify</i>: el texto es justificado o se alinea a ambas márgenes</li>

</ol>

<p>Por ejemplo:&nbsp;<span style="font-family: courier;">&lt;div align="center"&gt;Todo el párrafo de esta frase estará centrado&lt;/div&gt;</span></p>

<div align="center"><span style="font-size: medium;">Todo el párrafo de esta frase estará centrado</span></div>

<br />Como se ha visto, el uso de la etiqueta <b>div</b> es sencillo, se marca &lt;div&gt; para señalar el comienzo del bloque y se marca &lt;/div&gt; para señalar el fin del bloque. Observemos este otro ejemplo:

<br />

<blockquote>

&lt;div&gt;<br />

&lt;h1&gt;Índice&lt;/h1&gt;<br />

Página principal&lt;br /&gt;<br />

Material multimedia&lt;br /&gt;<br />

Autores&lt;br /&gt;<br />

&lt;/div&gt;

</blockquote>

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:<br />

<blockquote>

<div>

<h1>

Índice</h1>

Página principal<br />

Material multimedia<br />

Autores</div>

</blockquote>

Tal y como se ve, al aplicar la etiqueta <b>div</b> 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:<br />

<blockquote>

&lt;div style="border: 2px solid rgb(204, 102, 204);"&gt;<br />

&lt;h1&gt;Índice&lt;/h1&gt;<br />

Página principal&lt;br /&gt;<br />

Material multimedia&lt;br /&gt;<br />

Autores&lt;br /&gt;<br />

&lt;/div&gt;</blockquote>

El resultado sería:<br />

<blockquote>

<div style="background-color: lightgrey; border: 2px solid rgb(204, 102, 204);">

<h1>

Índice</h1>

Página principal<br />

Material multimedia<br />

Autores</div>

</blockquote>

<br />

Es decir, la etiqueta <b>&lt;div&gt;</b> configura espacios dentro de la página.<br />

<br />

Dado que mediante la etiqueta <b>&lt;div&gt;</b> también se puede establecer el tipo de letra (y otras características de formato) del bloque, se puede confundir con la etiqueta <b>&lt;span&gt;</b> que se presenta en <a href="https://blogbasicoparapracticarhtml.blogspot.com.es/2018/01/etiqueta-span-y-etiqueta-div.html" target="_blank">Etiqueta span (y etiqueta div)</a>.<br />

<br />