 |
Elementos HTML <div> y <span>
La principal deferencia entre las etiquetas <div> y <span> es que en el primer caso se define como un elemento en bloque y en la segunda como un elemento en linea. A continuación veamos con ejemplos de código HTML como se comportan.
Dejé estos dos elementos HTML para luego de haber presentado los conceptos de CSS. Estas marcas se utilizan en conjunción con las hojas de estilo. Sin estas tiene poco sentido el empleo de estos elementos HTML.
Estos elementos "div" y "span" nos permiten agrupar un conjunto de elementos y aplicar reglas de estilo. La diferencia entre estos dos elementos es que cuando utilizamos el elemento div produce un salto de línea previo y uno al final, es decir es una marca de bloque como lo son h1,h2,p etc. En cambio el elemento span no produce un salto de línea porque se trata de un elemento en línea como lo son a,em,strong,input etc.
Etiqueta <div> en htmlPara qué sirve la etiqueta div, la etiqueta <div> viene de división, prácticamente funciona y sirve de contenedor de bloque, es decir puede contener uno o varios elementos HTML dentro de ella, es bastante utilizada para agrupar varios elementos que luego serán apuntados con CSS con la finalidad de dar un estilo adecuado a dicho grupo, o también puede servir para organizar mejor nuestra página web.
A continuación veamos un ejemplo concreto, se trata de tres bloques construidos con la etiqueta <div>, claramente diferenciados por el color de fondo de cada bloque:
<h1> Titulo en contenedor rojo</h1><br>
<div id="azul" style="background-color:blue;">
<p> Este es un párrafo dentro de un contenedor div con fondo rojo y que a su vez esta dentro de otro contenedor div con fondo azul</p> </div>
<br><br> </div><br>
<div id="verde" style="background-color: green;">
<h2> Subtitulo en contenedor verde</h2>
<img src="gatito.jpg" width="300px" height="306px"/>
<p> Este es otro parrado que esta dentro de un contenedor div con fondo verde</p></div>
Resultado del ejemplo div:
Como se observa, el bloque <div id="rojo"> posee un color de fondo rojo, además este bloque rojo contiene un título h1 y otro bloque <div id="azul"> color de fondo azul, después de ella se presenta otro bloque <div id="verde"> cuyo color de fondo es verde, este bloque contiene un subtítulo h2 seguido de una imagen y un párrafo al final.
La etiqueta <div> sirve de contenedor de bloque, puede contener varios elementos HTML, incluso otros elementos div a la vez. Cabe señalar que antaño se solía utilizar para organizar las secciones de una página web tales como la cabecera, la navegación o menú, el cuerpo de página, los pies de página, barras laterales, etc. Se le solía poner un atributo id o class con su respectivo nombre como: cabecera, cuerpo, footer, etc. para luego darle estilo con CSS.
Sin embargo desde que apareció HTML5 es mejor emplear las nuevas etiquetas html5 como: <header>, <article>, <footer>, etc. para organizar la estructura de una página y eso lo aprenderemos en su respectiva lección en el curso de html5.
Html5 es una versión de HTML que ha incorporado nuevos elementos con los que se pueden definir directamente bloques que anteriormente teníamos que construirlos con la etiqueta <div> e identificarlos, así que html5 ha solucionado gran parte de estas molestias. Pero <div> es todavía bastante utilizado para agrupar elementos y construir bloques que necesitamos para personalizarlo posteriormente.
Etiqueta <span> en htmlLa etiqueta <span> también funciona como un contenedor pero en este caso será un contenedor en línea. Por ejemplo para destacar una palabra o expresión dentro de un párrafo utilizaremos la etiqueta <span> para encerrar esa palabra o expresión y luego ponerle un estilo mediante un atributo. O también podemos ponerle un identificador, ya sea id o class para luego apuntarlo y maquetarlo con CSS. Ejemplo de código HTML empleando la etiqueta <span>, en este caso utilizaremos span para resaltar una fracción de texto dentro de un párrafo, de tal manera que el color de letra será de rojo y el fondo de color amarillo.
Resultado del código HTML:
