Alternative zum HTML Bold-Tag

82

Okay, ich weiß, dass Sie das <b>Tag in HTML verwenden können , aber gibt es kein "weight=bold"Attribut, das ich im <p>Tag verwenden kann?

Oder ist das in CSS oder Javascript?

html css Kzqai
quelle
5
Ich beginne mit einer Prämie für diese Frage, um ihre Sichtbarkeit zu fördern, da ich die beste Antwort trotz ihrer technischen Korrektheit als praktisch katastrophal betrachte. Besonders bei einer Frage, deren Ergebnisse für eine Google-Suche nach "Fettdruck in HTML5" sehr hoch sind.
Kzqai
7
Ich halte dieses Kopfgeld für lächerlich. @mipadi hat die richtige Antwort. Wenn ein Benutzer nicht herausfinden kann, dass er möglicherweise etwas anderes stylen möchte p, ist dies sein eigenes Problem. Vielleicht stellen sie eine andere SO-Frage, die das klärt.
Ryley

Antworten:

99

Beachten Sie auch das <strong>Tag. Es ist viel besser für Bildschirmleser und daher besser für die Zugänglichkeit. Suchmaschinen auch verwenden , um <strong>Tags zu den wichtigen Inhalten bestimmen ähnlich, wie sie Header - Tags verwenden <h1>, <h2>usw. (obwohl <b>auch ähnliche Bedeutung für Suchmaschinen). Wenn Sie die Wichtigkeit von Text hervorheben möchten, verwenden Sie <strong>. Wenn Sie die Wichtigkeit nicht hervorheben möchten, verwenden Sie das <b>Tag oder den font-weight:bold;Stil für das Element oder das CSS.

Wenn Sie den gesamten Absatz fett formatieren, ist es wahrscheinlich besser, die CSS-Option zu verwenden. Dies verringert die Auswirkungen auf Bildschirmleser und es ist wahrscheinlich nicht sinnvoll, einen ganzen Absatz hervorzuheben. Auf der anderen Seite habe ich aus gutem Grund gesehen, wie fett ein ganzer Absatz hervorgehoben wurde. In diesem Fall font-weight:bold;möchten Sie wahrscheinlich eine Klasse / einen Stil verwenden.

Am Ende <strong>, <b>oder font-weight:bold;werden alle Arbeit und erreichen etwas ähnliches visuell (wahrscheinlich genau das gleiche), aber sie haben leicht unterschiedliche Bedeutungen. Stellen Sie außerdem sicher , dass , wenn , was Sie bolding ein Header ist, verwenden Sie die Header - Tags: <h1>, <h2>usw.

Darryl Hein
quelle
36
<b> ist in keinem aktuellen HTML- oder XHTML-Standard veraltet und wird auch im kommenden HTML 5 nicht veraltet. <b> und <strong> haben unterschiedliche Bedeutungen. <b> bedeutet "fett gedruckter Text". <strong> bedeutet "stärkere Betonung", diktiert jedoch keinen Textstil. Browser sind standardmäßig fett gedruckt.
Thomasrutter
2
Die weit verbreitete Verwendung von <b> ist zurückgegangen, aber das tatsächliche Element wurde gemäß den W3C-Spezifikationen nicht veraltet.
Alex
4
Das <b> ist in HTML5 effektiv veraltet ... und wird durch ein anderes <b> -Tag ersetzt, das eine etwas andere Bedeutung hat. Es ist eine seltsame Wahl, aber genau das haben sie getan. In jedem Fall sollte es nicht verwendet werden, um Text fett zu formatieren.
Chuck
@Chuck: Was bedeutet das neue b-Element?
Alex
1
Beachten Sie, dass moderne Bildschirmleseprogramme (wie die neuesten Versionen von JAWS und Window Eyes) den Inhalt von <em> oder <strong> Elementen in normalen Einstellungen nicht anders wiedergeben. Ein Benutzer muss in den Korrekturlesemodus wechseln, damit die Sprachausgabe beeinträchtigt wird. Gutes Lesen: Screenreadern fehlt die Betonung und i, b, em und starke Elemente in HTML5 .
Jon Gibbins
79

Sie denken an die CSS-Eigenschaft font-weight:

