HTML: Elementos de bloque y en línea
Al familiarizarse con muchos elementos de HTML, se puede notar que su comportamiento no siempre es el mismo: algunos elementos (párrafos, listas, <pre>, <div>, encabezados, tablas) siempre comienzan en una nueva línea. Estos se llaman elementos de bloque. Son la base de la maquetación HTML, ya que afectan directamente cómo se colocan los elementos junto a ellos en la página.
Además de los elementos de bloque, existen los elementos de en línea. Estos incluyen enlaces (<a>), etiquetas de formato de texto (<b>, <strong>, <i>, <em>), imágenes y <span>. No afectan la ubicación de los elementos adyacentes y están destinados a agregar carga semántica. A diferencia de los elementos de bloque, los elementos en línea no ocupan toda la pantalla, sino solo el espacio que necesitan.
<p>El párrafo es un elemento de bloque.</p>
<p>Ocupa todo el espacio de ancho, por lo que cada párrafo comienza en una nueva línea.</p>
<span>Span es un elemento en línea.</span>
<span>Ocupa un ancho igual al ancho de su contenido, por lo que no hay salto de línea.</span>
El párrafo es un elemento de bloque.
Ocupa todo el espacio de ancho, por lo que cada párrafo comienza en una nueva línea.
Span es un elemento en línea. Ocupa un ancho igual al ancho de su contenido, por lo que no hay salto de línea.Tarea
Agrega dos etiquetas <span> con texto en su interior. Observa cómo se colocan.
¿El ejercicio no pasa la prueba, qué debo hacer? 😶
Si te quedaste atascado, es el momento perfecto para hacer una pregunta en las "Discusiones".
* Asegúrate de incluir la salida de las pruebas. Sin ella, es casi imposible entender qué está mal, incluso si muestras tu código. Los programadores tienen dificultades para ejecutar el código en su mente, pero casi siempre es posible entender a dónde mirar a partir del error que recibiste.
Mi código funciona en mi entorno, pero no aquí 🤨
Las pruebas están diseñadas de manera que verifican la solución de diferentes maneras y con diferentes datos. A menudo, una solución funciona con ciertos datos de entrada pero no con otros. Para entender este punto, revisa la pestaña "Pruebas" y presta atención a los mensajes de error, que suelen contener pistas.
Mi código es diferente a la solución del profesor 🤔
Esto es normal 🙆. En programación, una tarea puede tener muchas soluciones diferentes. Si tu código pasa la prueba, cumple con los requisitos de la tarea.
En raras ocasiones, la solución puede estar ajustada para pasar las pruebas, pero esto suele ser evidente.
Leí la lección, pero no entendí nada 🙄
Crear materiales de aprendizaje comprensibles para todos es bastante difícil. Hacemos nuestro mejor esfuerzo, pero siempre hay margen para mejorar. Si encuentras material que no entiendes, describe el problema en las "Discusiones". Es ideal si puedes formular los aspectos que no entiendes en forma de preguntas. Por lo general, necesitamos unos días para hacer mejoras.
Por cierto, tú también puedes contribuir a mejorar los cursos: en la parte inferior hay un enlace al código fuente de las lecciones, que se puede modificar directamente en el navegador.
Consejos útiles
Los elementos en línea se utilizan a menudo para la estilización. Por ejemplo, la etiqueta
<span>se utiliza para envolver una parte del texto. Luego, esa parte se estiliza con CSS.En la mayoría de los casos, los elementos en línea se pueden colocar dentro de elementos de bloque, pero no se puede colocar elementos de bloque dentro de elementos en línea. La excepción son los enlaces. Se pueden colocar elementos de bloque dentro de un enlace. Este uso está permitido en el estándar HTML5.