Elementos a nivel de bloque y en línea y cómo usarlos

Elementos a nivel de bloque y en línea y cómo usarlos

Elementos a nivel de bloque y en línea y cómo usarlos

VALORACIÓN DEL ARTÍCULO:
5/5


El HTML está compuesto de varios elementos que actúan como bloques de construcción de páginas web. Cada uno de estos elementos se divide en dos categorías: elementos a nivel de bloque o un elemento en línea. Entender la diferencia entre estos dos tipos de elementos es un paso importante en la construcción de páginas web.

Índice de contenidos

Elementos de nivel de bloque

Entonces, ¿qué es un elemento de nivel de bloque? Un elemento a nivel de bloque es un elemento HTML que comienza una nueva línea en una página web y extiende el ancho completo del espacio horizontal disponible de su elemento padre. Crea grandes bloques de contenido como párrafos o divisiones de página. De hecho, la mayoría de los elementos HTML son elementos a nivel de bloque.

Los elementos de nivel de bloque se utilizan dentro del cuerpo del documento HTML. Pueden contener elementos en línea, así como otros elementos a nivel de bloque.

Elementos en línea

A diferencia de un elemento de nivel de bloque, un elemento en línea:

  • Puede comenzar dentro de una línea
  • No inicia una nueva línea
  • Su anchura sólo se extiende hasta donde lo definen sus etiquetas.

Un ejemplo de un elemento en línea es el , que hace que la fuente del contenido del texto contenido en negrita. Un elemento en línea generalmente sólo contiene otros elementos en línea, o no puede contener nada en absoluto, como la etiqueta
break.

También hay un tercer tipo de elemento en HTML: los que no se muestran en absoluto. Estos elementos proporcionan información sobre la página pero no se muestran cuando se muestran 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.

Conmutación de tipos de elementos en línea y de bloque

Puede cambiar el tipo de elemento de un elemento de inline a bloque, o viceversa, utilizando una de estas propiedades CSS:

  • visualizar: bloque; 
  • display:inline; 
  • display:none;

La propiedad de visualización CSS le permite cambiar una propiedad en línea para bloquear, o un bloque para mostrar, o para no mostrar nada.

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 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, necesita 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. Cambiando los valores de h1 a h6 a inline permitirá que el texto que viene después de su etiqueta de cierre continúe fluyendo junto a ella en la misma línea, en lugar de comenzar en una nueva línea.
  • Eliminar el elemento: Si desea eliminar completamente un elemento del flujo normal del documento, puede establecer la visualización en
    none

    One note, tenga cuidado al utilizar la visualización: none. Aunque ese estilo hará que un elemento sea invisible, nunca querrás usarlo para ocultar texto que has añadido por razones de SEO, pero que no quieres que se muestre a los visitantes. Esa es una manera segura de tener su sitio penalizado por un enfoque de sombrero negro a SEO.

Errores comunes en el formato de los 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 la caja del contenedor.

Los elementos en línea ignoran varias propiedades:

  • ancho

    y

    altura
  • max-width y
    max-height
  • min-width

    y

    min-height

Nota: Microsoft Internet Explorer (ahora llamado Microsoft Edge) ha aplicado incorrectamente en el pasado algunas de estas propiedades incluso a los cuadros en línea. Esto no es compatible con los estándares, y puede no ser el caso de las versiones más recientes del navegador web de Microsoft.

Si necesita definir la anchura o la altura que un elemento debe ocupar, deberá aplicarla al elemento de nivel de bloque que contiene el texto en línea.

TAMBIÉN TE INTERESA

nuevo mac studio

El nuevo Mac Studio es inalcanzable para cualquier PC de escritorio

Apple ha presentado su equipo de sobremesa más potente hasta la fecha: el nuevo Mac Studio, impulsado por los chips M4 Max y el nuevo M3 Ultra, una auténtica bestia orientada a profesionales de la inteligencia artificial, el diseño, la ingeniería o el desarrollo de software que buscan rendimiento extremo en un formato compacto. Vale,

camara seguridad doble lente de Beans View

Beans View tiene una cámara de seguridad de doble lente a un precio imbatible en Amazon

La seguridad inteligente del hogar da un nuevo paso con la Beans View 220 Dual 3K, la última incorporación al catálogo de la marca especializada en cámaras Wi-Fi. Este nuevo modelo, diseñado para ofrecer una vigilancia integral y precisa en espacios interiores, combina tecnología de doble lente, inteligencia artificial, visión nocturna a color y seguimiento

industria del videojuego

La industria del videojuego ya se mueve por un público muy distinto al de hace años

Durante años, el imaginario colectivo ha situado al jugador de videojuegos en el rincón oscuro de una habitación, joven, solitario, inmóvil frente a una pantalla. Esa imagen está cada vez más lejos de la realidad para la industria del videojuego. La V Radiografía del Gaming en España, elaborada por el ecommerce tecnológico PcComponentes, desmonta con

nuevos powerbanks Ewent

5 powerbanks de Ewent para cada necesidad: seguro que hay uno para ti

Las powerbanks o también llamadas baterías portátiles se han convertido en un aliado para muchas personas que hacen un uso intensivo de sus dispositivos electrónicos. Para los smartphones, estos componentes son ya una extensión de los mismos para muchas personas, sin embargo no solo existen este tipo de gadgets para teléfonos, sino que hay otros

contraseñas

¿Y si los métodos de seguridad en el futuro fueran sin contraseñas?

A pesar de los constantes avances en tecnología y ciberseguridad, los métodos de seguridad más tradicionales, es decir, las contraseñas, siguen siendo la opción predilecta por la mayoría para proteger su información o para acceder a las plataformas. No obstante, las contraseñas son actualmente uno de los grandes eslabones débiles en la protección de identidades