Früher hatte ich diesen Boss, der geliebt wird, geliebt wird, geliebt wird, geliebt wird Wörter zu betonen. Das war lange her, bevor wir einen WYSIWYG-Editor benutzten und ich diesen Mist von Hand codieren musste.

<p> I used to have this boss who <em>loved</em>, <strong>loved</strong>, <strong><em>loved</em></strong>, <strong><em><u>loved</u></em></strong> to emphasize words.
</p>

(Lassen Sie uns nicht auf die Farben eingehen, die er für even verwendet hat MOAR Schwerpunkt.)

Das ganze Markup zu schreiben hat sich nie großartig angefühlt. Die Anstrengung, die es gekostet hat, sicher, was auch immer. Aber ist es überhaupt eine gute Idee, Overload-Inhalte mit doppeltem — oder mehr! — Schwerpunkte?

Unterschiedliche Tags vermitteln unterschiedliche Schwerpunkte

Für den Anfang, die <strong> und <em> Tags sind für unterschiedliche Verwendungszwecke konzipiert. Wir haben sie in HTML5 zurückbekommen, wo:

Damit <strong> verleiht dem Inhalt mehr Gewicht in dem Sinne, dass es darauf hindeutet, dass der darin enthaltene Inhalt wichtig oder dringend ist. Denken Sie an eine Warnung:

Warnung: Die folgenden Inhalte wurden als großartig gekennzeichnet.

Es könnte verlockend sein, danach zu greifen <em> dasselbe zu tun. Kursiv geschriebener Text kann schließlich Aufmerksamkeit erregen. Aber es ist wirklich als Hinweis gedacht, beim Lesen des Inhalts mehr Nachdruck zu verwenden. Hier sind zum Beispiel zwei Versionen desselben Satzes mit Betonung an unterschiedlichen Stellen:

<p>I ate the <em>entire</em> plate of burritos.</p>
<p>I ate the entire <em>plate</em> of burritos.</p>

Beide Beispiele betonen die Betonung, aber auf unterschiedlichen Wörtern. Und sie würden anders klingen, wenn man sie laut vorlesen würde. Das macht <em> eine großartige Möglichkeit, den Ton in Ihrem Schreiben auszudrücken. Es ändert die Bedeutung des Satzes in einer Weise, dass <strong> nicht.

Visuelle Betonung vs. semantische Betonung

Das sind zwei Dinge, die Sie bei der Betonung von Inhalten abwägen müssen. Zum Beispiel gibt es viele Fälle, in denen Sie Inhalte kursiv schreiben müssen, ohne die Bedeutung des Satzes zu beeinträchtigen. Aber diese können mit anderen Tags behandelt werden, die Kursivschrift darstellen:

• <i>: Das ist der Klassiker! Vor HTML5 wurde dies verwendet, um Hervorhebungen mit Kursivschrift überall hervorzuheben. Jetzt wird es nur noch verwendet, um Inhalte visuell kursiv zu setzen, ohne die semantische Bedeutung zu verändern.
• <cite>: Angabe der Quelle einer Tatsache oder Zahl. ("Quelle: CSS-Tricks.")
• <address>: Wird verwendet, um Kontaktinformationen zu markieren, nicht nur physische Adressen, sondern auch Dinge wie E-Mail-Adressen und Telefonnummern. (
  
  [E-Mail geschützt]

  )

Es wird ihm dasselbe ergehen <strong>. Anstatt es zum Stylen von Text zu verwenden, der dicker aussehen soll, ist es eine bessere Idee, den Klassiker zu verwenden <b> -Tag für Fettdruck, um zu vermeiden, dass Inhalt, der es nicht benötigt, zusätzliche Bedeutung erhält. Und denken Sie daran, dass einige Elemente wie Überschriften dank der Standardstile des Browsers bereits fett dargestellt werden. Eine noch stärkere Betonung ist nicht nötig.

Verwendung von Kursivschrift in hervorgehobenen Inhalten (und umgekehrt)

Es gibt legitime Fälle, in denen Sie einen Teil einer bereits hervorgehobenen Zeile kursiv schreiben müssen. Oder betonen Sie vielleicht einen Teil des Textes, der bereits kursiv ist.

Ein Blockzitat könnte ein gutes Beispiel sein. Ich habe viele Male gesehen, wo sie für den Stil kursiv geschrieben wurden, obwohl Standard-Browser-Stile dies nicht tun:

blockquote { font-style: italic;
}

Was ist, wenn wir in diesem Blockzitat einen Filmtitel erwähnen müssen? Das sollte kursiv gesetzt werden. Es ist keine Betonung der Betonung nötig, so an <i> Tag reicht. Aber es ist immer noch seltsam, etwas kursiv zu schreiben, wenn es bereits so gerendert wurde:

