HTML: Elementos de bloque y en línea
El HTML está compuesto por diferentes elementos que crean bloques de páginas web. Estos elementos se dividen en elementos de "nivel de bloque" y elementos "en línea".
Es posible cambiar un elemento de bloque a en línea o viceversa utilizando la propiedad CSS display.
Elementos de nivel de bloque
Un elemento de nivel de bloque es un elemento HTML que comienza en una nueva línea y ocupa todo el ancho disponible del espacio horizontal de su elemento padre. Este tipo de elemento crea bloques de contenido (párrafos, divisiones de página). La mayoría de los elementos HTML son elementos de nivel de bloque.
Los elementos de nivel de bloque se utilizan dentro del cuerpo de un documento HTML y pueden contener elementos en línea u otros elementos de nivel de bloque.
Ejemplo de un elemento de nivel de bloque:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<div>This is a block-level element. It starts on a new line and takes up the full width.</div>
<p>This is another block-level element. It also starts on a new line.</p>
</body>
</html>| Block-level elements: |
|---|
<address> |
<canvas> |
<dt> |
<footer> |
<hr> |
<noscript> |
<pre> |
<ul> |
Elementos en línea
A diferencia de los elementos de nivel de bloque, los elementos en línea no comienzan en una nueva línea. Comienzan dentro de una línea y solo ocupan el ancho necesario. Los elementos en línea se incluyen como parte del texto principal.
Los elementos en línea comúnmente contienen otros elementos en línea, o pueden estar vacíos.
Ejemplo de un elemento en línea:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Heading </h1>
<p>This is Aleq's photo</p>
<img src="https://placehold.co/200x185?text=Photo" alt="Aleq" width="200" height="185"/>
</body>
</html>| Inline elements: |
|---|
<a> |
<bdo> |
<cite> |
<i> |
<label> |
<q> |
<small> |
<sup> |
<var> |
Práctica
¿Cuáles de las siguientes afirmaciones sobre los elementos de bloque y en línea de HTML son correctas?