HTML Academy · Lección

Párrafos, em, strong, b e i

Marque textos con énfasis semántico y etiquetas de negrita.

Párrafos, em, strong, b e i es una lección gratuita de HTML Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de HTML Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de HTML Academy incluye 4 lecciones en total.

El elemento de párrafo

El elemento  marca un bloque de texto como un párrafo:

<p>This is a paragraph of text. Browsers add margin above and below paragraphs automatically.</p>
<p>This is a second paragraph. It starts on a new line.</p>

Énfasis semántico: em

El elemento  marca el texto con énfasis prosódico: la palabra que cambia el significado de la oración:

<p>I <em>never</em> said she stole the money.</p>
<p>I never said <em>she</em> stole the money.</p>
<!-- Same words, different meaning depending on which is emphasized -->
<!-- Screen readers change inflection on em content -->

Importancia semántica: strong

El elemento  marca el texto como muy importante:

<p><strong>Warning:</strong> Do not enter this area without protective equipment.</p>
<p>The deadline is <strong>Friday at 5 PM</strong>.</p>
<!-- strong = this content is more important than surrounding text -->
<!-- Screen readers may emphasize strong content differently -->

em frente a i

 y  se muestran en cursiva de forma predeterminada, pero tienen significados diferentes:

 — énfasis semántico (úselo normalmente)
 — cursiva presentacional: términos técnicos, títulos y frases en otros idiomas

<p>The ship was called <i>HMS Beagle</i>.</p>
<p>The CSS property is <i>display</i>.</p>
<p><em>Please</em> be careful.</p>

strong frente a b

 y  se muestran en negrita de forma predeterminada, pero difieren semánticamente:

 — importancia semántica (úselo normalmente)
 — llama la atención sin implicar importancia: palabras clave y nombres de productos

<p>The product is called <b>ProSuite</b>.</p>
<p><b>Note:</b> All fields are required.</p>
<p>This step is <strong>critical</strong> — do not skip it.</p>

Anidamiento de em y strong

Puede anidar elementos de énfasis para combinarlos:

<p>This is <strong>very <em>important</em></strong>.</p>
<!-- strong (important) wraps em (stressed) -->
<!-- Result: bold italic text with both semantic meanings -->

Los párrafos no se pueden anidar

Un elemento  no puede contener otro elemento :

<!-- INVALID: nested paragraphs -->
<p>First paragraph <p>nested paragraph</p></p>

<!-- The browser auto-closes the first p before the second opens -->
<!-- Always use separate paragraph tags -->
<p>First paragraph.</p>
<p>Second paragraph.</p>

Elementos en línea frente a elementos de bloque en los párrafos

 es un elemento de bloque que solo puede contener elementos en línea:

<!-- Valid: inline content in p -->
<p>Text with <strong>bold</strong> and <a href="/">a link</a>.</p>

<!-- INVALID: block element inside p -->
<p>
  <div>A div inside p is invalid</div>
</p>

Accesibilidad del énfasis

Por qué el marcado semántico es importante para las tecnologías de asistencia:

Los lectores de pantalla anuncian  con una entonación diferente en algunas implementaciones
 puede leerse con énfasis adicional
La negrita o cursiva aplicada solo con CSS (por ejemplo, font-style: italic en un span) no tiene significado semántico para los lectores de pantalla

Errores comunes

Evite estos errores comunes de marcado de texto:

<!-- Bad: using br for paragraph spacing -->
First paragraph<br><br>Second paragraph

<!-- Good: use p elements -->
<p>First paragraph</p>
<p>Second paragraph</p>

<!-- Bad: bold for visual style only -->
<b>Heading Text</b>

<!-- Good: use h elements for headings -->
<h2>Heading Text</h2>

Cuándo usar cada elemento

Guía rápida para decidir:

Un fragmento de texto en prosa → 
Enfatizar una palabra que cambia el significado → 
Marcar información crítica → 
Escribir en cursiva un título o término técnico → 
Llamar la atención sobre una palabra clave sin implicar importancia →

Comprobación rápida

¿Qué elemento debería usar para marcar un texto como de importancia crítica?

Resumen: semántica del texto

Resumen del marcado de texto:

 — párrafos de prosa
 — énfasis prosódico que cambia el significado de la oración
 — importancia destacada
 — cursiva presentacional (títulos y términos)
 — llama la atención sin implicar importancia
Nunca use   para separar párrafos

Preguntas frecuentes

¿La lección «Párrafos, em, strong, b e i» es gratis?

Sí — el texto completo de «Párrafos, em, strong, b e i» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de HTML Academy, actualiza a CoddyKit PRO. El curso de HTML Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Párrafos, em, strong, b e i»?

Marque textos con énfasis semántico y etiquetas de negrita. Practicas HTML Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar HTML Academy?

No se requiere experiencia previa. HTML Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.

¿Cuánto tiempo toma la lección «Párrafos, em, strong, b e i»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de HTML Academy?

Sí. Cada lección de HTML Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

← Volver a HTML Academy