Textgrundlagen

Ähnlich wie bei der Verwendung von <h1>-zu-<h6>-Überschriften in einem Texteditor und einer Fülle von Möglichkeiten zur sinnvollen und visuellen Formatierung von Textabschnitten bietet HTML sehr ähnliche semantische und nicht semantische Elemente.

In diesem Abschnitt werden die wichtigsten Methoden zum Auszeichnen von Text oder Textgrundlagen behandelt. Anschließend werden wir uns mit Attributen beschäftigen, bevor wir weitere Möglichkeiten zum Auszeichnen von Text untersuchen, wie z. B. Listen, Tabellen und Formulare.

Überschriften, noch einmal aufbereitet

Es gibt sechs Elemente für Abschnittsüberschriften: <h1>, <h2>, <h3>, <h4>, <h5> und <h6>, wobei <h1> am wichtigsten und <h6> am wenigsten wichtig ist. Viele Jahre lang wurde Entwicklern gesagt, dass Browser Überschriften verwenden, um Dokumente zu strukturieren. Das war ursprünglich das Ziel, aber die Browser haben keine Umrisse von Funktionen implementiert. Nutzer von Screenreadern verwenden Überschriften jedoch als explorative Datenanalyse, um mehr über den Inhalt der Seite zu erfahren. Sie können mit dem Schlüssel h durch die Überschriften navigieren. Wenn Sie also dafür sorgen, dass Überschriftenebenen so implementiert werden, wie Sie ein Dokument skizzieren, machen Sie Ihre Inhalte zugänglich und es wird dennoch sehr empfohlen.

Standardmäßig ist der Stil des Browsers <h1> am größten, <h2> etwas kleiner, wobei die einzelnen Überschriftenebenen standardmäßig kleiner sind. Interessanterweise verringern Browser standardmäßig auch die Schriftgröße von <h1> abhängig davon, in wie vielen <article>-, <aside>-, <nav>- oder <section>-Elementen sie verschachtelt sind.

Einige User-Agent-Stylesheets enthalten die folgenden Selectors oder Ähnliches, um verschachtelte <h1>-Elemente so zu gestalten, als befänden sie eine weniger wichtige Ebene:

h2, :is(article, aside, nav, section) h1 {}
h3, :is(article, aside, nav, section) :is(article, aside, nav, section) h1 {}

Das Accessibility Object Model (AOM) meldet jedoch die Ebene des Elements korrekt – in diesem Fall „heading, level 1“. Bei anderen Überschriftenebenen ist dies im Browser nicht möglich. Verwenden Sie jedoch keinen Browserstil, der auf Überschriftenebene basiert. Auch wenn Browser die Gliederung nicht unterstützen, tun Sie dies so, als würden Sie Ihre Inhaltsüberschriften so mit Markup versehen, als würden sie dies tun. Dadurch ergeben Ihre Inhalte für Suchmaschinen, Screenreader und zukünftige Nutzer (und natürlich auch Sie selbst).

Außerhalb von Überschriften besteht der meist strukturierte Text aus einer Reihe von Absätzen. In HTML werden Absätze mit dem Tag <p> gekennzeichnet. Das schließende Tag ist optional, wird aber immer empfohlen.

Der Abschnitt #about hat eine Überschrift und einige Absätze:

Dieser Abschnitt ist keine Sehenswürdigkeit, da er keinen barrierefreien Namen hat. Um dies in eine region (eine Orientierungshilfe) umzuwandeln, können Sie aria-labelledby verwenden, um den barrierefreien Namen anzugeben:

<section id="about"  aria-labelledby="about_heading">
<h2 id="about_heading">What you'll learn</h2>

Erstellen Sie Orientierungspunkte nur, wenn und wenn es angemessen ist. Zu viele Orientierungspunkte können für Screenreader-Nutzende schnell verwirrend werden.

Zitate und Zitate

Bei der Auszeichnung eines Artikels oder Blogposts können Sie ein Zitat oder ein Zitat mit oder ohne sichtbares Zitat einbeziehen. Es gibt Elemente für diese drei Komponenten: <blockquote>, <q> und <cite> für ein sichtbares Zitat oder das Attribut cite, um weitere Informationen für die Suche bereitzustellen.

