Alternativa a la etiqueta HTML Bold

82

Bien, sé que en HTML puede usar la <b>etiqueta, pero ¿no hay un "weight=bold"atributo que pueda usar en la <p>etiqueta?

¿O está en CSS o Javascript?

html  css 
— Kzqai
fuente
5
Estoy comenzando una recompensa por esta pregunta para promover su visibilidad porque considero que la respuesta principal es prácticamente desastrosa a pesar de ser técnicamente correcta. Especialmente en una pregunta que tiene resultados muy altos para una búsqueda en Google de "etiqueta en negrita en html5".
— Kzqai
7
Voto esta recompensa ridícula. @mipadi tiene la respuesta correcta. Si un usuario no puede darse cuenta de que tal vez quiera diseñar algo diferente p, ese es su propio problema. Tal vez hagan una pregunta SO diferente que aclare eso.
— Ryley

Respuestas:

99

También considere la <strong>etiqueta. Es mucho mejor para los lectores de pantalla y, por lo tanto, mejor para la accesibilidad. Los motores de búsqueda también utilizan <strong>etiquetas para determinar el contenido importante similar a cómo se utilizan las etiquetas de cabecera <h1>, <h2>etc (aunque <b>también tendrá un significado similar a los motores de búsqueda). Si desea enfatizar la importancia del texto, utilice <strong>. Si no desea enfatizar la importancia, use la <b>etiqueta o use el font-weight:bold;estilo en el elemento o en el CSS.

Aunque, si está poniendo en negrita todo el párrafo, probablemente sea mejor usar la opción CSS. Esto reducirá el efecto en los lectores de pantalla y probablemente no tenga sentido enfatizar un párrafo completo. Pero, por otro lado, he visto negrita usada para enfatizar un párrafo completo antes por una buena razón. En cuyo caso, font-weight:bold;es lo que desea usar, probablemente en una clase / estilo.

Al final, el <strong>, <b>o font-weight:bold;será todo el trabajo y lograr algo similar visualmente (probablemente exactamente el mismo), pero tienen significados ligeramente diferentes. Además, asegúrese de que si lo que estás negrita es una cabecera, utilice las etiquetas de cabecera: <h1>, <h2>, etc.

— Darryl Hein
fuente
37
<b> NO está obsoleto en ningún estándar HTML o XHTML actual, ni tampoco en el próximo HTML 5. <b> y <strong> tienen significados distintos; <b> significa "texto en negrita". <strong> significa "énfasis más fuerte", pero no dicta un estilo de texto; los navegadores están predeterminados en negrita.
— thomasrutter
2
El uso generalizado de <b> ha disminuido, pero el elemento real no ha quedado obsoleto de acuerdo con las especificaciones del W3C.
— alex
4
La <b> está efectivamente obsoleta en HTML5 ... y se reemplaza por otra etiqueta <b> que tiene un significado algo diferente. Es una elección extraña, pero eso es básicamente lo que han hecho. En cualquier caso, no debería usarse para aplicar estilo al texto en negrita.
— Chuck
@Chuck: ¿que significa el nuevo elemento b?
— alex
1
Tenga en cuenta que los lectores de pantalla modernos (como las últimas versiones de JAWS y Window Eyes) no transmiten el contenido de los elementos <em> o <strong> de forma diferente en la configuración normal. Un usuario debe pasar al modo de revisión para que la salida de voz se vea afectada. Buena lectura: los lectores de pantalla carecen de énfasis e i, b, em y elementos fuertes en HTML5 .
— Jon Gibbins
79

Estás pensando en la propiedad CSS font-weight:

p { font-weight: bold; }
— mipadi
fuente
6
Bueno, con suerte no copia exactamente lo que tienes ... estropearía algunas cosas :)
— Darryl Hein
6
Es un ejemplo sintácticamente correcto. El OP tendrá que decidir cómo quiere que se use.
— mipadi
6
La "sintaxis correcta" no lo es todo, desearía que esta respuesta fuera mejor, ya que es la respuesta principal para una pregunta con mucha visibilidad en la búsqueda de la solución para la etiqueta b. No está promoviendo un buen resultado, tanto porque aboga por el estilo de un elemento que tiene otros usos mucho más importantes (párrafos en el texto en general), y porque aboga por usar un estilo CSS en lugar de alternativas más limpias como <strong>, <h1>, <em> y <marca>. Es técnicamente viable, pero prácticamente invita al desastre.
— Kzqai
4
@Tchalvak: Lo estoy usando <p>como ejemplo, porque el OP lo usó como ejemplo. font-weightfunciona en cualquier elemento.
— mipadi
7
@mipadi Lo entiendo, pero personalmente si un extraño me pide "un cuchillo muy afilado para afeitarse la cara", voy a ignorar la terminología específica de la solicitud y le daré una navaja de seguridad.
— Kzqai
23

