¿Cuál es la diferencia entre <b> y <strong>, <i> y <em>?

780

Cuál es la diferencia entre <b> y <strong>, <i>y <em>en HTML / XHTML? ¿Cuándo deberías usar cada uno?

Philip Morton
fuente
Al menos por ahora, todo lo que vi en StackOverflow estaba "en negrita" usando el elemento <b>
OverCoder
MDN tiene descripción clara (con ejemplos) sobre cómo se deben utilizar las siguientes etiquetas: <em>, <strong>, <b>,<i>
totymedli

Respuestas:

1045

Tienen el mismo efecto en los motores de renderizado del navegador web normal , pero existe una diferencia fundamental entre ellos.

Como escribe el autor en una publicación de la lista de discusión :

Piense en tres situaciones diferentes:

  • navegadores web
  • gente ciega
  • teléfonos móviles

"Negrita" es un estilo: cuando dices "negrita" , la gente básicamente sabe que significa agregar más, digamos "tinta", alrededor de las letras hasta que se destaquen más entre el resto de las letras.

Eso, desafortunadamente, no significa nada para una persona ciega. En los teléfonos móviles y otras PDA, el texto ya está en negrita porque la resolución de la pantalla es muy pequeña. No puedes poner en negrita un negrita sin arruinar algo.

<b>es un estilo : sabemos cómo se supone que debe ser "negrita".

<strong>Sin embargo, es una indicación de cómo se debe entender algo . "Fuerte" podría (y a menudo significa) "negrita" en un navegador, pero también podría significar un tono más bajo para un programa de habla como Jaws (para personas ciegas) o estar representado por un subrayado (ya que no puede poner negrita un negrita) en un Palm Pilot.

HTML nunca tuvo que ver con estilos. Haga algunas búsquedas de "Tim Berners-Lee" y "la web semántica". <strong>es semántico: describe el texto que rodea (por ejemplo, "este texto debe ser más fuerte que el resto del texto que ha mostrado" ) en lugar de describir cómo debe mostrarse el texto que rodea (por ejemplo, "este texto debería ser negrita " ).

splattne
fuente
160
Tenga en cuenta que <b> y <i> no han quedado en desuso en HTML5. Su nuevo uso es representar semánticamente los estilos (o presentación prevista), mientras que <strong> y <em> representan la estructura . Debes leer stellify.net/…
Natan Yellin
12
Gran respuesta, pero diría que "no puedes poner en negrita un negrita" está mal porque estás asumiendo que es un concepto booleano, cuando font-weight: adopta un enfoque más variable. Ahora que existen pantallas de alta fidelidad, hay niveles de audacia.
TravisO
44
@TravisO Creo que estaba hablando de las restricciones técnicas específicas del Palm Pilot.
Brian Ortiz
44
No creo que muchas letras tengan un significado intrínseco, <b> puede tener exactamente el mismo significado semántico que <strong> si así lo decidimos. ¿Qué decidieron los creadores de lectores, los tratan de manera diferente o exactamente de la misma manera?
Aprillion
21
@deathApril ¡Pero lo hacen! ¡Tienen significado! HTML no está definido por lo que crees o lo que decides.
Sr. Lister el
231

<b>y <i>son explícitos: especifican negrita y cursiva respectivamente.

<strong>y <em>son semánticos: especifican que el texto adjunto debe ser "fuerte" o "enfatizado" de alguna manera, generalmente en negrita y cursiva, pero permite que el estilo real se controle a través de CSS. Por lo tanto, estos son preferidos en las páginas web modernas.