<blockquote> This movie’s opening weekend performance offers some insight in to its box office momentum as it fights to justify its enormous budget. In its first weekend, <i>Avatar: The Way of Water</i> made $134 million in North America alone and $435 million globally.
</blockquote>

In einer Situation, in der wir etwas innerhalb eines kursiven Inhalts wie diesem kursiv schreiben, sollten wir das tun entfernen Sie die Kursivschrift aus dem verschachtelten Element … <i> in diesem Fall.

blockquote i { font-style: normal;
}

Abfragen im Containerstil wird super nützlich sein, um all diese Instanzen zu schnappen, wenn wir sie bekommen:

blockquote { container-name: quote; font-style: italic;
} @container quote (font-style: italic) { em, i, cite, address { font-style: normal; }
}

Dieses kleine Snippet wertet das Blockquote aus, um zu sehen, ob es so ist font-style eingestellt ist italic. Wenn ja, dann wird es dafür sorgen <em>, <i>, <cite> und <address> Elemente werden als normaler Text wiedergegeben, wobei die semantische Bedeutung beibehalten wird, falls vorhanden.

Aber zurück zur Betonung innerhalb der Betonung

Ich würde nicht nesten <strong> innerhalb <em> so was:

<p>I ate the <em><strong>entire</strong></em> plate of burritos.</p>

…oder nisten <em> innerhalb <strong> stattdessen:

<p>I ate the <em><strong>entire</strong></em> plate of burritos.</p>

Die Wiedergabe ist in Ordnung! Und es spielt keine Rolle, in welcher Reihenfolge sie sich befinden… zumindest in modernen Browsern. Jennifer Kyrnin erwähnt das Einige Browser rendern nur das Tag, das dem Text am nächsten ist, aber ich bin in meinen begrenzten Tests nirgendwo darauf gestoßen. Aber etwas, worauf man achten sollte!

Der Grund, warum ich eine Form der Betonung nicht in einer anderen verschachteln würde, ist, dass sie einfach nicht benötigt wird. Es gibt keine Grammatikregel, die das verlangt. Wie bei Ausrufezeichen reicht eine Form der Hervorhebung aus, und Sie sollten diejenige verwenden, die zu dem passt, was Sie suchen, egal ob es sich um visuelle, Gewichtung oder angekündigte Hervorhebung handelt.

Und obwohl einige Screenreader in der Lage sind, hervorgehobene Inhalte anzukündigen, lesen sie das Markup nicht mit zusätzlicher Wichtigkeit oder Hervorhebung. Soweit ich das beurteilen kann, gibt es also auch keine zusätzlichen Vorteile für die Barrierefreiheit.

Aber ich möchte wirklich alle Betonung!

Wenn Sie in der Position sind, wo Ihr Chef wie meiner ist und will ALLER Betonung, würde ich nach dem richtigen HTML-Tag für die Art der Hervorhebung greifen und dann den Rest der Stile mit einer Mischung von Tags anwenden, die die Semantik mit CSS nicht beeinflussen, um alles zu berücksichtigen, was Browserstile nicht verarbeiten können.

<style> /* If `em` contains `b` or `u` tags */ em:has(b, u) { color: #f8a100; }
</style> <p> I used to have this boss who <em>loved</em>, <strong>loved</strong>, <strong><em>loved</em></strong>, <strong><em><u>loved</u></em></strong> to emphasize words.
</p>

Ich könnte es sogar mit dem machen <strong> Tag auch als Abwehrmaßnahme:

/* If `em` contains `b` or `u` tags */
em:has(b, u),
/* If `strong` contains `em` or `u` tags */
strong:has(i, u) { color: #f8a100;
}

Solange wir Verteidigung spielen, können wir Fehler identifizieren, bei denen Betonungen in Betonungen verschachtelt sind, indem wir sie rot oder so hervorheben:

/* Highlight semantic emphases within semantic emphases */
em:has(strong),
strong:has(em) { background: hsl(0deg 50% 50% / .25); border: 1px dashed hsl(0deg 50% 50% / .25);
}

Dann würde ich wahrscheinlich diesen Ausschnitt aus dem letzten Abschnitt verwenden, der den standardmäßigen Kursivstil von einem Element entfernt, wenn es in einem anderen kursiven Element verschachtelt ist.

Noch etwas?

Mayyyybe:

• SEO-gestützte Content- und PR-Distribution. Holen Sie sich noch heute Verstärkung.
• Platoblockkette. Web3-Metaverse-Intelligenz. Wissen verstärkt. Hier zugreifen.
• Quelle: https://css-tricks.com/the-double-emphasis-thing/