Ähnlich wie Ihr Texteditor Überschriften von <h1> bis <h6> sowie zahlreiche Möglichkeiten zum Formatieren von Textabschnitten auf sinnvolle und visuelle Weise bietet, bietet HTML eine sehr ähnliche Reihe semantischer und nicht semantischer Elemente, um Prosa zu strukturieren.
In diesem Abschnitt werden die wichtigsten Möglichkeiten zum Markieren von Text oder die Grundlagen für Text behandelt. Anschließend werden wir Attribute besprechen, bevor wir uns weitere Möglichkeiten zum Markieren von Text ansehen, z. B. Listen, Tabellen und Formulare.
Überschriften – noch einmal
Es gibt sechs Überschriftenelemente: <h1>, <h2>, <h3>, <h4>, <h5> und <h6>. <h1> ist das wichtigste und <h6> das unwichtigste. Viele Jahre lang wurde Entwicklern gesagt, dass Überschriften von Browsern verwendet werden, um Dokumente zu gliedern.
Das war ursprünglich ein Ziel, aber Browser haben nie Funktionen zur Dokumentgliederung implementiert und der vorgeschlagene Gliederungsalgorithmus wurde offiziell aus der HTML-Spezifikation entfernt. Screenreader-Nutzer verlassen sich jedoch stark auf Überschriften, um sich über die Inhalte einer Seite zu informieren. Sie navigieren mit der Taste h durch die Überschriften. Wenn Sie Überschriftenebenen logisch implementieren, wie Sie es bei der Gliederung eines Dokuments tun würden, machen Sie Ihre Inhalte zugänglich. Dies wird dringend empfohlen.
Standardmäßig wird <h1> in Browsern am größten und <h2> etwas kleiner dargestellt. Jede nachfolgende Überschriftenebene ist standardmäßig kleiner. Früher wurde in User-Agent-Stylesheets auch die Schriftgröße von <h1>-Elementen verringert, die in Abschnittselementen wie <article>, <aside>, <nav> oder <section> verschachtelt waren.
Einige User-Agent-Stylesheets enthielten die folgenden Selektoren (oder ähnliche), um verschachtelte <h1>-Elemente so zu formatieren, als wären sie Überschriften niedrigerer Ebenen:
/* Legacy UA stylesheet behavior (now removed from browsers and the HTML spec) */
h2, :is(article, aside, nav, section) h1 {}
h3, :is(article, aside, nav, section) :is(article, aside, nav, section) h1 {}
Das Accessibility Object Model (AOM) und Screenreader haben die Überschriftenebenen jedoch nie basierend auf der Verschachtelung geändert. Ein verschachteltes <h1> wurde immer als „Überschrift, Ebene 1“ gemeldet. Dadurch entstand eine Diskrepanz, bei der verschachtelte Überschriften visuell kleiner erschienen, während sie für unterstützende Technologien weiterhin Überschriften der obersten Ebene waren.
Da der Algorithmus für die Dokumentgliederung aus der HTML-Spezifikation entfernt wurde, haben Browser diese alten Regeln für User-Agent-Stylesheets entfernt. Daher behalten verschachtelte <h1>-Elemente ihre Standard-<h1>-Schriftgröße bei, anstatt automatisch verkleinert zu werden.
Verlassen Sie sich nicht darauf, dass <h1>-Elemente in Abschnittselementen für die visuelle Gestaltung oder die strukturelle Hierarchie verschachtelt sind. Kennzeichnen Sie Ihre Inhalte immer mit sequenziellen Überschriftenelementen (<h1> bis <h6>) basierend auf der Dokumentstruktur. So sind Ihre Inhalte für Suchmaschinen, Screenreader und zukünftige Mitarbeiter klar und zugänglich.
Abgesehen von Überschriften besteht der Großteil des strukturierten Textes aus einer Reihe von Absätzen. In HTML werden Absätze mit dem <p>-Tag gekennzeichnet. Das schließende Tag ist optional, wird aber immer empfohlen.
Der Abschnitt „Über“ besteht aus einer Überschrift und einigen Absätzen:
Dieser Abschnitt ist kein Orientierungspunkt, da er keinen barrierefreien Namen hat. Um daraus ein region zu machen, also eine Landmark-Rolle, 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 nur dann Orientierungspunkte, wenn es angemessen ist. Zu viele Orientierungspunkte können für Screenreader-Nutzer schnell verwirrend sein.
Zitate und Quellenangaben
Wenn Sie einen Artikel oder Blogbeitrag mit Markup versehen, möchten Sie möglicherweise ein Zitat oder ein Auszugszitat einfügen, mit oder ohne sichtbare Quellenangabe.
Es gibt Elemente für diese drei Komponenten: <blockquote>, <q> und <cite> für eine sichtbare Quellenangabe 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 Blockzitate, von denen einige Zitate enthalten, gefolgt von einem Absatz mit der Quellenangabe des Zitats. Die dritte Rezension wird aus Platzgründen ausgelassen. Das Markup sieht so aus:
Die Informationen zum Autor des Zitats oder zur Quellenangabe sind nicht Teil des Zitats und daher nicht im <blockquote> enthalten, sondern folgen nach dem Zitat.
Obwohl es sich hierbei um Zitationen im allgemeinen Sinne handelt, wird keine bestimmte Quelle zitiert. Daher werden sie in einem <p>-Absatzelement eingeschlossen.
Das Zitat erstreckt sich über drei Zeilen und enthält den Namen des Autors, seine frühere Rolle und seine beruflichen Ziele. Mit dem <br>-Zeilenumbruch wird ein Zeilenumbruch in einem Textblock eingefügt. Es kann in physischen Adressen, in Gedichten und in Signaturblöcken verwendet werden. Zeilenumbrüche sollten nicht als Wagenrücklauf zum Trennen von Absätzen verwendet werden. Schließen Sie stattdessen den vorherigen Absatz und beginnen Sie einen neuen. Die Verwendung von Absätzen für Absätze ist nicht nur gut für die Barrierefreiheit, sondern ermöglicht auch das Styling. Das <br>-Element ist nur ein Zeilenumbruch. Es wird nur von sehr wenigen CSS-Properties beeinflusst.
Wir haben zwar in einem Absatz nach jedem Blockzitat Quellenangaben gemacht, die Zitate, die weiter oben angezeigt werden, sind jedoch so codiert, weil sie nicht aus einer externen Quelle stammen. Wenn das der Fall ist, kann (sollte?) die Quelle angegeben werden.
Wenn die Rezension von einer Rezensionswebsite, einem Buch oder einem anderen Werk stammt, kann das <cite>-Element für den Titel einer Quelle verwendet werden. Der Inhalt von <cite> kann der Titel eines Buchs, der Name einer Website oder einer Fernsehsendung oder sogar der Name eines Computerprogramms sein. Die <cite>-Umschließung kann verwendet werden, unabhängig davon, ob die Quelle nur beiläufig erwähnt oder zitiert oder auf sie verwiesen wird. Der Inhalt von <cite> ist das Werk, nicht der Autor.
Wenn das Zitat von Blendan Smooth aus ihrem Offline-Magazin stammt, würden Sie das Blockquote so schreiben:
Das Zitationselement <cite> hat keine implizite Rolle und sollte seinen barrierefreien Namen aus seinem Inhalt beziehen. Fügen Sie kein aria-label ein.
Wenn Sie die Inhalte nicht sichtbar machen können, können Sie mit dem Attribut cite die URL des Quelldokuments oder der Quellnachricht für die zitierten Informationen angeben. Dieses Attribut ist sowohl für <q> als auch für <blockquote> gültig. Es handelt sich zwar um eine URL, sie ist aber maschinenlesbar und nicht für den Leser sichtbar:
Das schließende Tag </p> ist optional (und wird immer empfohlen), das schließende Tag </blockquote> ist jedoch immer erforderlich.
Die meisten Browser fügen sowohl für <blockquote>-Inline-Anweisungen als auch für kursiv formatierten <cite>-Inhalt Padding hinzu. Dies kann mit CSS gesteuert werden. Mit <blockquote> werden keine Anführungszeichen hinzugefügt. Diese können jedoch mit CSS-generierten Inhalten hinzugefügt werden. Das Element <q> fügt standardmäßig Anführungszeichen hinzu, wobei sprachspezifische Anführungszeichen verwendet werden.
Im Abschnitt #teachers wird HAL mit den Worten „I'm sorry
Das Inline-Zitatelement <q> fügt sprachgerechte Anführungszeichen ein. Die Standardstile des User-Agents umfassen die generierten Inhalte „open-quote“ und „close-quote“:
q::before {content: open-quote;}
q::after {content: close-quote;}
Das Attribut lang ist enthalten, damit der Browser weiß, dass dieser Absatz in einer anderen Sprache verfasst ist, obwohl die Basissprache der Seite im öffnenden <html lang="en-US">-Tag als Englisch definiert wurde. So 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 Element <q> das Attribut cite.
HTML-Entitäten
Vielleicht ist Ihnen die Escape-Sequenz oder „Entität“ aufgefallen. Da < in HTML verwendet wird, müssen Sie es mit < oder einer weniger leicht zu merkenden Codierung < maskieren. Es gibt vier reservierte Entitäten in HTML: <, >, & und ". Die Zeichenreferenzen sind <, >, & und ".
Einige andere häufig verwendete Entitäten sind © für Copyright (©),™ für Marke (™) und für geschütztes Leerzeichen.
Geschützte Leerzeichen sind nützlich, wenn Sie ein Leerzeichen zwischen zwei Zeichen oder Wörtern einfügen möchten, ohne dass dort ein Zeilenumbruch erfolgt.
Es gibt über 2.000 benannte Zeichenreferenzen.
Bei Bedarf hat jedes einzelne Zeichen, einschließlich Emojis, ein codiertes Äquivalent, das mit &# beginnt.
Wenn Sie sich die Workshop-Rezension von ToastyMcToastface ansehen (nicht im obigen Codebeispiel enthalten), werden Sie einige ungewöhnliche Textzeichen finden:
<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 Blockzitat kann auch so geschrieben werden:
This has no̶̼͖ţ̘h̝̰̩͈̗i̙̪n͏̩̙
͍̱̫̜̟g̢̣ͅ ̗̰͓̲̞̀t͙̀o̟
̖͖̹̕ ͓̼͎̝͖̭dó̪̠͕̜ ͍̱
͎͚̯̟́w̮̲̹͕͈̟͞ìth̢ ̰̳
̯̮͇
Dieser Code enthält einige nicht maskierte Zeichen und einige benannte Zeichenreferenzen. Da der Zeichensatz UTF-8 ist, müssen die letzten Zeichen im Blockzitat in diesem Beispiel nicht maskiert werden. Nur Zeichen, die vom Zeichensatz nicht unterstützt werden, müssen maskiert werden. Bei Bedarf gibt es viele Tools, mit denen Sie verschiedene Zeichen maskieren können. Alternativ können Sie auch einfach dafür sorgen, dass <meta charset="UTF-8"> in <head> enthalten ist.
Auch wenn Sie den Zeichensatz als UTF-8 angeben, müssen Sie das < weiterhin 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 ein Tutorial zu HTML-Entitäten schreiben, müssen Sie < angeben, wenn Sie jemandem beibringen, wie man einen < codiert. 😀
Das Smiley-Emoji ist 😀. Da dieses Dokument als UTF-8 deklariert ist, wird es nicht mit Escapezeichen versehen.
Dein Wissen wird getestet
Testen Sie Ihr Wissen zu Text in HTML.
Wie wird ein Urheberrechtssymbol in HTML angezeigt?
c©©right.Welches Element wird verwendet, um anzugeben, dass es sich um ein Zitat handelt?
<blockquote><quote><cite><cite>-Element wird verwendet, um die Quelle eines Zitats anzugeben, nicht das Zitat selbst.