p { font-weight: bold; }
Mipadi
quelle
6
Nun, hoffentlich kopiert er nicht, was Sie genau haben ... würde ein paar Dinge durcheinander bringen :)
Darryl Hein
6
Es ist ein syntaktisch korrektes Beispiel. Das OP muss entscheiden, wie es verwendet werden soll.
Mipadi
6
"Richtige Syntax" ist nicht alles, ich wünschte, diese Antwort wäre besser, da sie die beste Antwort auf eine Frage mit viel Sichtbarkeit bei der Suche nach der Lösung für das b-Tag ist. Es fördert kein gutes Ergebnis, sowohl weil es die Gestaltung eines Elements befürwortet, das andere, viel wichtigere Verwendungszwecke hat (Absätze im Text im Allgemeinen), als auch weil es die Verwendung eines CSS-Stils gegenüber saubereren Alternativen wie <strong>, <h1>, befürwortet. <em> und <mark>. Es ist technisch praktikabel, aber praktisch führt es zu einer Katastrophe.
Kzqai
4
@Tchalvak: Ich verwende <p>als Beispiel, weil das OP es als Beispiel verwendet hat. font-weightfunktioniert jedoch mit jedem Element.
Mipadi
7
@mipadi Ich verstehe das, aber wenn mich ein Fremder persönlich nach "einem wirklich scharfen Messer zum Rasieren seines Gesichts" fragt, werde ich die spezifische Terminologie der Anfrage ignorieren und ihm ein Rasiermesser geben.
Kzqai
23

Wenn die Bedeutung des Textes semantisch stark ist , verwenden Sie das strongElement. Wenn nicht, verwenden Sie eine semantische benannte Klasse (eine, die die Bedeutung des Elements deutlich zeigt. Mischen Sie Präsentation und Daten nicht, indem Sie es aufrufenbold usw.) und verweisen Sie in Ihrem CSS darauf.

HTML

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

CSS

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

Einige Leute benutzen das bElement immer noch als Präsentationshaken, aber es wurde nicht veraltet , obwohl die meisten Leute das strongElement heutzutage bevorzugen . Stellen Sie einfach sicher, dass sie richtig verwendet werden.

Alex
quelle
4
<b> ist NICHT veraltet. Es wird weiterhin in HTML 4.01, XHTML 1, XHTML 1.1 und sogar im kommenden HTML 5 unterstützt. Seine Ablehnung ist ein Mythos. Ob es veraltet sein sollte , ist eine andere Frage. Ist es nicht. Siehe auch w3.org/TR/html401/index/elements.html
thomasrutter
Kleine Technik: Ein Klassenname kann nicht als "semantisch" bezeichnet werden, da es sich nicht um ein kontrolliertes Vokabular handelt. Es gibt nirgendwo einen Standard, der definiert, was "wichtige Nachricht" für Apps bedeutet. Es ist immer noch eine gute Idee, Ihre Klassen nach ihrer Funktion zu benennen, da dies die Lesbarkeit und bewährte Verfahren fördert.
Thomasrutter
@ Thomasrutter ... Deshalb sagte ich denken . Ein Name muss nicht nur für Computer semantisch sein. Leute lesen auch HTML.
Alex
10

Das <b> -Tag ist lebendig und gut. <b> ist nicht veraltet, aber seine Verwendung wurde geklärt und eingeschränkt. <b> hat keine semantische Bedeutung und vermittelt auch keine vokale Betonung, wie sie von einem Bildschirmleser gesprochen werden könnte. <b> vermittelt jedoch gedruckte Empathie , ebenso wie das <i> -Tag. Beide haben einen bestimmten Platz in der Typografie, aber nicht in der gesprochenen Kommunikation, mes frères .

Um von http://www.whatwg.org/ zu zitieren

Das b-Element stellt eine Textspanne dar, die stilistisch von der normalen Prosa versetzt werden soll, ohne dass eine zusätzliche Bedeutung vermittelt wird, z. B. Schlüsselwörter in einer Dokumentzusammenfassung, Produktnamen in einer Rezension oder andere Textbereiche, deren typische typografische Darstellung zweigeteilt ist.
user336882
quelle
8

Sie können Text oder Wörter Boldmit dem <b>Text</b>Tag erstellen.

Sie können auch <strong>Text</strong>Tag verwenden

Head - Tags <h1>, <h2>, <h3>, ... sind Standard bolded Tags und machen Sie Ihren Text Bold standardmäßig , wenn Sie ihren Stil mit CSS ändern

Die oben genannten Tags waren in HTML verfügbar, aber wenn Sie den Stil mit ändern CSSmöchten, können Sie verwenden

