Erweiterte Textfunktionen

Es gibt viele weitere Elemente in HTML zur Definition von Textsemantiken, die wir im Artikel Hervorhebung und Bedeutung nicht behandelt haben. Die in diesem Artikel beschriebenen Elemente sind weniger bekannt, aber dennoch nützlich zu kennen (und dies ist keineswegs eine vollständige Liste). Hier lernen Sie, wie man Zitate, Definitionslisten, Computercode und andere verwandte Texte, Tief- und Hochstellungen, Kontaktinformationen und mehr markiert.

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

Zitate

HTML enthält Funktionen zum Markieren von Zitaten. Welches Element Sie verwenden, hängt davon ab, ob Sie ein Block- oder Inline-Zitat markieren.

Blockzitate

Wenn ein Abschnitt von Blockinhalt (sei es ein Absatz, mehrere Absätze, eine Liste usw.) von irgendwo anders zitiert wird, sollten Sie ihn in ein <blockquote>-Element einfügen, um dies zu signalisieren, und eine URL zum Ursprung des Zitats in einem cite Attribut angeben. Zum Beispiel stammt die folgende Markierung von der MDN <blockquote> Elementseite:

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 Folgendes tun:

html

<p>Here is a blockquote:</p>
<blockquote
  cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/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 Standardstilierung des Browsers wird dies als eingerückten Absatz rendern, als Hinweis darauf, dass es sich um ein Zitat handelt; der Absatz über dem Zitat ist da, um dies zu demonstrieren.

Inline-Zitate

Inline-Zitate funktionieren genauso, außer dass sie das <q>-Element verwenden. Zum Beispiel enthält das untenstehende Markup ein Zitat von der MDN <q>-Seite:

html

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

Die Standardstilierung des Browsers wird dies als normalen Text in Anführungszeichen darstellen, um ein Zitat anzuzeigen, wie folgt:

Zitationen

Der Inhalt des cite Attributes klingt nützlich, aber leider tun Browser, Bildschirmleser usw. nicht wirklich viel damit. Es gibt keine Möglichkeit, den Browser die Inhalte 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 wollen, müssen Sie es im Text durch einen Link oder auf eine andere angemessene Weise verfügbar machen.

Es gibt ein <cite>-Element, aber dies ist dazu gedacht, den Titel der zitierten Quelle 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 Zitatsquelle verlinken könnten:

html

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

<blockquote
  cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/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/Element/q">
    intended for short quotations that don't require paragraph breaks.
  </q>
  — <a href="/en-US/docs/Web/HTML/Element/q"><cite>MDN q page</cite></a>.
</p>

Zitationen sind standardmäßig in Kursivschrift gestylt.

Aktives Lernen: Wer hat das gesagt?

Zeit für ein weiteres aktives Lernbeispiel! 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 verwandeln und ein cite-Attribut hinzufügen.
Den Titel jeder Quelle in <cite>-Tags einwickeln und jeden in einen Link zu dieser Quelle umwandeln.

Die Zitierquellen, 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 Zurücksetzen-Taste zurücksetzen. Wenn Sie wirklich feststecken, drücken Sie die Lösung anzeigen-Taste, 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 ziemlich häufiges Element, das Ihnen im Web begegnen wird, ist <abbr> — dies wird verwendet, um eine Abkürzung oder ein Akronym zu umschließen. Wenn Sie entweder einfügen, geben Sie bei der ersten Verwendung des Begriffs im Klartext eine vollständige Ausdehnung des Begriffs zusammen mit dem <abbr> an, um die Abkürzung zu markieren. Dies bietet einen Hinweis für Benutzeragenten, wie der Inhalt angekündigt/angezeigt werden soll, während alle Benutzer darüber informiert werden, was die Abkürzung bedeutet.

Wenn es wenig Sinn macht, die Ausdehnung zusammen mit der Abkürzung bereitzustellen und die Abkürzung oder das Akronym ein ziemlich kurzer Begriff ist, geben Sie die vollständige Ausdehnung des Begriffs 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 ungefähr so aussehen:

