menú
¿Música de YouTube sin molestos comerciales? ¡Ahora es posible!
TubeFiesta es una aplicación que te permite reproducir música de YouTube como un reproductor tradicional.
Crear listas, reproducción aleatoria, repetir, y hasta exportar el video a otra pantalla.
Conocer más Ir a tfiesta.com

Tipos de etiquetas HTML y ejemplos

Publicado el 05/02/2014 | 1045 visitas

Como lo indicaba en la presentación del tutorial de maquetación, solo basta con conocimientos básicos en HTML y CSS para aprender, y suponiendo que seas una persona que cumple exactamente con estas características, daré una breve introducción a los tipos de elementos HTML ya que es uno de los conceptos más importantes y debes entenderlo muy bien. Así que atención.

Entendiendo el flujo del documento

Como tal vez ya lo sabes, una pagina HTML es una cantidad de elementos padres e hijos que siguen un flujo común (de izquierda a derecha y de arriba hacia abajo), y por "naturaleza" cada elemento sigue a su elemento anterior con este mismo flujo.

tags html

Pero lo que realmente importa en este tutorial es que no todos los elementos tienen las mismas propiedades para acoplarse al flujo, es decir, algunos elementos permiten que otros estén a su derecha o a su izquierda pero otros ocupan toda una fila y fuerzan un salto de línea. No entiendes?, sigue leyendo.

Tipos de etiquetas HTML y ejemplos

En HTML se encuentran básicamente dos tipos de elementos que son elementos de bloque y elementos de línea.

Los elementos de bloque son aquellos que se dibujan ocupando todo el ancho de su contenedor y que no permiten que otro elemento se posicione a su izquierda o a su derecha. Otra caracteristica de un elemento de bloque es que nos permiten establecer un ancho y un alto (o tamaño). Un ejemplo muy claro es la etiqueta <div>.

Los elementos de línea son aquellos que permiten que otros se ubiquen a sus lados y a diferencia de los tipos bloque, a estos *no* podemos establecer un tamaño alto y ancho. Un ejemplo puede ser la etiqueta <span>

Ejemplo

<div style="background:#008DCF; color:white; border:dashed 1px #F00;">
    este es un div, elemento de bloque.
</div>
<p style="background:#008DCF; color:white; border:dashed 1px #F00;">
    Este es un parrafo, (etiqueta p) y también es un elemento de bloque.
</p>
<span style="background:#FF8900; color:white; border:dashed 1px #00F;">
    este es un span, elemento de línea
</span>
<span style="background:#FF8900; color:white; border:dashed 1px #00F;">
    este es otro span
</span>
<a style="border:dashed 1px #FF8900;" href="http://eledwin.com">
    Enlace a Eledwin.com
</a>

Resultado:

este es un div, elemento de bloque.

Este es un parrafo, (etiqueta p) y también es un elemento de bloque.

este es un span, elemento de línea este es otro span Enlace a Eledwin.com

Suficiente ilustración no?, observa como las etiquetas <div> se "amontonan" hacia abajo junto con las etiquetas <p>, y las etiquetas <span> y los link (etiquetas <a>) se ubican en una misma línea.

La propiedad display de CSS

Aunque estos elementos se dibujan por defecto en el navegador de esta manera, podemos modificar su propiedad css display y de esta manera personalizar la visualización.

Vamos a poner el mismo ejemplo solamente con los div pero modificando la propiedad display.

</div style="background: #FF8900; color:white;">
    div común
</div>
</div style="background: #008DCF; color:white; display:inline">
    div con la propiedad display:inline
</div>
div común
div con la propiedad display:inline

En la propiedad display podemos establecer los valores inline, block, inline-block, entre otros.

Para que se usa inline-block

Tal vez esta propiedad genere una tipica pregunta en ustedes y es ¿para que combinar las dos visualizaciones?.

Pues bien, como lo dije al inicio de esta entrada, una diferencia de las etiquetas inline y block es que a la primera no se le puede establecer un tamaño ya que tomará forzosamente el tamaño de la información que contiene en su interior.

El valor inline-block nos permite establecer a un elemento que se muestre como línea pero que nos permita utilizar sus características de tamaño como su fuera de bloque. Veamos un ejemplo:

<div style="background: #FF8900; color:white; width: 100px; height:100px; display:inline;">
    div inline 100px por 100px
</div>
<div style="background: #008DCF; color:white; width: 100px; height:100px; display:inline-block;">
    div inline-block 100px por 100px
</div>

Resultado:

div inline 100px por 100px
div inline-block 100px por 100px

No hay mucho que explicar, ambos se comportan como elementos en línea inline pero solo el elemento con inline-block toma el tamaño que se le está estableciendo.

Esto es solamente el comienzo, si consideras de interés esta información puedes subscribirte y recibir nuevos contenidos y/o comentar aquí abajo si tienes dudas o sugerencias.

Talvez te interese...

[Truco] Contar caracteres en Google Chrome
Mejora la primera impresión con una WebFont
Flashes de cámara con JQuery
Lluvia de colores con JQuery
blog comments powered by Disqus