Betonung und Wichtigkeit

Was sind Betonung und Wichtigkeit?

In der menschlichen Sprache betonen wir oft bestimmte Wörter, um die Bedeutung eines Satzes zu ändern, und wir möchten oft bestimmte Wörter als wichtig oder auf irgendeine Weise anders markieren. HTML bietet verschiedene semantische Elemente, die es uns ermöglichen, Textinhalte mit solchen Effekten zu versehen, und in diesem Abschnitt schauen wir uns einige der gängigsten an.

Betonung

Wenn wir in gesprochener Sprache Betonung hinzufügen wollen, betonen wir bestimmte Wörter, wodurch die Bedeutung dessen, was wir sagen, subtil verändert wird. Ähnlich betonen wir in der geschriebenen Sprache Wörter, indem wir sie kursiv darstellen. Beispielsweise haben die folgenden zwei Sätze unterschiedliche Bedeutungen.

Ich bin froh, dass Sie nicht zu spät sind.

Ich bin froh, dass Sie nicht zu spät sind.

Der erste Satz klingt wirklich erleichtert, dass die Person nicht zu spät ist. Im Gegensatz dazu klingt der zweite Satz, mit den Worten "froh" und "zu spät" in Kursivschrift, sarkastisch oder passiv-aggressiv und drückt Verärgerung darüber aus, dass die Person ein wenig zu spät gekommen ist.

In HTML verwenden wir das <em>- (Emphasis) Element, um solche Fälle zu kennzeichnen. Diese werden von Screenreadern erkannt, die so konfiguriert werden können, dass sie sie in einem anderen Tonfall sprechen. Browser gestalten dies standardmäßig kursiv, aber Sie sollten dieses Tag nicht nur verwenden, um eine kursiv gestaltete Darstellung zu erreichen. Um das zu tun, könnten Sie ein <span>-Element und etwas CSS verwenden oder vielleicht ein <i>-Element (siehe unten).

<p>I am <em>glad</em> you weren't <em>late</em>.</p>

Starke Wichtigkeit

Um wichtige Wörter zu betonen, neigen wir dazu, sie in gesprochener Sprache zu betonen und in der geschriebenen Sprache fett darzustellen. Zum Beispiel:

Diese Flüssigkeit ist hoch giftig.

Ich zähle auf Sie. Seien Sie nicht zu spät!

In HTML verwenden wir das <strong>- (Strong Importance) Element, um solche Fälle zu kennzeichnen. Auch diese werden von Screenreadern erkannt, die so konfiguriert werden können, dass sie sie in einem anderen Tonfall sprechen. Browser gestalten dies standardmäßig als Fettdruck, aber Sie sollten dieses Tag nicht nur verwenden, um fettgedruckte Darstellung zu erzielen. Um dies zu tun, könnten Sie ein <span>-Element und etwas CSS verwenden oder vielleicht ein <b>-Element (siehe unten).

<p>This liquid is <strong>highly toxic</strong>.</p>

<p>I am counting on you. <strong>Do not</strong> be late!</p>

Sie können bei Bedarf starke Wichtigkeit und Betonung ineinander verschachteln:

<p>This liquid is <strong>highly toxic</strong> — if you drink it, <strong>you may <em>die</em></strong>.</p>

Lassen Sie uns mit Betonung und Wichtigkeit spielen

In diesem Abschnitt möchten wir, dass Sie mit Betonung und Wichtigkeit experimentieren:

1. Klicken Sie auf "Abspielen" im Codeblock unten, um das Beispiel im MDN Playground zu bearbeiten.
2. Geben Sie in der Hauptüberschrift dem Wort "Betonung" Betonung und dem Wort "Wichtigkeit" starke Wichtigkeit.
3. Geben Sie im ersten Absatz dem Namen der Kaffeemaschine starke Wichtigkeit und betonen Sie die Adjektive, die den Kaffee beschreiben.
4. Geben Sie im zweiten Absatz der Temperaturbeschreibung ("kalt") und der Aktion, die Sie ergreifen sollen ("wickeln Sie sich warm ein, um nicht krank zu werden"), starke Wichtigkeit. Geben Sie "krank werden" eine zusätzliche Markierung, sodass es sowohl betont als auch wichtig ist.