Der Abschnitt #feedback enthält eine Überschrift und drei Rezensionen. Diese Rezensionen sind Blockquotes, von denen einige Zitate enthalten, gefolgt von einem Absatz mit dem Zitat des Zitats. Wenn wir die dritte Beurteilung auslassen, um Platz zu sparen, lautet das Markup:

Die Informationen zum Autor des Zitats sind nicht Teil des Zitats und somit nicht im <blockquote> enthalten, sondern kommen nach dem Zitat. Hierbei handelt es sich zwar um Zitate im Laiensinn des Begriffs, es wird jedoch keine bestimmte Ressource zitiert. Daher sind sie in einem <p>-Absatzelement eingeschlossen.

Die Zitation wird in drei Zeilen angezeigt, einschließlich des Namens des Autors, seiner bisherigen Rolle und seiner beruflichen Ziele. Mit dem Zeilenumbruch <br> wird ein Zeilenumbruch in einem Textblock erstellt. Es kann in physischen Adressen, in Gedichten und in Signaturblöcken verwendet werden. Zeilenumbrüche sollten nicht als Zeilenumbruch verwendet werden, um Absätze voneinander zu trennen. Schließen Sie stattdessen den vorherigen Absatz und öffnen Sie einen neuen. Die Verwendung von Absätzen für Absätze ist nicht nur gut für die Barrierefreiheit, sondern ermöglicht auch die Gestaltung. Das <br>-Element dient lediglich als Zeilenumbruch. Es wird von sehr wenigen CSS-Eigenschaften beeinflusst.

Obwohl wir Zitationsinformationen in einem Absatz nach jedem Blocksatz angegeben haben, sind die zuvor gezeigten Zitate so codiert, dass sie nicht aus einer externen Quelle stammen. Falls ja, kann (sollte?) die Quelle zitiert werden.

Wenn die Rezension von einer Rezensionswebsite, einem Buch oder einer anderen Arbeit abgerufen wurde, kann das Element <cite> für den Titel einer Quelle verwendet werden. Beim Inhalt von <cite> kann es sich um den Titel eines Buchs, den Namen einer Website oder TV-Sendung oder sogar um den Namen eines Computerprogramms handeln. Die <cite>-Kapselung kann unabhängig davon verwendet werden, ob die Quelle übergeben oder zitiert oder referenziert wird. Bei <cite> handelt es sich um das Werk, nicht um den Autor.

Wenn das Zitat von Blendan Smooth aus ihrem Offlinemagazin stammt, würden Sie das Zitat so schreiben:

Das Zitationselement <cite> hat keine implizite Rolle und sollte den zugänglichen Namen aus dem Inhalt erhalten. Verwenden Sie kein aria-label.

Wenn eine Quelle namentlich erwähnt werden muss, obwohl der Inhalt nicht sichtbar sein kann, gibt es das Attribut cite, das als Wert die URL des Quelldokuments oder der Nachricht für die zitierten Informationen verwendet. Dieses Attribut ist sowohl für <q> als auch für <blockquote> gültig. Auch wenn es sich um eine URL handelt, ist sie zwar maschinenlesbar, aber für den Leser nicht sichtbar:

Das schließende Tag </p> ist zwar optional und wird immer empfohlen, das schließende Tag </blockquote> ist jedoch immer erforderlich.

In den meisten Browsern werden sowohl <blockquote>-Inline-Richtungen als auch <cite>-Inhalte kursiv formatiert. Dies kann mit CSS gesteuert werden. <blockquote> fügt keine Anführungszeichen hinzu. Diese können jedoch mit CSS-generierten Inhalten hinzugefügt werden. Mit dem Element <q> werden standardmäßig Anführungszeichen in sprachspezifischen Anführungszeichen hinzugefügt.

Im Abschnitt #teachers wird HAL mit „Es tut mir leid , aber ich fürchte, ich kann das nicht tun, nicht“ zitiert. Der Code dafür auf Englisch und Französisch lautet:

Mit dem Inline-Zitatelement <q> werden sprachliche Anführungszeichen hinzugefügt. Die Standardstile des User-Agents umfassen generierte Inhalte mit offenen und schließenden Anführungszeichen:

q::before {content: open-quote;}
q::after {content: close-quote;}

Das Attribut lang ist enthalten, um den Browser darüber zu informieren, dass die Ausgangssprache der Seite im öffnenden <html lang="en-US">-Tag als Englisch definiert wurde, dieser Textabschnitt jedoch in einer anderen Sprache verfasst ist. Dadurch können Sprachsteuerungen wie Siri, Alexa und Voiceover die französische Aussprache verwenden. Außerdem wird dem Browser mitgeteilt, welche Art von Anführungszeichen gerendert werden soll.

