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

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

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 " ).

<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.

<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.

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)

<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.

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.

<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.

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.

<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

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.

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.

Ú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.

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

<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.

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".

"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

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>

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.

<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"

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.