font-weight:bold
Nasser Hadjloo
quelle
7

Es ist in CSS, das Sie font-weight: bold;als Stil festlegen müssen

serioys sam
quelle
7

Sie können wie unten codieren ..

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

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

Sie können das Attribut font-weight auf Ihrem Computer verwenden

Beispielsweise:

<p>This is my paragraph</p>

Sie können Ihr CSS entweder wie folgt inline schalten lassen:

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

Oder haben Sie es wie folgt in Ihrem externen CSS-Stylesheet:

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

Es ist alles historisch und stammt aus einer Zeit, in der Dinosaurier um die Erde gingen und CSS nicht existierte.

Im Ernst, vergessen Sie das <b/>Tag und verwenden Sie es font-weight:boldin einer CSS-Regel :)

Julian Aubourg
quelle
4

<b> ist ein letzter Ausweg

Sie können verwenden <b>, aber nur als letztes Mittel . Es gibt eine Vielzahl von Elementen, die als gute Alternativen dazu dienen <b>. Hier sind sie in der Reihenfolge ihres Nutzens aufgeführt:

Weitere nützliche Alternativen

  • Für wichtigen Text: <strong>
  • Für stressbetonten Text: <em>
  • Für Überschriften, nicht nur Seitenüberschriften, sondern auch Absatzüberschriften und andere aller Art: <h1> through <h6>

Der praktische Randfall für die Verwendung von <b>

Der einzige Fall, in dem ich die Verwendung befürworten würde, <b>ist wenn

  1. Sie haben <strong>auf eine andere Weise gestylt , die Sie nicht für den Text anzeigen möchten, den Sie sich vorgestellt haben.

  2. Sie möchten keine kursive Betonung oder Überschrift, und

  3. Sie sind dabei, eine Inline-Spanne oder eine Spanne mit einer Klasse nur zum Fettdrucken von Text zu verwenden . (Zum Beispiel: <span class='bold'>)

Dann ist es sinnvoll, <b>stattdessen zu verwenden , da es in diesem Fall wahrscheinlich sauberer / kürzer und semantischer als eine unsemantische Spanne ist und die Genauigkeit / Lesbarkeit ein guter Grund ist, diese Wahl zu treffen, da b für die Verwendung als Element neu definiert wurde bezeichnet gedruckte Betonung .

Kzqai
quelle
4

du könntest es auch tun <p style="font-weight:bold;"> bold text here </p>

John Boker
quelle
1
Inline-Stile werden in HTML 5: P
Lock
Bist du sicher? Ich dachte, nur Inline-Style-Tags sollten veraltet sein, dh. (groß, s, Streik, tt, u)
John Boker
2
Auch wenn sie nicht veraltet sind, sind sie fast immer eine schlechte Idee. Sie können auch <font> -Tags verwenden.
Tgecho
Für kleine CSS-Dateien werden weiterhin Inline-Stile empfohlen. Überprüfen Sie Yslow und Googles PageSpeed. Das ist komisch, klingt aber vernünftig (weniger Anrufe?)
Yannis Dran
@ Kzqai: Ich stimme zu 100% zu. Für meinen speziellen Fall muss ich jegliches Inline-Styling entfernen, da eine Ajax-Anfrage auf einem Div stark geladen ist. Durch das Entfernen von Inline-Stylings erspare ich einige Millisekunden beim Laden.
Adrian P.
1

Vielleicht möchten Sie CSS-Klassen verwenden?

p.bold { font-weight:bold; }

Auf diese Weise können Sie weiterhin <p>wie gewohnt verwenden.

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

Gibt Ihnen:

Dies ist normaler Text.

Dies ist fett gedruckter Text.

daalbert
quelle
1

Ein sehr alter Thread, ich weiß. - aber der Vollständigkeit halber:

ich benutze <span class="bold">my text</span>    

während ich die vier Schriftstile hochlade: normal; Fett gedruckt; kursiv und fett kursiv über CSS in meine Website.

Ich bin der Meinung, dass die resultierende Ausgabe besser ist als das einfache Ändern einer Schriftart und näher an der Absicht des Designers liegt, wie die boldened Schriftart aussehen soll.

Gleiches gilt natürlich auch für Kursiv und Fettdruck, was mir zusätzliche Flexibilität gibt.

Jim Butterworth
quelle
1

