La visualización de los elementos

Regresar al índice

1. En HTML 4

El HTML 4 "ordenaba" los elementos en función del tipo de visualización en los navegadores (http://www.w3.org/TR/html4/struct/global.html#h-7.5.3). Los elemento de tipo block se visualizan a continuación unos de otros. Es el caso de los párrafos <p>, los títulos <hx>, las cajas <div>...

Los elementos de tipo inline se muestran uno al lado del otro, en la línea de texto. Es el caso de los vínculos <a>, de las divisiones <span>, de los estilos <strong>, <em>...

También tenemos la visualización: inline-block, list-item, table, table-row...

Las reglas de imbricación establecen que:

• un elemento inline solo puede contener otros elemento inline y datos, es decir, texto. 
• un elemento block puede contener otros elemento block, así como elementos inline.

Sin embargo, con la propiedad display podemos cambiar sin problemas el tipo de visualización. Así, con display: block es posible visualizar un vínculo <a> como si fuera un bloque y de este modo presentará todas las características propias de los bloques.

2. En HTML5

En HTML5 esta "clasificación" ha quedado obsoleta. Es más, ya no se considera como un tipo de clasificación. Esto quiere decir que es usted, el autor del sitio web, quien deberá indicar cómo se deben visualizar los distintos elementos. De lo contrario, se aplicará la hoja de estilo predeterminada de cada navegador.

Usted podrá insertar sin problemas un elemento <a> que contenga un título <h2> y una imagen <img>, siempre y cuando especifique el modo de visualización de cada uno de los elementos en las hojas de estilo CSS con la propiedad display.

Esta estructura sería correcta en HTML5:

<a id="inicio" href="#">

<h2 id="titulo">Inicio</h2>

<img id="triángulo" src="triángulo.png" alt="" />

</a>

Los estilos CSS:

#inicio {

display: block;

}

#titulo, #triangulo {

display: inline;

}

Vista:

Espero haber ayudado en algo. Hasta la próxima oportunidad!

Regresar al índice