Erweiterte Textmerkmale

Es gibt viele weitere Elemente in HTML zur Definition von Textsemantik, die wir im Artikel Hervorhebung und Wichtigkeit nicht behandelt haben. Die in diesem Artikel beschriebenen Elemente sind weniger bekannt, aber dennoch nützlich zu kennen (und es handelt sich dabei keineswegs um eine vollständige Liste). Hier erfahren Sie, wie man Zitate, Computercode und andere verwandte Texte, Tief- und Hochstellungen, Kontaktinformationen und mehr auszeichnet.

Voraussetzungen:	Grundlegende HTML-Kenntnisse, wie sie in Grundlegende HTML-Syntax behandelt werden. Textuelle Semantik wie Überschriften und Absätze und Listen.
Lernziele:	Zitate. Abkürzungen und Akronyme. Adressen. Zeiten und Daten. Hoch- und Tiefstellungen.

Zitate

HTML bietet Funktionen zum Auszeichnen von Zitaten; welches Element Sie verwenden, hängt davon ab, ob Sie ein Block- oder ein Inline-Zitat auszeichnen.

Blockzitate

Wenn ein Abschnitt blockniveau-Inhalte (sei es ein Absatz, mehrere Absätze, eine Liste usw.) von einer anderen Quelle zitiert wird, sollten Sie ihn in ein <blockquote>-Element einbetten, um dies zu kennzeichnen, und eine URL, die auf die Quelle des Zitats verweist, in einem cite-Attribut einfügen. Zum Beispiel ist die folgende Markierung von der MDN-Seite zum <blockquote>-Element entnommen:

html

<p>
  The <strong>HTML <code>&lt;blockquote&gt;</code> Element</strong> (or
  <em>HTML Block Quotation Element</em>) indicates that the enclosed text is an
  extended quotation.
</p>

Um dies in ein Blockzitat zu verwandeln, würden wir einfach das Folgende tun:

html

<p>Here is a blockquote:</p>
<blockquote
  cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/blockquote">
  <p>
    The <strong>HTML <code>&lt;blockquote&gt;</code> Element</strong> (or
    <em>HTML Block Quotation Element</em>) indicates that the enclosed text is
    an extended quotation.
  </p>
</blockquote>

Die Standardeinstellungen des Browsers werden dies als eingerückten Absatz darstellen, als Hinweis darauf, dass es ein Zitat ist; der Absatz über dem Zitat ist dort, um dies zu demonstrieren.

Inline-Zitate

Inline-Zitate funktionieren genau auf die gleiche Weise, außer dass sie das <q>-Element verwenden. Zum Beispiel enthält die unten stehende Markierung ein Zitat von der MDN-Seite zum <q>-Element:

html

<p>
  The quote element — <code>&lt;q&gt;</code> — is
  <q
    cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/q">
    intended for short quotations that don't require paragraph breaks.
  </q>
</p>

Die Standardeinstellungen des Browsers werden dies als normalen Text darstellen, der in Anführungszeichen gesetzt ist, um ein Zitat anzuzeigen, so wie hier:

Zitate

Der Inhalt des cite-Attributs klingt nützlich, aber leider machen Browser, Screenreader usw. damit nicht viel. Es gibt keine Möglichkeit, den Browser den Inhalt von cite anzeigen zu lassen, ohne Ihre eigene Lösung mit JavaScript oder CSS zu schreiben. Wenn Sie die Quelle des Zitats auf der Seite verfügbar machen möchten, müssen Sie sie im Text über einen Link oder auf andere passende Weise verfügbar machen.

Es gibt ein <cite>-Element, das dafür gedacht ist, den Titel der zitierten Ressource zu enthalten, z. B. den Namen des Buches. Es gibt jedoch keinen Grund, warum Sie den Text innerhalb von <cite> nicht auf irgendeine Weise mit der Quellenangabe verlinken könnten:

html

<p>
  According to the
  <a href="/en-US/docs/Web/HTML/Reference/Elements/blockquote">
    <cite>MDN blockquote page</cite></a>:
</p>

<blockquote
  cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/blockquote">
  <p>
    The <strong>HTML <code>&lt;blockquote&gt;</code> Element</strong> (or
    <em>HTML Block Quotation Element</em>) indicates that the enclosed text is
    an extended quotation.
  </p>