Hinweis: Frühere Versionen von html enthielten auch Unterstützung für das <acronym>-Element, es wurde jedoch 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 markieren

Für diese einfache aktive Lernaufgabe möchten wir, dass Sie eine Abkürzung markieren. Sie können unser Beispiel unten verwenden oder es durch Ihr 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();
};

Markieren von Kontaktdetails

HTML hat ein Element zum Markieren von Kontaktdetails — <address>. Dieses umschließt Ihre Kontaktdetails, zum Beispiel:

html

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

Es könnte auch eine komplexere Markierung 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 etwas wie dies ebenfalls 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 bereitzustellen, das im nächsten <article>- oder <body>-Element enthalten ist. Es wäre korrekt, es im Fußzeilenbereich einer Website zu verwenden, um die Kontaktinformationen der gesamten Website anzugeben, oder innerhalb eines Artikels, um die Kontaktinformationen des Autors anzugeben, aber nicht, um eine Liste von Adressen zu markieren, die nicht im Zusammenhang mit dem Inhalt der Seite stehen.

Hoch- und Tiefstellungen

Gelegentlich benötigen Sie Hoch- und Tiefstellungen, um Elemente wie Daten, chemische Formeln und mathematische Gleichungen so zu markieren, dass 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:

Repräsentation von Computercode

Es gibt eine Reihe von Elementen, mit denen Sie Computercode in HTML markieren können:

<code>: Zum Markieren von generischen Codestücken.
<pre>: Zum Beibehalten von Leerzeichen (in der Regel Codeblöcken) — wenn Sie Einrückungen oder übermäßige Leerzeichen in Ihrem Text verwenden, ignorieren Browser diese und Sie sehen sie nicht auf Ihrer gerenderten Seite. Wenn Sie den Text jedoch in <pre></pre>-Tags umschließen, werden Ihre Leerzeichen identisch mit dem, was Sie in Ihrem Texteditor sehen, gerendert.
<var>: Zum spezifischen Markieren von Variablennamen.
<kbd>: Zum Markieren von Tastatureingaben (und anderen Arten von Eingaben), die in den Computer eingegeben wurden.
<samp>: Zum Markieren der Ausgabe eines Computerprogramms.

Schauen wir uns Beispiele für diese Elemente an und wie sie verwendet werden, um Computercode darzustellen. Wenn Sie die vollständige Datei sehen möchten, werfen Sie einen Blick auf die other-semantics.html Beispielfile. Sie können die Datei herunterladen und in Ihrem Browser öffnen, um es selbst zu sehen, aber hier ist ein Ausschnitt aus dem Code:

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 wie folgt aus:

Markieren von Zeit- und Datumsangaben

HTML bietet auch das <time>-Element, um Zeit- und Datumsangaben in einem maschinenlesbaren Format zu markieren. 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 notieren. Das obige Datum könnte geschrieben werden als:

20. Januar 2016
20. Januar 2016
Jan 20 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 Veranstaltungen auf einer Seite automatisch erfassen und in einen Kalender einfügen wollten? Das <time>-Element ermöglicht es Ihnen, eine eindeutige, maschinenlesbare Zeit/Datum für diesen Zweck anzuhängen.

Das obige einfache Beispiel bietet nur ein einfaches maschinenlesbares Datum, aber es gibt viele andere Optionen, die möglich sind, 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 Ihre Fähigkeiten!

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, ob Sie diese Informationen behalten haben, bevor Sie weitermachen — siehe Testen Sie Ihre Fähigkeiten: Fortgeschrittener HTML-Text.

Zusammenfassung

Damit endet unser Studium der weniger häufigen HTML-Textsemantiken. Was Sie in diesem Kurs gesehen haben, ist keine erschöpfende Liste von HTML-Text-Elementen — wir wollten versuchen, die wesentlichen und einige der häufigeren zu behandeln, die Sie in der Praxis sehen werden. Als Nächstes werden wir uns Links ansehen, eines der wichtigsten Merkmale des Webs.