Si el significado del texto es semánticamente fuerte , usa el strongelemento. Si no es así, use una clase con nombre semántico (una que muestre claramente el significado del elemento, no mezcle presentación y datos llamándolo, boldetc.) y haga referencia a él en su CSS.

HTML

<span class="important-message">I'm important!</span>

CSS

.important-message {
   font-weight: bold;
}

Algunas personas todavía usan el belemento como un gancho de presentación, pero no ha sido desaprobado , aunque la mayoría de la gente prefiere el strongelemento hoy en día. Solo asegúrese de que se utilicen correctamente.

— alex
fuente
4
<b> NO está obsoleto. Todavía es compatible con HTML 4.01, XHTML 1, XHTML 1.1 e incluso el próximo HTML 5. Su desaprobación es un mito. Ya sea debería quedar obsoleto es otro asunto. No lo es. Véase también w3.org/TR/html401/index/elements.html
— thomasrutter
Pequeño tecnicismo: un nombre de clase no se puede llamar 'semántico' porque no es un vocabulario controlado: no existe un estándar en ninguna parte que defina lo que significa "mensaje importante" en las aplicaciones. Nombrar sus clases por su función sigue siendo una buena idea porque promueve la legibilidad y las mejores prácticas.
— thomasrutter
@thomasrutter ... Por eso dije pensar . Un nombre no tiene que ser semántico solo para las computadoras; la gente también lee html.
— alex
10

La etiqueta <b> está viva y bien. <b> no está obsoleto, pero su uso se ha aclarado y limitado. <b> no tiene un significado semántico, ni transmite un énfasis vocal como el que podría decir un lector de pantalla. <b>, sin embargo, transmite empais impresa , al igual que la etiqueta <i>. Ambos tienen un lugar específico en la tipografía, pero no en la comunicación hablada, mes frères .

Para citar de http://www.whatwg.org/

El elemento b representa un espacio de texto que se debe compensar estilísticamente de la prosa normal sin transmitir ninguna importancia adicional, como palabras clave en un resumen de documento, nombres de productos en una revisión u otros tramos de texto cuya presentación tipográfica típica está en negrita.
— usuario336882
fuente
8

Puedes hacer texto o palabras Boldusando<b>Text</b> etiquetas.

También puedes usar <strong>Text</strong> etiqueta

Etiquetas de la cabeza <h1>, <h2>,<h3> , ... son etiquetas por defecto en negrita y hacer que su texto en negrita de forma predeterminada a menos que cambie su estilo con CSS

Las etiquetas anteriores estaban disponibles en HTML, pero si desea cambiar el estilo CSS, puede usar

font-weight:bold
— Nasser Hadjloo
fuente
7

Está en CSS que tienes que establecer font-weight: bold;como estilo

— serioys sam
fuente
7

Puede codificar como a continuación ...

<html>
 <head>
 <style>
 p.boldstats{
 font-weight: bold
  }
  </style>
 </head>

  <body>
  <p class="boldstats"> The bold finder </p>
  </body>
</html>
— madcoderJ
fuente
6

Puede utilizar el atributo font-weight en su

Por ejemplo:

<p>This is my paragraph</p>

Puede tener su CSS en línea como se muestra a continuación:

<p style="font-weight:bold;">This is my paragraph</p>

O téngalo en su hoja de estilo CSS externa como se muestra a continuación:

p{
  font-weight:bold;
}
— Oluwasayo Babalola
fuente
5

Todo es histórico y data de una época en la que los dinosaurios caminaban por la tierra y CSS no existía.

Más en serio, olvídate de la <b/>etiqueta y úsala font-weight:bolden una regla CSS :)

— Julian Aubourg
fuente
4

<b> es un último recurso

Puede usar <b>, pero solo como último recurso . Hay una variedad de elementos que funcionan como buenas alternativas <b>, aquí están en orden de mayor utilidad:

Alternativas más útiles

  • Para texto importante: <strong>
  • Para texto enfatizado con énfasis: <em>
  • Para títulos, no solo de página, sino de párrafos y otros de todo tipo: <h1> through <h6>

El práctico estuche de borde para el uso de <b>

El único caso en el que recomendaría el uso <b>es si

  1. ha aplicado <strong>un estilo diferente que no desea que se muestre para el texto que tiene en mente,

  2. no desea énfasis en cursiva o un título, y

  3. está a punto de usar un intervalo en línea o un intervalo con una clase solo para texto en negrita . (Por ejemplo: <span class='bold'>)

Entonces es razonable usarlo <b>en su lugar, porque en ese caso probablemente será más limpio / más corto y más semántico que un intervalo no semántico, y la tercedad / legibilidad es una buena razón para hacer esa elección, ya que b se ha redefinido para su uso como un elemento denotando énfasis impreso .