</blockquote>

<p>
  The quote element — <code>&lt;q&gt;</code> — is
  <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/q">
    intended for short quotations that don't require paragraph breaks.
  </q>
  — <a href="/en-US/docs/Web/HTML/Reference/Elements/q"><cite>MDN q page</cite></a>.
</p>

Zitate werden standardmäßig in Kursivschrift dargestellt.

Aktives Lernen: Wer hat das gesagt?

Es ist Zeit für ein weiteres Beispiel für aktives Lernen! In diesem Beispiel möchten wir, dass Sie:

Den mittleren Absatz in ein Blockzitat verwandeln, das ein cite-Attribut enthält.
"The Need To Eliminate Negative Self Talk" im dritten Absatz in ein Inline-Zitat umwandeln und ein cite-Attribut hinzufügen.
Den Titel jeder Quelle in <cite>-Tags einbetten und jeden in einen Link zu dieser Quelle umwandeln.

Die Quellen der Zitate, die Sie benötigen, sind:

http://www.brainyquote.com/quotes/authors/c/confucius.html für das Konfuzius-Zitat
http://example.com/affirmationsforpositivethinking für "The Need To Eliminate Negative Self Talk".

Wenn Sie einen Fehler machen, können Sie ihn jederzeit mit der Schaltfläche Zurücksetzen zurücksetzen. Wenn Sie wirklich nicht weiterkommen, drücken Sie die Schaltfläche Lösung anzeigen, um die Antwort zu sehen.

<h2>Live output</h2>

<div class="output" style="min-height: 50px;"></div>

<h2>Editable code</h2>
<p class="a11y-label">
  Press Esc to move focus away from the code area (Tab inserts a tab character).
</p>

<textarea id="code" class="input" style="min-height: 150px; width: 95%">
<p>Hello and welcome to my motivation page. As Confucius' quotes site says:</p>
<p>It does not matter how slowly you go as long as you do not stop.</p>
<p>I also love the concept of positive thinking, and The Need To Eliminate Negative Self Talk (as mentioned in Affirmations for Positive Thinking.)</p>
</textarea>

<div class="playable-buttons">
  <input id="reset" type="button" value="Reset" />
  <input id="solution" type="button" value="Show solution" />
</div>

html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

const textarea = document.getElementById("code");
const reset = document.getElementById("reset");
const solution = document.getElementById("solution");
const output = document.querySelector(".output");
const code = textarea.value;
let userEntry = textarea.value;

function updateCode() {
  output.innerHTML = textarea.value;
}

const htmlSolution =
  '<p>Hello and welcome to my motivation page. As <a href="http://www.brainyquote.com/quotes/authors/c/confucius.html"><cite>Confucius\' quotes site</cite></a> says:</p>\n\n<blockquote cite="http://www.brainyquote.com/quotes/authors/c/confucius.html">\n <p>It does not matter how slowly you go as long as you do not stop.</p>\n</blockquote>\n\n<p>I also love the concept of positive thinking, and <q cite="http://example.com/affirmationsforpositivethinking">The Need To Eliminate Negative Self Talk</q> (as mentioned in <a href="http://example.com/affirmationsforpositivethinking"><cite>Affirmations for Positive Thinking</cite></a>.)</p>';
let solutionEntry = htmlSolution;

reset.addEventListener("click", () => {
  textarea.value = code;
  userEntry = textarea.value;
  solutionEntry = htmlSolution;
  solution.value = "Show solution";
  updateCode();
});

solution.addEventListener("click", () => {
  if (solution.value === "Show solution") {
    textarea.value = solutionEntry;
    solution.value = "Hide solution";
  } else {
    textarea.value = userEntry;
    solution.value = "Show solution";
  }
  updateCode();
});

textarea.addEventListener("input", updateCode);
window.addEventListener("load", updateCode);

// stop tab key tabbing out of textarea and
// make it write a tab at the caret position instead

textarea.onkeydown = (e) => {
  if (e.code === "Tab") {
    e.preventDefault();
    insertAtCaret("\t");
  }

  if (e.code === "Escape") {
    textarea.blur();
  }
};

