HTML-Kurs / Text auszeichnen: Betonung, Zitate, Abkürzungen und Code

HTML-Text-Elemente beschreiben warum ein Abschnitt besonders ist, und nicht nur sein Aussehen. Verwenden Sie em für Betonung, strong für Wichtigkeit, q und blockquote für Zitate, abbr für Abkürzungen und code für Code.

Betonung und Wichtigkeit: em und strong

Verwenden Sie em, um ein Wort in einem Satz hervorzuheben. Verwenden Sie strong, wenn der Inhalt selbst besondere Bedeutung hat, wie z. B. bei einer Warnung. Browser zeigen diese Elemente häufig in Kursivschrift bzw. Fett an, aber ihre Bedeutungen werden nicht durch diese Stile definiert.

<p>Speichern Sie die Datei <em>bevor Sie</em> den Browser aktualisieren.</p>

<p><strong>Teilen Sie Ihr Passwort nicht.</strong></p>

Der erste Satz betont die Reihenfolge der Aktionen; der zweite kennzeichnet eine Warnung. Wenn Sie nur eine visuelle Gestaltung benötigen, verwenden Sie CSS, anstatt semantische Elemente ohne entsprechende Bedeutung hinzuzufügen.

Kurze Zitate und Blockzitate: q und blockquote

Verwenden Sie q für ein kurzes Zitat innerhalb eines Satzes und blockquote für ein Zitat, das einen separaten Block bildet. Die folgenden Sätze wurden ausschließlich geschrieben, um die Elemente zu demonstrieren.

<p>Die Anweisung lautet <q>Speichern Sie Ihre Änderungen</q>.</p>



<blockquote>

  <p>Planen Sie die Struktur des Dokuments, bevor Sie dessen Inhalt verfassen.</p>

</blockquote>

Ein Browser kann Anführungszeichen für q bereitstellen, fügen Sie daher kein zweites Paar darum herum hinzu. Für ein echtes Zitat überprüfen Sie den Wortlaut und geben Sie die Quelle im sichtbaren Text an. Das Attribut cite auf blockquote zeigt nicht automatisch eine Quelle für die Leser an.

Abkürzungen mit abbr erklären

abbr kennzeichnet eine Abkürzung. Schreiben Sie einen unbekannten Begriff bei seiner ersten Erwähnung im umgebenden Text vollständig aus; ein Leser sollte nicht mit der Maus über das Attribut title fahren müssen, um die Bedeutung zu erfahren.

<p>HyperText Markup Language (<abbr title="HyperText Markup Language">HTML</abbr>) definiert die Struktur einer Webseite.</p>

Sie müssen den vollständigen Begriff nicht bei jeder nachfolgenden Verwendung im gleichen Kontext wiederholen.

Code und Benutzereingabe: code und kbd

Verwenden Sie code für ein kleines Codefragment oder einen Dateinamen, der als Code besprochen wird. Verwenden Sie kbd für Tasten oder andere Eingaben, die der Benutzer bereitstellen muss. Literale Codeklammern verwenden die Regeln zum Maskieren von Zeichen in HTML-Syntax.

<p>Speichern Sie <code>index.html</code> mit <kbd>Strg</kbd>+<kbd>S</kbd>.</p>

Für mehrzeiligen Code, der die Einrückung beibehalten muss, kann HTML code innerhalb von pre platzieren. Die Codeblöcke dieses Kurses verwenden pre und code, mit einer Sprachklasse für die Syntaxhervorhebung.

Vergleichen Sie die Semantik in einem vollständigen Dokument

Speichern Sie dieses vollständige Dokument als text-semantics.html in UTF-8. Das Zitat ist eine fiktive Anweisung, die geschrieben wurde, um das Element zu demonstrieren.

<!doctype html>
<html lang="de-DE">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Übung zur Textsemantik</title>
</head>
<body>
  <h1>Eine kurze Anweisung</h1>
  <p>Überprüfen Sie das Ergebnis <em>nachdem Sie</em> die Datei gespeichert haben.</p>
  <p><strong>Bewahren Sie die Originaldatei auf.</strong></p>
  <p>Eine fiktive Anweisung besagt <q>Speichern Sie Ihre Änderungen</q>.</p>
  <p>Dieses Dokument verwendet HyperText Markup Language (<abbr title="HyperText Markup Language">HTML</abbr>).</p>
  <p>Speichern mit <kbd>Strg</kbd>+<kbd>S</kbd>.</p>
  <pre><code>&lt;p&gt;Beispielsatz&lt;/p&gt;</code></pre>
</body>
</html>

1. Identifizieren Sie die Betonung, die Warnung, das Zitat und die Abkürzung, indem Sie den umgebenden Text lesen.
2. Stellen Sie sicher, dass das endgültige <p> als Code angezeigt wird und nicht als Absatz interpretiert wird.
3. Ersetzen Sie vorübergehend strong durch span und stellen Sie ihn dann für die wichtige Nachricht wieder her. Dies vergleicht die Bedeutung des Elements mit seiner Standarddarstellung.

Die Code-Referenz von MDN erklärt das Element, das zur Darstellung von Code verwendet wird.

Wählen Sie das Element aus, das der Bedeutung entspricht.

• Verwenden Sie em für Betonung und strong für Wichtigkeit.
• Verwenden Sie q für ein Inline-Zitat und blockquote für ein eigenständiges Zitat.
• Verwenden Sie abbr für eine Abkürzung und erklären Sie unbekannte Begriffe in einem lesbaren Text.
• Unterscheiden Sie den Code mit code und die Benutzereingaben mit kbd.

Siehe die Referenz der HTML-Elemente auf MDN für die zulässigen Inhalte und die detaillierte Syntax jedes Elements. Die Unterscheidung zwischen Bedeutung und Präsentation gilt auch in Grundprinzipien der Barrierefreiheit: Überschriften, Links, Bilder und Tastatur.