— Kzqai
fuente
4

tu también podrías hacer <p style="font-weight:bold;"> bold text here </p>

— John Boker
fuente
1
Los estilos en línea están a punto de quedar obsoletos en html 5: P
— bloqueo
¿Estás seguro? Pensé que solo las etiquetas de estilo en línea serían obsoletas, es decir. (big, s, strike, tt, u)
— John Boker
2
Incluso si no están desaprobados, casi siempre son una mala idea. También puede volver a usar etiquetas <font>.
— tgecho
Todavía se sugieren estilos en línea para archivos CSS pequeños. Consulte Yslow y PageSpeed ​​de Google. Eso es extraño pero suena razonable (¿menos llamadas?)
— Yannis Dran
@Kzqai: Estoy 100% de acuerdo. Para mi caso específico, tengo que deshacerme de cualquier estilo en línea debido a la gran carga de una solicitud ajax en un div. Con solo eliminar cualquier estilo en línea, me ahorra algunos milisegundos en el tiempo de carga.
— Adrian P.
1

¿Quizás quieras usar clases CSS?

p.bold { font-weight:bold; }

De esa forma, podrá seguir utilizándolo <p>con normalidad.

<p>This is normal text</p>
<p class="bold">This is bold text</p>

Te dio:

Este es un texto normal.

Este es texto en negrita.

— daalbert
fuente
1

Un hilo muy antiguo, lo sé. - pero para completar:

yo suelo <span class="bold">my text</span>    

mientras subo los cuatro estilos de fuente: normal; negrita; cursiva y negrita en cursiva en mi sitio web a través de css.

Creo que la salida resultante es mejor que simplemente modificar una fuente y está más cerca de la intención del diseñador de cómo debería verse la fuente en negrita.

Lo mismo se aplica para cursiva y negrita, por supuesto, lo que me da una flexibilidad adicional.

— Jim Butterworth
fuente
1

Lo que use en lugar del belemento depende de la semántica del contenido de ese elemento.

  • Los elementos by stronghan coexistido desde hace mucho tiempo. En HTML 4.01 , que ha sido reemplazado por HTML5, strongestaba destinado a ser utilizado para "énfasis fuerte", es decir, un énfasis más fuerte que el emelemento (que solo indica énfasis). En HTML 5.2 , strong"representa una gran importancia, seriedad o urgencia para su contenido"; los aspectos de "seriedad" y "urgencia" son nuevos en la especificación en comparación con HTML 4.01. Entonces, si solía brepresentar contenido que era importante, serio o urgente, se recomienda que lo use strongen su lugar. Si lo desea, puede diferenciar entre estas diferentes semánticas agregando atributos de clase significativos, por ejemplo, <strong class="urgent">...</strong>y<strong class="warning">...</strong>y use selectores CSS apropiados para diseñar estos tipos de "énfasis" de manera diferente, por ejemplo, usando diferentes colores y tamaños de fuente (por ejemplo, en su archivo CSS:. strong.warning { color: red; background-color: transparent; border: 2px solid red; }).
    Otra alternativa bes el emelemento , que en HTML 5.2 "representa el énfasis de su contenido". Tenga en cuenta que este elemento generalmente se representa en cursiva (y, por lo tanto, a menudo se recomienda como reemplazo del ielemento).
    Resistiría la tentación de seguir el consejo de algunas de las otras respuestas para escribir algo como por qué algo estaba en negrita.<strong class="bold">...</strong> . En primer lugar, el atributo de clase no significa nada en contextos no visuales (escuchar un libro ePub, texto a voz en general, lectores de pantalla, Braille); en segundo lugar,
  • Si utiliza bpara párrafos o encabezados completos (a diferencia de tramos de texto más cortos, que es el caso de uso en la viñeta anterior), lo reemplazaría con classatributos apropiados o, si corresponde, roles WAI-ARIA como alertpara un región "con información importante y, por lo general, urgente". Como se mencionó anteriormente, debe usar classvalores de atributo "semánticos" , de modo que las personas que mantienen el código (incluido su yo futuro) puedan averiguar por qué algo estaba en negrita.
  • No todos los usos de bmay representan algo semántico. Por ejemplo, cuando convierte documentos impresos a HTML, el texto puede aparecer en negrita por motivos que no tienen nada que ver con el énfasis o la importancia, sino como una guía visual. Por ejemplo, los encabezados en los diccionarios no son más "serios", "urgentes" que el resto del contenido, por lo que puede mantener el belemento y, opcionalmente, agregar un atributo de clase significativo, por ejemplo, <b class="headword">o reemplazar la etiqueta con <span class="headword">según el argumento que btiene sin significado en contextos no visuales.

