Elementos HTML: nivel de bloque frente a elementos en línea

También hay un tercer tipo de elemento en HTML: aquellos que no se muestran en absoluto. Estos elementos proporcionan información sobre la página, pero no se muestran cuando se representan en un navegador web.

Por ejemplo:

• define estilos y hojas de estilo.
• define los metadatos.
• es el elemento del documento HTML que contiene estos elementos.

Cambio de tipos de elementos en línea y de bloque

Puede cambiar el tipo de un elemento de en línea a bloque, o viceversa, usando una de estas propiedades CSS:

• |_+_|
• |_+_|
• |_+_|

los CSS La propiedad de visualización le permite cambiar una propiedad en línea a bloque, o un bloque a en línea, o no mostrar en absoluto.

Cuándo cambiar la propiedad de visualización

En general, deje la propiedad de visualización en paz, pero hay algunos casos en los que puede ser útil intercambiar las propiedades de visualización en línea y en bloque.

Menús de lista horizontal:Las listas son elementos a nivel de bloque, pero si desea que su menú se muestre horizontalmente, debe convertir la lista en un elemento en línea para que cada elemento del menú no comience en una nueva línea. Encabezados en el texto:A veces, es posible que desee que un encabezado permanezca en el texto, pero mantenga los valores del encabezado HTML. Cambiar los valores h1 a h6 a en línea permitirá que el texto que viene después de su etiqueta de cierre continúe fluyendo junto a él en la misma línea, en lugar de comenzar en una nueva línea. Eliminando el elemento:Si desea eliminar un elemento por completo del documento flujo normal , puede establecer la visualización en |_+_|Una nota, tenga cuidado al utilizar la visualización: ninguna. Si bien ese estilo, de hecho, hará que un elemento sea invisible, nunca querrá usarlo para ocultar el texto que agregó por razones de SEO, pero que no desea mostrar a los visitantes. Esa es una forma segura de que su sitio sea penalizado por un enfoque de sombrero negro para SEO.

Errores comunes de formato de elementos en línea

Uno de los errores más comunes que comete un recién llegado al diseño web es tratar de establecer un ancho en un elemento en línea. Esto no funciona porque los anchos de los elementos en línea no están definidos por el cuadro contenedor.

Los elementos en línea ignoran varias propiedades:

• |_+_| y |_+_|
• |_+_| y |_+_|
• |_+_| y |_+_|

Microsoft Internet Explorer (reemplazado por Microsoft Edge) en el pasado aplicó incorrectamente algunas de estas propiedades incluso a cuadros en línea. Esto no cumple con los estándares. Es posible que este no sea el caso con las versiones más recientes del navegador web de Microsoft.

Si necesita definir el ancho o la altura que debe ocupar un elemento, querrá aplicarlo al elemento de nivel de bloque que contiene su texto en línea.