function insertAtCaret(text) {
  const scrollPos = textarea.scrollTop;
  let caretPos = textarea.selectionStart;

  const front = textarea.value.substring(0, caretPos);
  const back = textarea.value.substring(
    textarea.selectionEnd,
    textarea.value.length,
  );
  textarea.value = front + text + back;
  caretPos += text.length;
  textarea.selectionStart = caretPos;
  textarea.selectionEnd = caretPos;
  textarea.focus();
  textarea.scrollTop = scrollPos;
}

// Update the saved userCode every time the user updates the text area code
textarea.onkeyup = () => {
  // We only want to save the state when the user code is being shown,
  // not the solution, so that solution is not saved over the user code
  if (solution.value === "Show solution") {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode();
};

Abkürzungen

Ein weiteres relativ häufiges Element, das Sie im Internet antreffen werden, ist <abbr> — dies wird verwendet, um eine Abkürzung oder ein Akronym zu kennzeichnen. Wenn Sie entweder das eine oder das andere einfügen, geben Sie beim ersten Vorkommen der vollständigen Bezeichnung im Klartext zusammen mit dem <abbr> an, um die Abkürzung auszuzeichnen. Dies gibt Benutzeragenten einen Hinweis darauf, wie der Inhalt angekündigt/angezeigt werden soll, und informiert alle Benutzer, was die Abkürzung bedeutet.

Wenn es wenig Sinn macht, die vollständige Bezeichnung zusätzlich zur Abkürzung anzugeben, und die Abkürzung oder das Akronym ein ziemlich verkürzter Begriff ist, geben Sie die vollständige Bezeichnung als Wert des title-Attributs an:

Abkürzungsbeispiel

Schauen wir uns ein Beispiel an.

html

<p>
  We use <abbr>HTML</abbr>, Hypertext Markup Language, to structure our web
  documents.
</p>

<p>
  I think <abbr title="Reverend">Rev.</abbr> Green did it in the kitchen with
  the chainsaw.
</p>

Diese werden etwa so aussehen:

Hinweis: Frühere Versionen von HTML unterstützten auch das <acronym>-Element, aber es wurde aus der HTML-Spezifikation entfernt zugunsten der Verwendung von <abbr>, um sowohl Abkürzungen als auch Akronyme darzustellen. <acronym> sollte nicht verwendet werden.

Aktives Lernen: Eine Abkürzung auszeichnen

Für diese einfache Aufgabe zum aktiven Lernen möchten wir, dass Sie eine Abkürzung auszeichnen. Sie können unser unten stehendes Beispiel verwenden oder es durch ein eigenes ersetzen.

<h2>Live output</h2>

<div class="output" style="min-height: 50px;"></div>

<h2>Editable code</h2>
<p class="a11y-label">
  Press Esc to move focus away from the code area (Tab inserts a tab character).
</p>

<textarea id="code" class="input" style="min-height: 50px; width: 95%">
<p>NASA, the National Aeronautics and Space Administration, sure does some exciting work.</p>
</textarea>

<div class="playable-buttons">
  <input id="reset" type="button" value="Reset" />
  <input id="solution" type="button" value="Show solution" />
</div>

html {
  font-family: sans-serif;
}

h2 {
  font-size: 16px;
}

.a11y-label {
  margin: 0;
  text-align: right;
  font-size: 0.7rem;
  width: 98%;
}

body {
  margin: 10px;
  background: #f5f9fa;
}

const textarea = document.getElementById("code");
const reset = document.getElementById("reset");
const solution = document.getElementById("solution");
const output = document.querySelector(".output");
const code = textarea.value;
let userEntry = textarea.value;

function updateCode() {
  output.innerHTML = textarea.value;
}

const htmlSolution =
  "<p><abbr>NASA</abbr>, the National Aeronautics and Space Administration, sure does some exciting work.</p>";
let solutionEntry = htmlSolution;

reset.addEventListener("click", () => {
  textarea.value = code;
  userEntry = textarea.value;
  solutionEntry = htmlSolution;
  solution.value = "Show solution";
  updateCode();
});

solution.addEventListener("click", () => {
  if (solution.value === "Show solution") {
    textarea.value = solutionEntry;
    solution.value = "Hide solution";
  } else {
    textarea.value = userEntry;
    solution.value = "Show solution";
  }
  updateCode();
});

textarea.addEventListener("input", updateCode);
window.addEventListener("load", updateCode);

// stop tab key tabbing out of textarea and
// make it write a tab at the caret position instead

textarea.onkeydown = (e) => {
  if (e.code === "Tab") {
    e.preventDefault();
    insertAtCaret("\t");
  }

  if (e.code === "Escape") {
    textarea.blur();
  }
};

function insertAtCaret(text) {
  const scrollPos = textarea.scrollTop;
  let caretPos = textarea.selectionStart;

  const front = textarea.value.substring(0, caretPos);
  const back = textarea.value.substring(
    textarea.selectionEnd,
    textarea.value.length,
  );
  textarea.value = front + text + back;
  caretPos += text.length;
  textarea.selectionStart = caretPos;
  textarea.selectionEnd = caretPos;
  textarea.focus();
  textarea.scrollTop = scrollPos;
}

// Update the saved userCode every time the user updates the text area code
textarea.onkeyup = () => {
  // We only want to save the state when the user code is being shown,
  // not the solution, so that solution is not saved over the user code
  if (solution.value === "Show solution") {
    userEntry = textarea.value;
  } else {
    solutionEntry = textarea.value;
  }

  updateCode();
};

Kontaktdaten auszeichnen

HTML besitzt ein Element zur Auszeichnung von Kontaktdaten — <address>. Dieses umschließt Ihre Kontaktdaten, zum Beispiel:

html

<address>Chris Mills, Manchester, The Grim North, UK</address>

Es könnte auch komplexere Markierungen und andere Formen von Kontaktinformationen enthalten, zum Beispiel:

html

<address>
  <p>
    Chris Mills<br />
    Manchester<br />
    The Grim North<br />
    UK
  </p>

  <ul>
    <li>Tel: 01234 567 890</li>
    <li>Email: me@grim-north.co.uk</li>
  </ul>
</address>

Beachten Sie, dass so etwas auch in Ordnung wäre, wenn die verlinkte Seite die Kontaktinformationen enthielte:

html

<address>
  Page written by <a href="../authors/chris-mills/">Chris Mills</a>.
</address>

Hinweis: Das <address>-Element sollte nur verwendet werden, um Kontaktinformationen für das Dokument im nächsten enthaltenen <article>- oder <body>-Element bereitzustellen. Es wäre korrekt, es im Footer einer Seite zu verwenden, um die Kontaktinformationen der gesamten Website anzugeben, oder in einem Artikel, um die Kontaktdetails des Autors anzugeben, jedoch nicht um eine Liste von Adressen auszuzeichnen, die nicht in Beziehung zum Inhalt dieser Seite stehen.

Hoch- und Tiefstellungen

Gelegentlich müssen Sie Hoch- und Tiefstellungen verwenden, wenn Sie Elemente wie Daten, chemische Formeln und mathematische Gleichungen auszeichnen, damit sie die richtige Bedeutung haben. Die <sup>- und <sub>-Elemente übernehmen diese Aufgabe. Zum Beispiel:

html

<p>My birthday is on the 25<sup>th</sup> of May 2001.</p>
<p>
  Caffeine's chemical formula is
  C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>.
</p>
<p>If x<sup>2</sup> is 9, x must equal 3 or -3.</p>

Die Ausgabe dieses Codes sieht so aus:

Computercode darstellen

Es gibt eine Anzahl von Elementen, die zur Darstellung von Computercode mit HTML verwendet werden können:

<code>: Zum Auszeichnen von generischen Stücken von Computercode.
<pre>: Zum Beibehalten von Leerzeichen (hauptsächlich Codeblöcke) — wenn Sie Einrückungen oder übermäßige Leerzeichen innerhalb Ihres Textes verwenden, ignorieren Browser diese und Sie werden sie auf Ihrer gerenderten Seite nicht sehen. Wenn Sie jedoch den Text in <pre></pre>-Tags umschließen, werden Ihre Leerzeichen genauso gerendert, wie Sie sie in Ihrem Texteditor sehen.
<var>: Zur spezifischen Auszeichnung von Variablennamen.
<kbd>: Zum Auszeichnen von Tastatureingaben (und anderer Arten von) Eingaben, die in den Computer eingegeben werden.
<samp>: Zur Auszeichnung der Ausgabe eines Computerprogramms.

Schauen wir uns Beispiele für diese Elemente an und wie sie zur Darstellung von Computercode verwendet werden. Wenn Sie die vollständige Datei sehen möchten, werfen Sie einen Blick auf die other-semantics.html Beispieldatei. Sie können die Datei herunterladen und in Ihrem Browser öffnen, um es sich selbst anzusehen, aber hier ist ein Ausschnitt des Codes:

html

<pre><code>const para = document.querySelector('p');

para.onclick = function() {
  alert('Owww, stop poking me!');
}</code></pre>

<p>
  You shouldn't use presentational elements like <code>&lt;font&gt;</code> and
  <code>&lt;center&gt;</code>.
</p>

<p>
  In the above JavaScript example, <var>para</var> represents a paragraph
  element.
</p>

<p>Select all the text with <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <kbd>A</kbd>.</p>

<pre>$ <kbd>ping mozilla.org</kbd>
<samp>PING mozilla.org (63.245.215.20): 56 data bytes
64 bytes from 63.245.215.20: icmp_seq=0 ttl=40 time=158.233 ms</samp></pre>

Der obige Code sieht so aus:

Zeiten und Daten auszeichnen

HTML bietet auch das <time>-Element zur maschinenlesbaren Auszeichnung von Zeiten und Daten. Zum Beispiel:

html

<time datetime="2016-01-20">20 January 2016</time>

Warum ist das nützlich? Nun, es gibt viele verschiedene Möglichkeiten, wie Menschen Daten aufschreiben. Das obige Datum könnte geschrieben werden als:

20. Januar 2016
20. Januar 2016
20. Jan 2016
20/01/16
01/20/16
Der 20. des nächsten Monats
20e Janvier 2016
2016 年 1 月 20 日
Und so weiter

Aber diese unterschiedlichen Formen können von Computern nicht leicht erkannt werden — was wäre, wenn Sie die Daten aller Ereignisse auf einer Seite automatisch erfassen und sie in einen Kalender einfügen möchten? Das <time>-Element ermöglicht es Ihnen, eine eindeutige, maschinenlesbare Zeit/Datum für diesen Zweck zuzuordnen.

Das grundlegende Beispiel oben liefert nur ein einfaches maschinenlesbares Datum, aber es sind viele andere Optionen möglich, zum Beispiel:

html

<!-- Standard simple date -->
<time datetime="2016-01-20">20 January 2016</time>
<!-- Just year and month -->
<time datetime="2016-01">January 2016</time>
<!-- Just month and day -->
<time datetime="01-20">20 January</time>
<!-- Just time, hours and minutes -->
<time datetime="19:30">19:30</time>
<!-- You can do seconds and milliseconds too! -->
<time datetime="19:30:01.856">19:30:01.856</time>
<!-- Date and time -->
<time datetime="2016-01-20T19:30">7.30pm, 20 January 2016</time>
<!-- Date and time with timezone offset -->
<time datetime="2016-01-20T19:30+01:00">
  7.30pm, 20 January 2016 is 8.30pm in France
</time>
<!-- Calling out a specific week number -->
<time datetime="2016-W04">The fourth week of 2016</time>

Testen Sie Ihr Wissen!

Sie haben das Ende dieses Artikels erreicht, aber können Sie sich an die wichtigsten Informationen erinnern? Sie finden einige weitere Tests, um zu überprüfen, dass Sie diese Informationen behalten haben, bevor Sie fortfahren — siehe Testen Sie Ihr Wissen: Erweiterter HTML-Text.

Zusammenfassung

Das markiert das Ende unseres Studiums der weniger bekannten HTML-Textsemantiken. Was Sie während dieses Kurses gesehen haben, ist keine erschöpfende Liste von HTML-Textelementen — wir wollten versuchen, das Wesentliche und einige der häufig anzutreffenden zu behandeln. Als nächstes werden wir uns mit Links beschäftigen, einem der wichtigsten Merkmale des Internets.