Tony Andrews
fuente
15
Buena explicación. Por otro lado, con HTML 5, <i> y <b> también son semánticos en lugar de explícitos. Suspiro.
OregonGhost
1
¿Son ellos? Estoy detrás de los tiempos ...!
Tony Andrews, el
55
Sí, la mejor explicación que he leído es stellify.net/…
Natan Yellin
25
HTML5 tiene nuevos significados semánticos para by i. Son etiquetas que debe usar cuando necesita llamar la atención sobre una parte de la prosa, o para compensar la prosa normal, sin transmitir énfasis ( em), importancia (para strong) o relevancia (para mark). bes para palabras clave, nombres de productos, palabras procesables, etc., mientras que ies para términos técnicos, pensamientos, frases, etc. Honestamente, en mi opinión, debe haber una mayor distinción entre ambos.
chharvey
2
Lástima que el texto (y el título) de stellify.net sea completamente ilegible en la mayoría de los monitores y configuraciones de oficina baratos ^^ (la falta de contraste es simplemente impresionante)
Oskar Duveborn
23

<strong>y <em>agregue significado semántico adicional a su documento. Sucede que también le dan un estilo negrita y cursiva a su texto.

Por supuesto, podría anular su estilo con CSS.

<b>y, <i>por otro lado, solo aplica el estilo de fuente y ya no debe usarse. (¡Porque se supone que debes formatear con CSS, y si el texto fuera realmente importante, entonces probablemente lo harías "fuerte" o "enfatizado" de todos modos!)

Espero que tenga sentido.

James
fuente
2
si dice que ya no se deben usar <b> y <i>, ¿qué pasa con el navegador antiguo que no admite <em> y <strong>?
Nirman
44
@Nirman Si alguien usa un navegador antiguo para navegar por la web, ya tiene muchos problemas, desde un punto de vista visual y de seguridad. Por eso, creo que los programadores y diseñadores ya no deberían admitir navegadores antiguos.
yeyo
44
Nota: si decimos navegadores antiguos, nos referimos a Netscape 3 e IE2 aquí (IE3 y NS4 ya son compatibles con <strong> y <em>). Si realmente necesita seguir apoyando a esos navegadores del siglo XX, se encuentra en grandes problemas.
Sr. Lister
<b> and <i> on the other hand only apply font styling and should no longer be used.Los documentos oficiales de HTML5 dicen lo contrario. Cita necesaria?
1
¡Esta respuesta se publicó ~ 6 años antes de que se lanzara HTML5!
James
8

Aquí hay un resumen de las definiciones junto con el uso sugerido:

<b>... un espacio de texto al que se llama la atención con fines utilitarios sin transmitir ninguna importancia adicional y sin implicación de una voz o estado de ánimo alternativo, como palabras clave en un resumen del documento, nombres de productos en una revisión, palabras procesables en software interactivo basado en texto, o un artículo lede .

<strong> ... ahora representa importancia más que un fuerte énfasis.

<i>... un lapso de texto en una voz o estado de ánimo alternativo, o compensado de otra manera con la prosa normal de una manera que indica una calidad de texto diferente, como una designación taxonómica , un término técnico , una frase idiomática de otro idioma , un pensamiento , o el nombre de un barco en textos occidentales.

<em> ... indica énfasis.