Was Sie anstelle des bElements verwenden, hängt von der Semantik des Inhalts dieses Elements ab.

  • Die Elemente bund strongexistieren schon lange nebeneinander. In HTML 4.01 , die von HTML5 ersetzt wurde, um weitere Alternative ist derstrong wurde, sollte es für "starke Betonung" verwendet werden, dh für eine stärkere Betonung als das emElement (das nur die Betonung anzeigt). In HTML 5.2 , strong„stellt starke Bedeutung, Schwere oder Dringlichkeit , für deren“; Die Aspekte "Ernsthaftigkeit" und "Dringlichkeit" sind in der Spezifikation im Vergleich zu HTML 4.01 neu. Wenn Sie also bInhalte dargestellt haben, die wichtig, ernst oder dringend waren, wird empfohlen, geeignete CSS-Selektoren zu verwenden, um diese Arten der "Hervorhebung" unterschiedlich zu gestalten, z. B. mit unterschiedlichen Farben und Schriftgrößen (z. B. in Ihrer CSS-Datei: . strong stattdessen zu verwenden. Wenn Sie möchten, können Sie zwischen diesen verschiedenen Semantiken unterscheiden, indem Sie aussagekräftige Klassenattribute hinzufügen, z. B. <strong class="urgent">...</strong>und<strong class="warning">...</strong>strong.warning { color: red; background-color: transparent; border: 2px solid red; }
    bem Element , das in HTML 5.2 "die Betonung seines Inhalts betont". Beachten Sie, dass dieses Element normalerweise kursiv dargestellt wird (und daher häufig als Ersatz für den Grund empfohlen wurde, warum etwas fett gedruckt wurde.i Element ).
    Ich würde der Versuchung widerstehen, den Ratschlägen einiger anderer Antworten zu folgen, um so etwas zu schreiben <strong class="bold">...</strong>. Erstens bedeutet das Klassenattribut in nicht visuellen Kontexten nichts (Anhören eines ePub-Buches, Text-to-Speech im Allgemeinen, Screenreader, Braille); zweitens,
  • Wenn Sie bfür ganze Absätze oder Überschriften verwendet haben (im Gegensatz zu kürzeren Textbereichen, wie dies im vorherigen Aufzählungspunkt der Fall ist), würde ich dies durch geeignete classAttribute oder gegebenenfalls WAI-ARIA-Rollen ersetzen , z. B. alertfür ein Live Region "mit wichtigen und in der Regel zeitkritischen Informationen". Wie oben erwähnt, sollten Sie "semantische" classAttributwerte verwenden, damit Personen, die den Code verwalten (einschließlich Ihres zukünftigen Selbst), dies herausfinden können warum etwas fett gedruckt wurde.
  • Nicht alle Verwendungen von bkönnen etwas Semantisches darstellen. Wenn Sie beispielsweise gedruckte Dokumente in HTML konvertieren, wird Text möglicherweise aus Gründen fett gedruckt, die nichts mit Hervorhebung oder Wichtigkeit zu tun haben, sondern als visuelle Anleitung. Beispielsweise sind die Stichwörter in Wörterbüchern nicht "seriöser", "dringender" als der andere Inhalt. Sie können das bElement also beibehalten und optional ein aussagekräftiges Klassenattribut hinzufügen, z. B. <b class="headword">das Tag <span class="headword">basierend auf dem Argument ersetzen, dassb hat Keine Bedeutung in nicht visuellen Kontexten.

In Ihrer CSS-Datei (anstatt zu verwenden style Attribute zu verwenden, wie einige der anderen Antworten empfohlen haben) haben Sie mehrere Möglichkeiten, den "fetten" oder wichtigen Text zu gestalten:

  • Angabe verschiedener Farben (Vordergrund und / oder Hintergrund);
  • Angeben verschiedener Schriftarten;
  • Festlegen von Grenzen (siehe Beispiel oben);
  • mit verschiedenen Schriftschnitten die Verwendung von font-weightEigenschaft , die mehr Werte als nur erlaubt normalund bold, nämlich normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900,
  • etc.

Beachten Sie, dass die Unterstützung für numerische Werte für die Schriftgröße nicht immer großartig war.

Tsundoku
quelle
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>
Erweitern Sie das Snippet

Ich hoffe es hat funktioniert

zakizakibzr
quelle
0

Bei einer Nebenbemerkung wird der folgende Code ebenfalls fett gedruckt.

<strong> text here </strong>
Binoj Antony
quelle
1
... in den meisten Browsern ... aber nur als Nebeneffekt der Beschreibung des Textes als stärker betont.
Quentin
0 
<p style="font-weight:bold;"></p>
Blake Tallos
quelle
0

Sie können Folgendes verwenden:

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

ODER

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

ODER

Sie können verwenden, <h1> tagdie etwas ähnlich wie fett ist

KFC
quelle
1
Da p wahrscheinlich Blockebene ist, möchten Sie stark in p gehen.
Kzqai
0

Heutzutage tendieren die Leute dazu, Website-Builder (CMS wie Wordpress) zu verwenden, anstatt ihr eigenes Blog von Grund auf neu zu codieren. Sogar professionelle Webentwickler tun dies, weil es schneller ist.

Es wäre schön, wenn Sie die Vorteile und Dinge erwähnen könnten, die Sie beim Codieren Ihres eigenen Blogs im wirklichen Leben beachten sollten, zum Beispiel:

  • Mehr Flexibilität (Anpassung)
  • Bezahlen Sie einen Domainnamen
  • Zahlen Sie und wählen Sie ein Webhosting
  • Sicherheit und Wartung
  • Copyright und Lizenz der Vorlagen und Grafiken einiger Website-Ersteller. Ihre Website könnte an einen bestimmten Webhost gebunden sein, wenn Sie den Website Builder Ihres Hosts verwendet haben. Sie können also nicht zu einem anderen Webhost wechseln, da Sie diese Vorlage sonst nicht mehr verwenden könnten.
  • Wenn Sie nach dem technischen Support des Website-Erstellers fragen, treten Probleme auf, wenn die Website ausfällt.
  • Einige Vorlagen sind nicht suchmaschinenfreundlich und dies wirkt sich auf Ihr Website-Ranking (SEO) aus.

Auf jeden Fall können Sie CSS / CSS3 oder JavaScript verwenden, um eine interaktive Webseite zu erstellen. Sogar Sie können alle Arten von Code auf einen Server hochladen, der das Standard-Blog-Thema formatiert.

madcoderJ
quelle
-2

Die Antwort von @Darryl Hein ist trotz eines Punktes richtig - <b>wird seit XHTML überhaupt nicht empfohlen, da sie nicht semantisch ist .

<strong> bedeutet semantisch hervorgehobenen Text

font-weight: bold bedeutet visuell hervorgehobener Text

<strong>kann CSS-optimiert werden, um nicht fett zu sein, obwohl es eine herkömmliche Standardeinstellung ist. Es kann rot oder kursiv oder unterstrichen sein (obwohl all diese Möglichkeiten nicht wirklich benutzerfreundlich sind). Verwenden Sie es für Phrasen / Wörter im Text, nicht aufgrund des visuellen Designs, sondern in Bezug auf deren Bedeutung

font-weight: bold sollte für designbezogene fett gedruckte Teile wie Überschriften, Unterüberschriften, Tabellenüberschriften usw. verwendet werden.

Bewachen
quelle
Ich glaube nicht, dass dies in der überarbeiteten Definition für <b> in HTML5 zutrifft.
Kzqai
Zur gleichen Zeit haben Sie selbst geschrieben, dass dies <b>der letzte Ausweg ist, und ich habe geschrieben, dass b nicht empfohlen wird. Wo ist der Widerspruch?
Wache
3
Entschuldigung, hätte genauer sein sollen, dass ich gemeint habe, dass es in HTML 5 eine neu verbundene semantische Bedeutung hat: ...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]”.in HTML5, wie unter dev.w3.org/html5/markup/b.html#b angegeben . Das ist der Grund, den ich für <b>gültig halte : gültig / ein letzter Ausweg / war nicht semantisch / wird neu definiert, um semantisch zu sein usw. Nur ein subtiler Unterschied.
Kzqai
-3

Verwenden Sie das <strong>Tag, weil es semantischer ist. <b>wurde abgeschrieben, daher ist es am besten, es nicht zu verwenden. Fettgedruckter Text erhält mehr Gewicht für die Suchmaschinenoptimierung (SEO), daher ist es immer am besten, einen echten Text zu verwenden, <strong>anstatt einen <p>oder <span>fett mit CSS zu erstellen.

Matthew James Taylor
quelle
4
Verwenden Sie Dinge nicht, weil sie "semantischer" sind - verwenden Sie sie, weil sie die Semantik haben, die für das gilt, was Sie schreiben. Wir wissen nicht, wie die Semantik des Textes im OP ist.
Quentin