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.
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 consecutivaEn 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.
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:
<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<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ónAgrega 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>
).
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.
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.
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.
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.
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>
.
Semántica — Significado. En el contexto de HTML, la elección semántica de la marca para un fragmento de información.