(Todas estas son citas directas de fuentes del W3C, con mi énfasis agregado. Ver: https://rawgithub.com/whatwg/html-differences/master/Overview.html#changed-elements y http://www.w3.org /TR/html401/struct/text.html#h-9.2.1 para los originales)

Rick Westera
fuente
7

<b>y <i>ambos están relacionados con el estilo, mientras que <em>y <strong>son semánticos. En HTML 4, los primeros se clasifican como elementos de estilo de fuente y los segundos como elementos de frase .

Como indicó correctamente, <i>y a <em>menudo se consideran similares, porque los navegadores a menudo muestran ambos en cursiva. Pero de acuerdo con las especificaciones, <em> indica énfasis e <strong> indica un énfasis más fuerte , lo cual es bastante claro, pero a menudo se malinterpreta. Por otro lado, la distinción entre cuándo usar <i>o <b>es realmente una cuestión de estilo.

Kariem
fuente
1
strongno indica "mayor énfasis" sino más bien " importancia ". Para un énfasis más fuerte , anide un emelemento dentro de otro emelemento.
chharvey
@ TestSubject528491 si sigue el enlace para los elementos de frase que he usado anteriormente, verá que acabo de citar la especificación. No creo que esto entre en conflicto con la semántica de importancia, ni que una anidación de dos ems enfatice dentro de un énfasis, lo que entiendo que sugerías.
Kariem
3
Creo que la especificación HTML5 solo hace más una distinción entre los dos. En mi interpretación, "énfasis" significa estrés en el tono de voz. Por ejemplo: "¿Quieres esos jeans?" versus "¿Quieres COMPRAR esos jeans?" tienen diferentes significados debido a la colocación de énfasis. OTOH, "Importancia" no tiene un efecto basado en la ubicación. Por ejemplo, " ADVERTENCIA : ¡cuidado con el perro!" tendría el mismo significado si se eliminara la importancia.
chharvey
<b> and <i> are both related to styleerm. Los documentos oficiales de HTML5 dicen lo contrario. Cita necesaria?
@vaxquis vinculado anteriormente para HTML 4: <b>y <i>son elementos estilo de fuente, mientras que <em>y <strong>son elementos de frase. ¿Alguna sugerencia para mejorar esto? Para completar, y también porque su comentario no incluyó una cita, en HTML 5.2, todos estos elementos se describen en el contenido de la
frase
7

Si bien <strong>y <em>, por supuesto, son semánticamente más correctos, parece haber razones legítimas para usar las etiquetas <b>y <i>para el contenido escrito por el cliente.

En dicho contenido, las palabras o frases pueden estar en negrita o en cursiva y, por lo general, no depende de nosotros analizar el razonamiento semántico para tal negrita o cursiva.

Además, dicho contenido puede referirse a palabras y frases en negrita y en cursiva para transmitir un significado específico.

Un ejemplo sería una pregunta de examen de inglés que indica a un estudiante que reemplace la palabra en negrita.

mwiik
fuente
"más semánticamente correcto"? ¿Qué quieres decir con eso? ¿Has leído las especificaciones HTML5 en las etiquetas b / i?
4

<em>y <strong>consumen más ancho de banda que <i>y <b>.

También requieren más tipeo (si no se genera automáticamente).

También abarrotan la pantalla del editor con más texto. Me parece recordar que a los programadores les gustan los archivos fuente más pequeños si son iguales. (Y seamos realistas, son lo mismo. Sí, hay diferencias "técnicas" (<i> tos </i>, ejem, discúlpeme), pero eso es principalmente falso, para empezar).

Con cualquiera de las etiquetas anteriores, puede usar hojas de estilo para personalizar su apariencia como desee si necesita que aparezcan de manera diferente a sus representaciones predeterminadas.

Thomas Eding
fuente
1
Lol, esta debería ser la respuesta aceptada (HHOS). La suya es la respuesta más realista y correcta en toda esta página, incluso si es una broma. Todo este asunto de la "semántica" es un juego tonto para empezar. Todos sabemos que cualquiera que mira a esta pregunta está aquí trabajando con los principales proveedores de navegadores en mente, Chrome, Firefox, Internet Explorer, etc. Sólo queremos saber cuál es la verdadera , reales diferencias podría ser, no lo que un comité en los debates sobre Su abundancia de tiempo libre.
GDP2
2

Como otros han dicho, <b> y <i> son explícitos (es decir, "ponga este texto en negrita"), mientras que <strong> y <em> son semánticos (es decir, "este texto debe enfatizarse").

En el contexto de un navegador web moderno, es difícil ver la diferencia (ambos parecen producir el mismo resultado, ¿verdad?), Pero piense en lectores de pantalla para personas con discapacidad visual. Si un lector de pantalla se encuentra con una etiqueta <i>, no sabría qué hacer. Pero si se encuentra con una etiqueta <em>, sabe que todo lo que esté dentro debe enfatizarse al oyente. Y ahí obtienes la diferencia práctica.

JamShady
fuente
<b> and <i> are explicit (i.e. "make this text bold"),erm. Los documentos oficiales de HTML5 dicen lo contrario. Cita necesaria?
2

<i>, <b>, <em>Y <strong>las etiquetas son tradicionalmente representacional. Pero se les ha dado un nuevo significado semántico en HTML5 .

<i>y <b>se usó para el estilo de fuente en HTML4. <i>fue usado para cursiva y <b>negrita. En HTML5, la <i>etiqueta tiene un nuevo significado semántico de ' voz o estado de ánimo alternativo ' y la <b>etiqueta tiene el significado de desplazamiento estilístico .

Ejemplos de usos de la <i>etiqueta son: designación taxonómica, término técnico, frase idiomática de otro idioma, transliteración, un pensamiento, nombres de barcos en textos occidentales. Como -

<p><i>I hope this works</i>, he thought.</p>

Ejemplos de usos de la <b>etiqueta son palabras clave en un extracto de documento, nombres de productos en una revisión, palabras procesables en un software interactivo impulsado por texto, líder de artículo.

El siguiente párrafo de ejemplo está estilísticamente compensado de los párrafos que lo siguen.

<p><b class="lead">The event takes place this upcoming Saturday, and over 3,000 people have already registered.</b></p>

<em>y <strong>tenía el significado de énfasis y énfasis en HTML4. Pero en HTML5 <em>significa énfasis enfatizado y <strong>significa gran importancia .

En el siguiente ejemplo, debería haber un cambio lingüístico al leer la palabra antes ...

<p>Make sure to sign up <em>before</em> the day of the event, September 16, 2016</p>

En el mismo ejemplo podemos usar la <strong>etiqueta de la siguiente manera ...

<p>Make sure to sign up <em>before</em> the day of the event, <strong>September 16, 2016</strong></p>

dar importancia a la fecha del evento.

MDN Ref:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/b

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/i

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/em

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong

adnan2nd
fuente
1

Como los otros han dicho, la diferencia es que los <b>y <i>tipo de letra hardcode estilos, mientras que <strong>y <em>dictar significado semántico, con el estilo de fuente (o hablar entonación navegador, o lo que usted quiera) que se determinará en el momento de prestar el texto (o hablado).

Puede pensar en esto como una diferencia entre un estilo de fuente "físico" y un estilo "lógico", si lo desea. En algún momento posterior, es posible que desee cambiar la forma <strong>y el <em>texto se muestran, por ejemplo, por las propiedades que alteran en una hoja de estilo para añadir cambios de color y tamaño, o incluso utilizar diferentes tipos de fuentes en su totalidad. Si ha utilizado marcado "lógico" en lugar de marcado "físico" codificado, simplemente puede cambiar las propiedades de visualización en un lugar cada una en su hoja de estilo, y luego todas las páginas que hacen referencia a esa hoja de estilo se cambian automáticamente , sin alguna vez tener que editarlos.

Bastante hábil, ¿eh?

Esta es también la razón detrás de la definición de subestilos (referenciados usando la style=propiedad en etiquetas de texto) para párrafos, celdas de tabla, texto de encabezado, subtítulos, etc., y el uso de <div>etiquetas. Puede definir la representación física de sus estilos lógicos en la hoja de estilos, y los cambios se reflejan automáticamente en las páginas web que hacen referencia a esa hoja de estilos. ¿Quieres una representación diferente para el código fuente? Redefina la fuente, el tamaño, el peso, el espaciado, etc. para su estilo de "código".

Si usa XHTML, incluso puede definir sus propias etiquetas semánticas, y su hoja de estilo haría las conversiones a estilos de fuente físicos y diseños por usted.


fuente
1
Puede utilizar hojas de estilo para cambiar completamente la forma en que <b>y <i>se prestan también. Bastante hábil, ¿eh?
Thomas Eding
by ino has codificado nada. Al igual que cualquier etiqueta HMTL, tienen un estilo CSS predeterminado y, al igual que con cualquier etiqueta, puede cambiarla para que se vea de la manera que desee.
Mecki
1

Utilizo <strong> y <b>, en realidad, exactamente por las razones mencionadas en este hilo de respuestas. Hay momentos en que algunos textos en negrita simplemente se ven mejor, pero no es, necesariamente, semánticamente más importante que el resto de la oración. Aquí hay un ejemplo de una página en la que estoy trabajando ahora:

"Recupera <strong> todos </strong> libros sobre <b> lacrosse </b>".

En esa oración, la palabra "todos" es muy importante, y "lacrosse" no lo es tanto. Simplemente lo quería en negrita porque representa un término de búsqueda, por lo que quería cierta separación visual. Si está viendo la página con un lector de pantalla, realmente no creo que deba salirse del camino para enfatizar la palabra "lacrosse".

Tendería a imaginar que la mayoría de los desarrolladores web usan uno de los otros, pero ambos están bien: <b> definitivamente no está en desuso, como algunas personas han afirmado. Para mí, es solo una delgada línea entre el atractivo visual y el significado.

Justin Blum
fuente
1

Úselos solo si usar clases de estilo CSS es, por alguna razón, poco convincente o imposible (como los sistemas de blog, permita que solo se usen algunas etiquetas en publicaciones y, finalmente, estilos incrustados). Otra razón es el soporte para navegadores muy antiguos (¿algunos dispositivos móviles?) O motores de búsqueda primitivos (que dan puntos <b>o <strong>etiquetas, en lugar de analizar estilos CSS).

Si puede definir estilos CSS, úselos.

Marinero danubiano
fuente
1

Para texto en negrita con <b> etiqueta

Para texto importante con <strong> etiqueta

Para texto en cursiva con <i> etiqueta

Para texto enfatizado usando <em> etiqueta

Touhidur Rahaman
fuente
0

<b>y <i>debe evitarse porque describen el estilo del texto. En cambio, use <strong>y<em> porque eso describe la semántica (el significado) del texto.

Como con todas las cosas en HTML, debe pensar no en cómo quiere que se vea , sino en lo que realmente quiere decir . Claro, puede ser negrita y cursiva para usted, pero no para un lector de pantalla.

nickf
fuente
2
Completamente incorrecto, <b> y <i> no deben evitarse. Tienen significados semánticos en HTML5.
user2867288
0

b o i significa que desea que el texto se represente en negrita o cursiva. strong o em significa que desea que el texto se represente de una manera que el usuario entienda como "importante". El valor predeterminado es hacer que Strong sea negrita y em como cursiva, pero algunas otras culturas podrían usar una asignación diferente.

Al igual que las cadenas en un programa, b y i sería "duro codificado", mientras que una fuerte y em sería "localizada".

Stephan Leclercq
fuente
0

"Tienen el mismo efecto. Sin embargo, XHTML, una versión más limpia y nueva de HTML, recomienda el uso de la <strong>etiqueta. Fuerte es mejor porque es más fácil de leer, su significado es más claro. Además, <strong>transmite un significado: muestra el texto fuertemente, mientras que <b>(para negrita) transmite un método: poner en negrita el texto. Con fuerte, su código todavía tiene sentido si usa hojas de estilo CSS para cambiar cuáles son los métodos para fortalecer el texto.

Lo mismo ocurre con la diferencia entre <i>y <em>".

Google dixit:

http://wiki.answers.com/Q/What_is_the_difference_between_HTML_tags_b_and_strong

Antonio Louro
fuente
0

Elementos de formato HTML:

HTML también define elementos especiales para definir texto con un significado especial. HTML utiliza elementos como <b> y <i> para formatear la salida, como texto en negrita o cursiva.

HTML en negrita y formato fuerte:

El elemento HTML <b> define texto en negrita, sin ninguna importancia adicional.

<b>This text is bold</b>

El elemento HTML <strong> define texto fuerte, con una importancia semántica "fuerte" añadida.

<strong>This text is strong</strong>

HTML en cursiva y formato enfatizado:

El elemento HTML <i> define el texto en cursiva, sin ninguna importancia adicional.

<i>This text is italic</i>

El elemento HTML <em> define texto enfatizado, con mayor importancia semántica.

<em>This text is emphasized</em>
Muhammad Awais
fuente
The HTML <b> element defines bold text, without any extra importance. The HTML <i> element defines italic text, without any extra importance.erm. Los documentos oficiales de HTML5 dicen lo contrario. Cita necesaria?
0

En general, debe tratar de evitar <b>y <i>. Se introdujeron para diseñar la página (cambiando la forma en que se ve) en las primeras versiones de HMTL antes de la creación de CSS, como la fontetiqueta eliminada mientras tanto , y se mantuvieron principalmente para la compatibilidad con versiones anteriores y porque algunos foros permiten HTML en línea y eso es fácil forma de cambiar el aspecto del texto (como BBCode usando [i], puede usar, <i>etc.).

Desde la creación de CSS, el diseño ya no es nada que deba hacerse en HTML, por eso se ha creado CSS en primer lugar (HTML == Estructura, CSS == Diseño). Estas etiquetas también pueden desaparecer en el futuro, después de todo, solo puede usar CSS y spanetiquetas para que el texto aparezca en negrita / cursiva si necesita una variación de fuente "sin sentido". HTML 5 todavía los permite, pero declara que marcar texto de esa manera no tiene significado .

<em>y <strong>por otro lado solo dice que algo está "enfatizado" o "fuertemente enfatizado", lo deja completamente abierto al navegador sobre cómo representarlo. La mayoría de los navegadores se mostrarán emen cursiva y strongnegrita como sugiere el estándar por defecto, pero no están obligados a hacerlo (pueden usar diferentes colores, tamaños de fuente, fuentes, lo que sea). Puede usar CSS para cambiar el comportamiento de la forma que desee. Puede poner emnegrita si lo desea y strongnegrita y rojo, por ejemplo.

Mecki
fuente
77
<b> y <i> NO están en desuso en HTML 4, y aún son totalmente compatibles incluso en el próximo HTML 5. <em> y <strong> no son reemplazos para ellos. Ver también w3.org/TR/html401/index/elements.html
thomasrutter
1
@thomasrutter Todavía están en HMTL5 pero con un significado diferente y con una explicación muy detallada de cómo usarlos o, mejor dicho, cómo no usarlos. Tenga en cuenta que estas etiquetas no tienen significado (negrita y cursiva no son significados , son instrucciones de diseño y HMTL se trata de significado, CSS es sobre diseño) - HTML se trata de describir qué es un texto y no sobre cómo representarlo (eso fue separado después de HMTL3 por una buena razón).
Mecki
-2

<strong>y <em>son abstractos (que es lo que las personas quieren decir cuando dicen que es semántico). <b>y <i>son formas específicas de hacer algo "fuerte" o "enfatizado"

Analogía:

Ambos <strong>es <b>y <em>es<i>

como

"vehículo" es "jeep"

ahnbizcad
fuente
1
No veo por qué esta respuesta fue rechazada. Muchas otras respuestas con contenidos similares han sido bien recibidas.
aditya_m
-4

Usamos la <strong>etiqueta para el texto que tiene alta prioridad para fines de SEO como el nombre del producto, el nombre de la empresa, etc., mientras que <b>simple lo pone en negrita.

Del mismo modo, usamos <em>texto que tiene alta prioridad para SEO, mientras que <i>para que el texto sea simplemente en cursiva.

ritakriti
fuente
44
Algunas etiquetas HTML realmente tienen una aplicación SEO. Meta descripción, meta robot o enlace canónico por nombrar algunos. Hasta donde sabemos, strong / em no es uno de estos, ni en teoría ni en la práctica.
Sheepy