Saltar al contenido principal
Codigo Heroe
Tarea anterior
Marcado de texto avanzado17/19
A la lista de tareas
  1. 1. Conectar y quitar hojas de estilo
  2. 2. La etiqueta ul: listas no ordenadas
  3. 3. La etiqueta ol: listas ordenadas
  4. 4. Los atributos start y reversed
  5. 5. Listas anidadas
  6. 6. Las etiquetas dl, dt y dd: listas de descripciones
  7. 7. La etiqueta pre: texto preformateado
  8. 8. Entidades HTML
  9. 9. La etiqueta code: fragmentos de código
  10. 10. Combinar pre y code
  11. 11. La etiqueta q: citas dentro de una oración
  12. 12. La etiqueta blockquote: citas en bloque
  13. 13. La etiqueta br: saltos de línea
  14. 14. Las etiquetas sub y sup: subíndices y superíndices
  15. 15. La etiqueta time: fechas y horas
  16. 16. Las etiquetas em e i: énfasis y texto diferenciado
  17. 17. Las etiquetas strong y b: importancia y atención
  18. 18. Las etiquetas del e ins: marcar cambios
  19. 19. Las etiquetas div y span: contenedores para estilos
Siguiente tarea
  • Matriz de skills
  • Cursos
  • Registro
  • Iniciar sesión

Loading…
En unos segundos, estará listo.

  • Teoría
  • Teoría

Las etiquetas strong y b: importancia y atención

Todavía hay más formas de destacar palabras y frases. Ya aprendiste a usar la cursiva; ahora veamos la negrita.

Las etiquetas <strong> y <b>, de «bold», sirven para destacar palabras o frases. Normalmente ambas se muestran en negrita.

La etiqueta <strong> indica que el texto es importante. Se puede usar para advertencias o para información que debe leerse antes que el resto. Marcar un fragmento con <strong> no debería cambiar el sentido de la oración.

<strong>¡Atención!</strong> Este lugar es peligroso. <strong>Puedes caer al precipicio</strong> si te acercas al borde.

La etiqueta <b> llama la atención sobre un texto sin darle una importancia especial. Úsala cuando las otras etiquetas de marcado no encajen. Un ejemplo típico es destacar la frase inicial de un artículo.

Entras en una habitación pequeña. Tu <b>espada</b> brilla con más fuerza. Una <b>rata</b> corre junto a la pared.

Estas diferencias semánticas también pueden ser útiles para quienes usan tecnologías de asistencia, como las personas ciegas o con baja visión. Un lector de pantalla puede distinguir <strong> de <b>, aunque el cambio de entonación depende del programa y de su configuración.

Lo mismo ocurre con <em> e <i>: no todos los lectores de pantalla expresan el énfasis con la voz.

  • index.html
  • style.css
HTML
<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>Sitio de un principiante en desarrollo web</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <p>Blog</p> <nav> Inicio </nav> </header> <main> <article> <h1>Día diez. Un balance</h1> <time datetime="2018-11-28T12:00">12:00</time> <!-- Realiza el primer objetivo en el siguiente párrafo --> <p>Ya llevo una semana aprendiendo a crear páginas web.</p> <p>Creo que ya entendí que crear páginas web no es tan complicado. Solo hay que saber para qué sirve cada etiqueta y usarla correctamente.</p> <!-- Realiza el segundo objetivo en el siguiente párrafo --> <p>Ya solo me falta aprender CSS. ¡Después crearé páginas increíbles!</p> </article> <aside> Tu anuncio podría estar aquí </aside> </main> <footer> Pie de página </footer> </body> </html>
CSS
body { padding: 0 30px; font-size: 14px; line-height: 22px; font-family: "Georgia", serif; color: #222222; } h1 { font-size: 20px; line-height: normal; } nav { color: #888888; } aside { margin: 20px 0; color: #c4c4c4; } time { color: #6a2cce; }

El código ha cambiado, haz clic en "Actualizar" o activa la ejecución automática.

Ha ido a otra página

Haga clic dentro del mininavegador para poner el foco en esta ventana.

100%
ObjetivosRealizado
0
    1. Envuelve el texto del primer párrafo en <b>.
    2. Envuelve la palabra CSS del tercer párrafo en <strong>.
    1. Envuelve la palabra solo en la etiqueta que corresponda a su sentido.
    Codigo Heroe

    © 2023-2026, codigoheroe.com