Die doppelte Betonung

Mein ehemaliger Chef hatte eine besondere Angewohnheit: übermäßige Betonung der Worte. Dies war eine echte Herausforderung in der Zeit vor der Wysiwyg, die manuelle HTML-Codierung erforderte.

<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 einmal über die Farbkodierung diskutieren, die er für zusätzliche Betonung verwendet hat!)

Diese mühsame Markup stellte Fragen auf. Über die Anstrengung hinaus ist übermäßiger Schwerpunkt - doppelt oder sogar dreifach - eine gute Idee?

semantische vs. visuelle Betonung: eine Schlüsselunterschiede

Die <strong></strong> und <em></em> Tags dienen unterschiedlichen Zwecken in HTML5:

• <strong></strong>: Zeigt auf "starke Bedeutung, Ernsthaftigkeit oder Dringlichkeit."
• <em></em>: repräsentiert "Stress betont."

<strong></strong> fügt Gewicht hinzu und hindeutet Wichtigkeit oder Dringlichkeit. Betrachten Sie eine Warnung:

Warnung: Dieser Inhalt ist außergewöhnlich großartig.

Während <em></em> aufgrund ihrer aufmerksamkeitsstarken Kursivschrift ähnlich erscheinen mag, ist es seine Aufgabe, die Betonung innerhalb eines Satzes subtil zu verlagern. Vergleichen Sie:

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

beide betonen, aber anders, um die Bedeutung des Satzes und die mündliche Lektüre zu verändern. <em></em> zeichnet sich bei der Vermittlung nuancierter Ton aus.

visuelle Betonung jenseits der Semantik

Manchmal werden Kursivschrift nur für visuelle Effekte ohne semantische Veränderung benötigt. Mehrere Tags erreichen dies:

• <em></em>: Während seine primäre Funktion semantisch ist, wird es oft visuell verwendet.
• <cite></cite>: Für Zitate ("Quelle: CSS-Tricks ").
• <address></address>: Für Kontaktdetails (z. B. [E -Mail geschützt]).

In ähnlicher Weise sollte <strong></strong> nicht nur für visuelle Kühnheit sein. Verwenden Sie es für ein echtes semantisches Gewicht und vermeiden Sie unnötige Betonung. Überschriften, die standardmäßig bereits fett sind, müssen nicht weiter verstärkt werden.

verschachtelte Betonung: Ein sorgfältiger Ansatz

Es gibt legitime Szenarien, in denen verschachtelter Schwerpunkt erforderlich ist. Zum Beispiel ein gestalteter Blockquote:

blockquote {
  font-style: italic;
}

Wenn ein Filmtitel innerhalb dieses Blockquote Kursivfassung benötigt, ist <em></em> angemessen, obwohl der Container bereits kursiv ist:

<blockquote>
  This movie's opening weekend performance... In its first weekend, <i>Avatar: The Way of Water</i> made...
</blockquote>

Idealerweise sollte in solchen Fällen die verschachtelte Kursivschrift entfernt werden:

blockquote i {
  font-style: normal;
}

Abfragen im Containerstil vereinfachen Sie dies:

blockquote {
  container-name: quote;
  font-style: italic;
}

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

Dies überprüft, ob der Blockquote kursiv gemacht wird und, wenn ja, Kursivschrift aus verschachtelten Elementen entfernt und gleichzeitig die semantische Bedeutung erhalten kann.

vermeiden verschachtelte Betonung

verschachtelt

innerhalb von <strong></strong> (oder umgekehrt) ist im Allgemeinen unnötig: <em></em>

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

moderne Browser übernehmen das Rendering, aber es ist semantisch überflüssig. Ein Schwerpunkttyp reicht normalerweise aus. Wählen Sie die, die Ihre Absicht am besten vermittelt (visuell, Gewicht oder Ankündigung von Schwerpunkt). Bildschirmleser interpretieren verschachtelte Markup nicht mit zusätzlicher Bedeutung.

übermäßige Betonung

verwalten

Wenn Ihr Chef "den ganzen Schwerpunkt" verlangt, priorisieren Sie die korrekten HTML -Tags für jeden Schwerpunkt. Verwenden Sie CSS für visuelle Stile, die die Semantik nicht beeinflussen:

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

Highlight verschachtelte semantische Betonung der Fehlererkennung:

blockquote {
  font-style: italic;
}

Denken Sie an den Ausschnitt zum Entfernen des Standard -Kursivstils aus verschachtelten Elementen.

Zusätzliche Überlegungen

• Stellen Sie sicher, dass Ihre Webfont mutige und kursive Variationen enthält.
• Überlegen Sie, Inhalte für die natürliche Betonung neu zu schreiben.
• Test in verschiedenen Browsern, die von Ihrem Publikum verwendet werden.

Das obige ist der detaillierte Inhalt vonDie doppelte Betonung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!