Wenn Sie einen Fehler machen, können Sie Ihre Arbeit im MDN Playground mit dem Zurücksetzen-Button löschen. Wenn Sie wirklich stecken bleiben, können Sie die Lösung unterhalb des Codeblocks ansehen.

h1 {
  font-weight: normal;
}

<h1>Emphasis and importance</h1>

<p>
  My new coffee machine is called The Percolator 2000. It produces the most
  sublime and wonderful brew.
</p>

<p>
  In the dead of winter, it will be cold. You should wrap up warm to avoid
  falling ill.
</p>

<h1><em>Emphasis</em> and <strong>importance</strong></h1>

<p>
  My new coffee machine is called <strong>The Percolator 2000</strong>. It
  produces the most <em>sublime</em> and <em>wonderful</em> brew.
</p>

<p>
  In the dead of winter, it will be <strong>cold</strong>. You should
  <strong>wrap up warm to avoid <em>falling ill</em></strong
  >.
</p>

Kursiv, fett, unterstrichen…

Die bisher besprochenen Elemente haben klar definierte Semantiken. Die Situation mit <b>, <i>, und <u> ist etwas komplexer. Sie entstanden, damit man in einer Zeit, in der CSS noch nicht gut unterstützt wurde oder überhaupt nicht, Text fett, kursiv oder unterstrichen schreiben konnte. Solche Elemente, die nur die Präsentation und nicht die Semantik beeinflussen, werden als Präsentations-Elemente bezeichnet und sollten nicht mehr verwendet werden, da, wie wir bereits gesehen haben, Semantik so wichtig für die Zugänglichkeit, SEO usw. ist.

HTML5 hat <b>, <i>, und <u> mit neuen, etwas verwirrenden, semantischen Rollen neu definiert.

Hier ist die beste Regel, die man sich merken kann: Es ist nur angebracht, <b>, <i>, oder <u> zu verwenden, um eine Bedeutung zu vermitteln, die traditionell mit Fett-, Kursiv- oder Unterstreichung dargestellt wird, wenn es kein besser geeignetes Element gibt; und das ist meist der Fall. Überlegen Sie, ob <strong>, <em>, <mark>, oder <span> möglicherweise besser geeignet sind.

Behalten Sie stets die Barrierefreiheit im Hinterkopf. Das Konzept der Kursivschrift ist für Personen, die Screenreader verwenden, oder für Personen, die ein anderes Schriftsystem als das lateinische Alphabet verwenden, nicht sehr hilfreich.

• <i> wird verwendet, um eine Bedeutung zu vermitteln, die traditionell durch Kursivschrift dargestellt wird: Fremdwörter, taxonomische Bezeichnungen, Fachbegriffe, ein Gedanke…
• <b> wird verwendet, um eine Bedeutung zu vermitteln, die traditionell durch Fett dargestellt wird: Schlüsselwörter, Produktnamen, Leitsätze…
• <u> wird verwendet, um eine Bedeutung zu vermitteln, die traditionell durch Unterstreichung dargestellt wird: Eigennamen, Rechtschreibfehler…

<!-- scientific names -->
<p>
  The Ruby-throated Hummingbird (<i>Archilochus colubris</i>) is the most common
  hummingbird in Eastern North America.
</p>

<!-- foreign words -->
<p>
  The menu was a sea of exotic words like <i lang="uk-latn">vatrushka</i>,
  <i lang="id">nasi goreng</i> and <i lang="fr">soupe à l'oignon</i>.
</p>

<!-- a known misspelling -->
<p>Someday I'll learn how to <u class="spelling-error">spel</u> better.</p>

<!-- term being defined when used in a definition -->
<dl>
  <dt>Semantic HTML</dt>
  <dd>
    Use the elements based on their <b>semantic</b> meaning, not their
    appearance.
  </dd>
</dl>

Zusammenfassung

Wir haben nun für den Moment genug über Betonung und Wichtigkeit gesprochen. Lassen Sie uns nun ansehen, wie wir Listen in HTML darstellen.

• Zurück
• Übersicht: Strukturierung von Inhalten mit HTML
• Weiter