Wie <blockquote> unterstützt auch das <q>-Element das Attribut cite.

HTML-Entitäten

Vielleicht ist Ihnen schon die Escapesequenz oder „Entität“ aufgefallen. Da das < in HTML verwendet wird, muss es entweder mit < oder mit einer weniger leicht zu merkenden Codierung < maskiert werden. In HTML gibt es vier reservierte Entitäten: <, >, & und ". Ihre Zeichenverweise sind <, >, & bzw. ".

Andere Rechtspersönlichkeiten, die Sie häufig verwenden, sind © für das Urheberrecht (©), ™ für Marken (TM) und   für geschützte Leerzeichen. Geschützte Leerzeichen sind nützlich, wenn Sie ein Leerzeichen zwischen zwei Zeichen oder Wörtern einfügen und gleichzeitig einen Zeilenumbruch verhindern möchten. Es gibt über 2.000 benannte Zeichenverweise. Bei Bedarf gibt es jedoch für jedes einzelne Zeichen, einschließlich Emojis, ein codiertes Äquivalent, das mit &# beginnt.

In der Workshop-Rezension von ToastyMcToastface (nicht im obigen Codebeispiel enthalten) stoßen Sie auf ungewöhnliche Textzeichen:

<blockquote>Learning with Hal and Eve exceeded all of my wildest fantasies. All they did was stick a USB in. They promised that it was a brand new USB, so we know there were no viruses on it. The Russians had nothing to do with it. This has no̶̼͖ţ̘h̝̰̩͈̗i̙̪n͏̩̙͍̱̫̜̟g̢̣ͅ ̗̰͓̲̞̀t͙̀o̟̖͖̹̕ ͓̼͎̝͖̭dó̪̠͕̜ ͍̱͎͚̯̟́w̮̲̹͕͈̟͞ìth̢ ̰̳̯̮͇</blockquote>

Der letzte Satz in diesem Blocksatz kann auch folgendermaßen geschrieben werden:

This has no̶̼͖ţ̘h̝̰̩͈̗i̙̪n͏̩̙
͍̱̫̜̟g̢̣ͅ ̗̰͓̲̞̀t͙̀o̟
̖͖̹̕ ͓̼͎̝͖̭dó̪̠͕̜ ͍̱
͎͚̯̟́w̮̲̹͕͈̟͞ìth̢ ̰̳
̯̮͇

In diesem Codechaos gibt es einige Zeichen ohne Escape-Zeichen und einige benannte Zeichenverweise. Da der Zeichensatz UTF-8 ist, müssen die letzten Zeichen im Blocksatz nicht wie in diesem Beispiel maskiert werden. Nur Zeichen, die vom Zeichensatz nicht unterstützt werden, müssen maskiert werden. Bei Bedarf gibt es viele Tools, mit denen verschiedene Zeichen maskiert werden können. Alternativ kannst du einfach <meta charset="UTF-8"> in die <head> aufnehmen.

Auch wenn Sie den Zeichensatz als UTF-8 angeben, müssen Sie < maskieren, wenn Sie dieses Zeichen auf dem Bildschirm ausgeben möchten. Im Allgemeinen müssen Sie die benannten Zeichenreferenzen für >, " oder & nicht angeben. Wenn Sie jedoch eine Anleitung zu HTML-Entitäten schreiben möchten, müssen Sie < schreiben, wenn Sie anderen zeigen, wie eine < programmiert wird. 😀

Oh, und das Smiley-Emoji ist 😀, aber dieses Dokument ist als UTF-8 deklariert, sodass es nicht maskiert wird.

Überprüfen Sie Ihr Wissen

Testen Sie Ihr Wissen über Text in HTML.

Wie wird ein Copyright-Symbol in HTML angezeigt?

c

Versuche es bitte noch einmal.

©

Richtig!

&copyright.

Versuche es bitte noch einmal.

Mit welchem Element wird angegeben, dass es sich um ein Zitat handelt?

<blockquote>

Richtig

<quote>

Versuche es bitte noch einmal.

<cite>

Versuche es bitte noch einmal. Mit dem Element <cite> wird die Quelle eines Zitats angegeben, nicht das Zitat selbst.