En su archivo CSS (en lugar de usar styleatributos, como recomiendan algunas de las otras respuestas), tiene varias opciones para aplicar estilo al texto "en negrita" o importante:

  • especificar diferentes colores (primer plano y / o fondo);
  • especificar diferentes tipos de letra;
  • especificar bordes (ver ejemplo arriba);
  • usando diferentes pesos de fuente usando la font-weightpropiedad , que permite más valores que solo normaly bold, es decir normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,
  • etc.

Tenga en cuenta que la compatibilidad con valores numéricos de peso de fuente no siempre ha sido excelente.

— Tsundoku
fuente
1 

    #bold{
      font-weight: bold;
    }
    #custom{
      font-weight: 200;
    }
<body>
  <p id="bold"> here is a bold text using css </p>
  <p id="custom"> here is a custom bold text using css </p>
</body>
Expandir fragmento

Espero que haya funcionado

— zakizakibzr
fuente
0

En una nota al margen, el siguiente código también lo hará en negrita.

<strong> text here </strong>
— Binoj Antony
fuente
1
... en la mayoría de los navegadores ... pero solo como un efecto secundario de describir el texto con mayor énfasis.
— Quentin
0

Puede utilizar lo siguiente:

<p id="p1">Some Text here </p>
#p1{
   font-weight: bold;
}

O

<Strong><p>Some text here </p></strong>

O

Puede usar lo <h1> tagque es algo similar a negrita

— KFC
fuente
1
Dado que p es probablemente el nivel de bloque, querrá que strong vaya dentro de p.
— Kzqai
0

Hoy en día, la gente tiende a utilizar creadores de sitios web (CMS como Wordpress) en lugar de codificar su propio blog desde cero. Incluso los desarrolladores web profesionales lo hacen porque es más rápido.

Sería bueno si pudiera mencionar las ventajas y las cosas a tener en cuenta al codificar su propio blog en la vida real, por ejemplo:

  • Más flexibilidad (personalización)
  • Pagar un nombre de dominio
  • Paga y elige un alojamiento web
  • Seguridad y mantenimiento
  • Copyright y licencia de las plantillas y gráficos de algunos creadores de sitios web. Su sitio web podría estar bloqueado para un servidor web en particular si utilizó el creador de sitios web de su servidor. Por lo tanto, no puede trasladarse a otro servidor web, porque si lo hace, ya no podría usar esa plantilla.
  • Experimente problemas al solicitar el soporte técnico del creador de sitios web cuando el sitio web no funciona.
  • Algunas plantillas no son compatibles con los motores de búsqueda y esto afecta el ranking de su sitio web (SEO)

De todos modos, puede usar css / css3 o JavaScript para hacer una página web interactiva. Incluso puede cargar todo tipo de código en un servidor que formatee el tema del blog predeterminado.

— madcoderJ
fuente
-2

La respuesta de @Darryl Hein es correcta a pesar de un punto: <b>no se recomienda en absoluto desde XHTML, porque no es semántico .

<strong> significa texto resaltado semánticamente

font-weight: bold significa texto resaltado visualmente

<strong>se puede ajustar con CSS para que no sea en negrita, aunque es un valor predeterminado convencional. Puede estar en rojo, en cursiva o subrayado (aunque todas estas posibilidades no son realmente fáciles de usar). Úselo para frases / palabras en el texto, no debido al diseño visual, sino relacionado con su significado

font-weight: bold debe usarse para partes en negrita relacionadas con el diseño, como encabezados, subencabezados, celdas de encabezado de tabla, etc.

— Guardia
fuente
No creo que eso sea cierto en la definición revisada de <b> en html5.
— Kzqai
Al mismo tiempo, usted escribió que <b>es el último recurso, y yo escribí que b no se recomienda. ¿Dónde está la contradicción?
— Guardia
3
Lo siento, debería haber sido más específico en el sentido de que quise decir que tiene un significado semántico retconned en html 5: ...previous versions of HTML defined the b element only in presentational terms, the element has now been given the specific semantic purpose of representing text “offset from its surrounding content without conveying any extra emphasis or importance, and [conventionally boldened]”.en html5, según dev.w3.org/html5/markup/b.html#b . Esa es la razón por la que considero <b>que es: válido / un último recurso / no era semántico / se redefine para ser semántico, etc. Sólo una sutil diferencia.
— Kzqai
-3

Usa la <strong>etiqueta porque es más semántica. <b>se ha depreciado, por lo que es mejor no usarlo. También se da el texto en negrita más Search Engine Optimization (SEO) de peso por lo que siempre es mejor usar un verdadero <strong>lugar de hacer una <p>o <span>negrita el uso de CSS.

— Matthew James Taylor
fuente
4
No uses cosas porque son "más semánticas", úsalas porque tienen la semántica que se aplica a lo que estás escribiendo. No sabemos cuál es la semántica del texto que tiene el OP.
— Quentin
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.