HTML: Estilo del Texto
Cualquier texto contiene partes clave que deseamos transmitir al lector. Estas pueden ser definiciones, sugerencias o ideas clave. Si el texto es muy extenso, estas partes pueden perderse o incluso no ser detectadas. ¿Cómo podemos ayudar al navegador y al usuario a encontrar rápidamente estas partes en la página? En la marcación HTML, se pueden usar negritas y cursivas con fines de resaltado.
Resaltado en Negritas
Para resaltar el texto en negritas, se utiliza uno de los dos pares de etiquetas: <b> o <strong>:
<p>Code Basics — <b>cursos</b> de programación.</p>
Code Basics — cursos de programación.
<p>HTML — <strong>lenguaje de marcado de hipertexto</strong></p>
HTML — lenguaje de marcado de hipertexto
Ambos ejemplos ilustran cómo agregar formato en negritas a un fragmento de texto. Pero, ¿por qué se utilizaron dos etiquetas diferentes para lograr resultados visualmente iguales? Esto se debe a la semántica, es decir, el significado. En este caso, el significado de la etiqueta es:
<b>— resaltar simplemente el texto. Puede usarse en cualquier lugar para resaltar visualmente el texto. Esta etiqueta no lleva consigo ningún significado semántico<strong>— resaltar lógicamente una parte importante del texto. Esta etiqueta tiene un significado semántico y resalta una parte importante. No debe aplicarse en todos los segmentos de manera consecutiva
En el pasado, los desarrolladores querían que estas etiquetas tuvieran una apariencia diferente y se comportaran de manera diferente en el navegador, pero la historia tomó un rumbo diferente. Actualmente, se considera excesivo el uso de <b> para el resaltado visual y se debe utilizar CSS para eso, mientras que <strong> se usa para resaltar partes importantes.
Resaltado en Cursiva
En su significado, el resaltado en cursiva es muy similar al resaltado en negritas, pero en lugar de enfatizar partes clave, se pone énfasis. Por ejemplo:
<p><i>Code Basics</i> — <em>cursos gratuitos</em> de programación</p>
Code Basics — cursos gratuitos de programación
En este ejemplo, se marcaron dos partes del texto:
- Se utilizó la etiqueta
<i>para marcar el nombre del portal "Code Basics". Esta etiqueta se usa para resaltar visualmente el texto en cursiva y no lleva consigo ningún significado semántico - Se utilizó la etiqueta
<em>para resaltar la frase "cursos gratuitos". Este énfasis lógico está en la gratuidad de los cursos, que se destaca en la oración. Hay muchos cursos, pero no todos son gratuitos, por lo que se enfatiza esta parte de la oración
Tarea
Agrega al editor la siguiente frase
donde la palabra "cursos" esté en negritas (formato físico) y el conjunto "programación" esté en cursiva (formato lógico). No olvides envolver la frase con una etiqueta de párrafo (<p>).
¿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
Las etiquetas para resaltar visualmente son más cortas que las de resaltado semántico. Esto puede ayudar a recordar cuándo usar
<i>y<b>versus<em>y<strong>.En la práctica, se prefiere usar estilos CSS en lugar de
<i>y<b>.
Definiciones
Semántica — Significado. En el contexto de HTML, la elección semántica de la marca para un fragmento de información.