Elementos en bloque y en línea de HTML
Este artículo explica los elementos en bloque y en línea de HTML.
Esto explica las diferencias entre los elementos de nivel de bloque y los elementos en línea, así como los principales elementos de nivel de bloque y elementos en línea.
YouTube Video
Elementos de nivel de bloque y elementos en línea
HTML tiene dos categorías principales de elementos que determinan cómo se muestran en la pantalla: 'elementos de nivel de bloque' y 'elementos en línea'. Estos elementos desempeñan un papel importante en el diseño de la página y afectan directamente cómo se posicionan. Aquí explicaremos en detalle las características y el uso de cada elemento.
¿Qué es un elemento de nivel de bloque?
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Block-Level Elements Example</title>
7</head>
8<body>
9 <div>
10 <h1>This is a Block-Level Heading</h1>
11 <p>
12 This is a paragraph.
13 Block-level elements start on a new line and
14 take up the full width of their container.
15 </p>
16 </div>
17 <section>
18 <h2>Another Block-Level Section</h2>
19 <p>This is another paragraph inside a section element.</p>
20 </section>
21 <section>
22 <h2>Unordered List And Ordered List</h2>
23 <ul>
24 <li>List Item A</li>
25 <li>List Item B</li>
26 <li>List Item C</li>
27 </ul>
28 <ol>
29 <li>List Item 1</li>
30 <li>List Item 2</li>
31 <li>List Item 3</li>
32 </ol>
33 </section>
34</body>
35</html>Los elementos de nivel de bloque suelen ocupar todo el ancho de la página y aparecen en una línea separada de otros elementos. Estos elementos pueden contener otros elementos de nivel de bloque o en línea dentro de ellos y definen la estructura general de un documento.
Características:
- Los elementos comienzan en una nueva línea y se expanden para ocupar el mayor ancho posible (generalmente el ancho completo del elemento padre).
- Están separados de otros elementos de nivel de bloque verticalmente, con márgenes aplicados entre ellos.
- Pueden contener otros elementos en bloque o en línea dentro de ellos.
Aquí se utilizan los siguientes elementos de nivel de bloque:.
- La etiqueta
<div>se usa comúnmente para construir diseños. - La etiqueta
<p>se utiliza para definir un párrafo. <h1>a<h6>son elementos utilizados para definir encabezados.<h1>es el encabezado más grande y<h6>es el más pequeño.- La etiqueta
<ul>crea una lista desordenada. - La etiqueta
<ol>crea una lista ordenada. - La etiqueta
<section>define una sección dentro de un documento.
¿Qué es un elemento en línea?
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Inline Elements Example</title>
7</head>
8<body>
9 <p>
10 This is a paragraph with
11 <a href="#">an inline link</a> and
12 <strong>some bold text</strong>.
13 </p>
14 <p>
15 You can also include <em>italicized text</em>,
16 an <img src="images/image.jpg" alt="Sample image" width="100">,
17 and a <span style="color: red;">styled span element</span>
18 within inline elements.
19 </p>
20</body>
21</html>Los elementos en línea se colocan en la misma línea que otros elementos y generalmente solo ocupan el ancho de su contenido. Estos elementos son tratados como parte del texto y, a diferencia de los elementos a nivel de bloque, no ocupan toda la línea.
Características:
- Los elementos aparecen en la misma línea y se colocan al lado de otros elementos en línea.
- El ancho está determinado por el contenido del elemento (texto o imágenes).
- Pueden incluirse dentro de elementos de nivel de bloque, pero no viceversa.
Aquí se utilizan los siguientes elementos en línea:.
- La etiqueta
<span>se utiliza para enfatizar una parte del texto con un estilo específico. - La etiqueta
<a>define un hipervínculo. - La etiqueta
<img>es un elemento utilizado para incrustar imágenes. <strong>resalta texto importante (normalmente se muestra en negrita).<em>indica texto enfatizado (normalmente se muestra en cursiva).
Diferencias entre elementos de nivel de bloque y elementos en línea
- Método de visualización: Los elementos de nivel de bloque se muestran en una nueva línea y ocupan todo el ancho de la página, mientras que los elementos en línea se muestran en la misma línea que otros elementos y su ancho está determinado por su contenido.
- Manejo de elementos internos: Los elementos de nivel de bloque pueden contener otros elementos de nivel de bloque así como elementos en línea, pero los elementos en línea no pueden contener elementos de nivel de bloque.
- Función en el diseño: Los elementos de nivel de bloque se utilizan principalmente para crear la estructura del diseño de una página, mientras que los elementos en línea definen pequeños elementos como texto y enlaces.
Puntos clave para diferenciar
Creación de diseños: Utilice elementos de nivel de bloque como <div>, <section>, <article> para definir secciones grandes y bloques de contenido.
Decoración de texto y enlaces: Utilice elementos en línea como <span>, <a>, <strong>, <em> para decorar partes del texto o agregar enlaces.
Mezcla de elementos de nivel de bloque y en línea
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Mixed Block-Level and Inline Elements</title>
7</head>
8<body>
9 <header>
10 <h1>Main Heading with Mixed Content</h1>
11 <p>
12 This is a paragraph that contains an
13 <a href="#">inline link</a> and
14 <strong>bold text</strong>. You can also have
15 <em>italicized words</em> here.
16 </p>
17 </header>
18 <main>
19 <section>
20 <h2>Subheading with Additional Inline Elements</h2>
21 <p>
22 Here is a section that includes inline elements such as
23 <span style="color: blue;">colored text</span> and an
24 <img src="images/image.jpg" alt="Example image" width="50">.
25 This text demonstrates how inline elements work within block-level elements.
26 </p>
27 </section>
28 <section>
29 <h2>Lists with Mixed Content</h2>
30 <p>
31 This paragraph precedes a list and has
32 <a href="#">a link</a> and <strong>bold</strong> text.
33 </p>
34 <ul>
35 <li>List item with <em>italic</em> text.</li>
36 <li>List item containing <span style="color: green;">styled span</span>.</li>
37 <li>List item with <img src="images/example.jpg" alt="Icon" width="20"> icon.</li>
38 </ul>
39 </section>
40 </main>
41</body>
42</html>- Se utilizan elementos de bloque como
<main>,<header>, y<section>, y suelen renderizarse en una nueva línea, ocupando todo el ancho de su elemento padre. - Se utilizan elementos en línea como
<a>,<strong>,<span>, y<img>, y se colocan dentro de la línea sin ocupar todo el ancho dentro de los elementos de bloque.
Incluir elementos en línea dentro de elementos de nivel de bloque es un patrón común. Por ejemplo, es común incluir enlaces (<a>) o énfasis (<strong>) dentro de un párrafo (<p>). Sin embargo, dado que no se pueden incluir elementos de nivel de bloque dentro de elementos en línea, es importante usarlos de manera adecuada.
Resumen
Los elementos de nivel de bloque y los elementos en línea son dos tipos básicos de elementos HTML, cada uno con su propio rol. Los elementos de nivel de bloque forman la base del diseño de la página, mientras que los elementos en línea se utilizan para decorar y manipular contenido detallado dentro de ellos. Comprender y utilizar adecuadamente estos dos tipos de elementos permite una codificación HTML eficiente.
Puedes seguir el artículo anterior utilizando Visual Studio Code en nuestro canal de YouTube. Por favor, también revisa nuestro canal de YouTube.