Temas tratados en esta entrada
- Valores de visualización en HTML (bloque)
- Elementos a nivel de bloque
- Características de los elementos de bloque
- Ejemplos de elementos de bloque (<p> y <div>)
- Lista de elementos de nivel de bloque en HTML
- Elementos en línea
- Ejemplos de elementos en línea (<span>)
- Uso del elemento <div> como contenedor en HTML
- Estilización de un <div> con CSS
- El elemento <span> (elemento de la APP)
Valores de visualización en HTML (bloque)
En HTML, cada elemento tiene un valor de visualización predeterminado que determina cómo se muestra en la página. Los valores más comunes son "bloque" y "en línea". Un elemento con valor de visualización "bloque" ocupa todo el ancho disponible, forzando un salto de línea antes y después. Este tipo de elementos se usa para agrupar contenido que debe mostrarse como una unidad independiente, como párrafos, encabezados y divs.
Ejemplo
Este es un ejemplo de un elemento con valor de visualización "bloque".
Elementos a nivel de bloque
Un elemento a nivel de bloque siempre comienza en una nueva línea, y los navegadores añaden automáticamente un poco de espacio (un margen) antes y después del elemento. Un elemento a nivel de bloque siempre ocupa el ancho completo disponible, extendiéndose hacia la izquierda y la derecha tan lejos como puede.
Dos elementos de bloque comúnmente usados son: <p> y
<div>.
El <p> elemento define un párrafo en un documento
HTML, mientras que el <div> elemento define una
división o una sección en un documento HTML.
Ejemplo
Este es otro elemento de bloque: un párrafo.
Características de los elementos de bloque
Los elementos de bloque tienen varias características clave que los distinguen de los elementos en línea.
- Inician en una nueva línea: Cada elemento de bloque comienza en una nueva línea, lo que significa que el contenido posterior se muestra debajo de él.
- Ocupación del ancho completo: Estos elementos siempre ocupan el ancho completo de su contenedor, extendiéndose a lo largo de toda la línea disponible.
- Espaciado automático: Los navegadores suelen añadir márgenes por defecto antes y después de los elementos de bloque, lo que proporciona un espaciado visual entre diferentes secciones del contenido.
- Se pueden contener otros elementos: Los elementos de bloque pueden contener otros elementos de bloque o en línea, lo que permite estructurar el contenido de forma jerárquica.
Ejemplo
Este es un párrafo dentro de un div.
Ejemplos de elementos de bloque (<p> y <div>)
Los elementos de bloque son fundamentales para estructurar contenido en
HTML. Dos de los elementos de bloque más comunes son el
<p> y el <div>.
El <p> (párrafo) se utiliza para agrupar texto en
párrafos, mientras que el <div> se utiliza para
dividir secciones de contenido. Ambos elementos comienzan en una nueva
línea y ocupan el ancho completo de su contenedor.
Ejemplo
Este es un ejemplo de un párrafo (<p>). Los párrafos se utilizan para agrupar texto en bloques.
Lista de elementos de nivel de bloque en HTML
Los elementos de nivel de bloque en HTML son aquellos que, por defecto, ocupan todo el ancho disponible de su contenedor y siempre comienzan en una nueva línea. Estos elementos son esenciales para estructurar el contenido de una página web de manera lógica y ordenada.
A continuación se presenta una lista de los elementos de nivel de bloque más comunes en HTML:
- <div>
- <p>
- <h1> a <h6>
- <ul>
- <ol>
- <li>
- <header>
- <footer>
- <section>
- <article>
- <aside>
- <blockquote>
- <form>
- <table>
- <figure>
- <figcaption>
- <canvas>
Ejemplo
Título de nivel 1
Este es un párrafo de ejemplo en un elemento de bloque.
- Elemento de lista 1
- Elemento de lista 2
Elementos en línea
Los elementos en línea son aquellos que no comienzan en una nueva línea. A diferencia de los elementos de bloque, ocupan solo el ancho necesario para su contenido y se sitúan uno al lado del otro en la misma línea. Esto permite que se puedan combinar de manera fluida con otros elementos de línea y de bloque.
Los elementos en línea son ideales para añadir elementos dentro de párrafos sin romper la estructura de bloque. Por ejemplo, se pueden usar para aplicar estilo a palabras individuales o agrupar partes del texto.
Algunos de los elementos en línea más comunes en HTML son:
- <span>
- <a>
- <strong>
- <em>
- <img>
- <br>
- <code>
- <small>
- <sub>
- <sup>
- <time>
- <q>
Ejemplo
Este es un ejemplo de un elemento en línea. Se puede notar que el texto en rojo no inicia en una nueva línea.
También, puedes usar un enlace para redirigir a otra página sin romper la línea.
Ejemplos de elementos en línea (<span>)
El elemento <span> es un contenedor en línea
utilizado para agrupar partes de texto o elementos HTML dentro de otro
elemento. A diferencia de los elementos de bloque, el
<span> no interrumpe el flujo del contenido y permite
aplicar estilos CSS a secciones específicas del texto sin afectar la
estructura general.
Es común utilizar <span> para resaltar texto, aplicar
colores o estilos, o simplemente para marcar texto para futuras
manipulaciones mediante JavaScript.
Ejemplo
Este es un texto con un span verde y en negrita que se muestra dentro de un párrafo.
El subrayado también
se puede aplicar usando <span>.
Uso del elemento <div> como contenedor en HTML
El elemento <div> es un contenedor de nivel de bloque
utilizado para agrupar otros elementos HTML. No tiene un significado
semántico en sí mismo, pero es muy útil para estructurar y organizar el
contenido de una página. Se puede utilizar para aplicar estilos, crear
secciones en un diseño, o para manipular grupos de elementos mediante
JavaScript.
La versatilidad del <div> permite a los
desarrolladores crear layouts complejos y responsivos utilizando CSS.
Por ejemplo, puedes crear columnas, filas o secciones en una página web
utilizando <div> para contener otros elementos.
Ejemplo
Título de una sección
Este es un párrafo que está contenido dentro de un elemento <div>.
Subtítulo dentro de un contenedor
Este es otro párrafo dentro de un contenedor <div> diferente.
Estilización de un <div> con CSS
La estilización de un elemento <div> con CSS permite
a los desarrolladores personalizar la apariencia visual del contenido en
la web. Puedes cambiar propiedades como el color de fondo, el tamaño del
texto, los bordes, los márgenes, el padding y muchos otros estilos para
mejorar la presentación del contenido.
Utilizando selectores CSS, puedes aplicar estilos a todos los elementos
<div> de una página o a un elemento específico
utilizando identificadores o clases. Esto facilita la creación de
diseños atractivos y consistentes en toda la web.
Ejemplo
Estilo del contenedor
Este <div> tiene un fondo azul claro, un borde
azul oscuro y un padding de 15px.
Estilo alternativo del contenedor
Este <div> tiene un fondo de color rosa claro y
un borde rojo punteado, con un padding de 20px.
El elemento <span> (elemento de la APP)
El elemento <span> es un contenedor en línea que no
tiene significado semántico por sí mismo, pero es extremadamente útil
para aplicar estilos o manipular partes específicas de un texto dentro
de otros elementos. Se utiliza comúnmente para cambiar el formato de una
parte del texto, como su color o estilo, sin interrumpir el flujo del
contenido.
A menudo, el <span> se utiliza en aplicaciones web
para permitir que los desarrolladores modifiquen dinámicamente el
contenido visual utilizando JavaScript y CSS. Su flexibilidad lo
convierte en una herramienta valiosa para la creación de interfaces de
usuario interactivas y atractivas.
Ejemplo
En un texto, puedes tener una palabra destacada, como
importante, que
se resalta usando el elemento <span> para aplicar
estilos específicos.
Otro ejemplo sería subrayar una parte del texto sin afectar el resto de la línea.
Resumen de la entrada
Valores de visualización en HTML (bloque): En HTML, los elementos tienen valores de visualización predeterminados que determinan cómo se comportan en la página. Los valores más comunes son "bloque" y "en línea". Los elementos de bloque ocupan el ancho completo disponible y comienzan en una nueva línea, mientras que los elementos en línea ocupan solo el espacio necesario.
Elementos a nivel de bloque: Los elementos a nivel de
bloque, como <p> y <div>, inician
en una nueva línea y se extienden a lo largo de todo el ancho
disponible. Esto los hace ideales para estructurar el contenido en
secciones y párrafos.
Características de los elementos de bloque: Los elementos de bloque son fácilmente reconocibles por su comportamiento en el flujo del documento. Siempre tienen un margen automáticamente añadido antes y después de ellos, y ocupan el 100% del ancho de su contenedor.
Ejemplos de elementos de bloque (<p> y <div>):
Los elementos más comunes de bloque son <p>, que
define un párrafo, y <div>, que define una sección o
división en el documento. Ambos son fundamentales para estructurar el
contenido de una página web.
Lista de elementos de nivel de bloque en HTML: HTML
proporciona una variedad de elementos a nivel de bloque, incluyendo
<article>, <header>,
<footer>, <section>, y más. Cada
uno de estos elementos sirve para organizar el contenido de maneras
específicas y semánticas.
Elementos en línea: A diferencia de los elementos de
bloque, los elementos en línea no comienzan en una nueva línea y solo
ocupan el espacio necesario. Ejemplos de elementos en línea incluyen
<span>, <a>, y
<img>.
Ejemplos de elementos en línea (<span>): El
elemento <span> es un contenedor en línea que permite
aplicar estilos a una porción del texto sin interrumpir el flujo. Es
útil para modificaciones específicas dentro de un párrafo o texto.
Uso del elemento <div> como contenedor en HTML:
El elemento <div> actúa como un contenedor de nivel
de bloque, ideal para agrupar otros elementos HTML. Aunque no tiene un
significado semántico por sí mismo, se utiliza para organizar y
estructurar el contenido.
Estilización de un <div> con CSS: La estilización
de un <div> con CSS permite personalizar la
apariencia del contenido. Puedes cambiar propiedades como el color de
fondo, los bordes, y el padding para mejorar la presentación visual.
0 Comentarios
Si desea contactar comigo, lo puede hacer atravez deste formulario gracias