Textgrundlagen

Ähnlich wie im Texteditor, der die Überschriften <h1> bis <h6> sowie zahlreiche Möglichkeiten zur Formatierung von Textabschnitten bereitstellt auf sinnvolle und visuelle Weise bietet HTML sehr ähnliche semantische und nicht-semantische Elemente, um Text sinnvoller verständlich zu machen.

In diesem Abschnitt werden die wichtigsten Methoden zum Auszeichnen von Text bzw. die Grundlagen von Text behandelt. Anschließend werden wir über Attribute sprechen, bevor wir zusätzliche Möglichkeiten zum Auszeichnen von Text, z. B. Listen, Tabellen und Formulare.

Überschriften, noch einmal aufgerufen

Es gibt sechs Abschnittsüberschriftenelemente: <h1>, <h2>, <h3>, <h4>, <h5> und <h6>, wobei <h1> am wichtigsten ist und <h6> am wenigsten. Viele Jahre lang wurde Entwicklern gesagt, dass in Browsern Überschriften zur Gliederung von Dokumenten verwendet werden. Das war ursprünglich ein Ziel, aber Browser haben keine Funktionen implementiert. Nutzer von Screenreadern verwenden jedoch Überschriften, als explorative Datenanalysestrategie verwenden, um mehr über den Inhalt der Seite zu erfahren, indem Sie mit der Taste h durch Überschriften navigieren. Wenn Sie also dass Überschriftenebenen so implementiert werden wie die Gliederung eines Dokuments, um Ihren Inhalt zugänglich zu machen, und wird dennoch sehr gefördert.

Standardmäßig wird im Browser <h1> am größten und <h2> etwas kleiner, wobei die einzelnen folgenden Überschriftenebenen kleiner sind. ist standardmäßig aktiviert. Interessanterweise verringern Browser die Schriftgröße <h1> standardmäßig auch, je nachdem, wie viele <article>, <aside>, <nav> oder <section>-Elemente, in denen es verschachtelt ist.

Einige User-Agent-Stylesheets enthalten die folgenden oder ähnliche Selektoren, um verschachtelte <h1>-Elemente so zu gestalten, als ob sie auf einer weniger wichtigen 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) gibt jedoch weiterhin die Ebene des Elements korrekt an. in diesem Fall „Überschrift, Ebene 1“. Beachten Sie, dass der Browser dies nicht für andere Überschriftenebenen übernimmt. Verwenden Sie jedoch keinen Browserstil, der auf Überschriftenebene basiert. Obwohl Browser unterstützen keine Gliederung, tun dies so, als würden sie dies tun. zeichnen Sie Ihre Inhaltsüberschriften so aus, als ob sie das tun würden. Dadurch wird dein Inhalt für Suchmaschinen, Screenreader und für zukünftige Betreuer (die vielleicht auch Sie sind).

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

Der Abschnitt #about besteht aus einer Überschrift und einigen Absätzen:

Dieser Bereich ist keine Sehenswürdigkeit, da er keinen barrierefreien Namen hat. Wenn Sie dies in eine region umwandeln möchten, also eine Funktion für Sehenswürdigkeiten, können Sie mit aria-labelledby den barrierefreien Namen angeben:

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

Erstellen Sie nur dann Markierungen, wenn und wenn es angebracht ist. Zu viele Orientierungspunkte können für Screenreader-Nutzer schnell verwirrend sein.

Zitate und Zitate

Wenn Sie einen Artikel oder Blogpost auszeichnen, können Sie ein Zitat oder ein Zitat mit oder ohne sichtbare Zitation einfügen. Es gibt Elemente für diese drei Komponenten: <blockquote>, <q> und <cite> für eine sichtbare Zitation oder das Attribut cite um mehr Informationen für die Suche bereitzustellen.

Der Abschnitt #feedback enthält eine Überschrift und drei Rezensionen. Diese Bewertungen sind Blockzitaten, von denen einige Zitate enthalten, gefolgt von einem Absatz mit der Zitation des Zitats. Bei Auslassung der dritten Bewertung aus Platzgründen wird das Markup wie folgt ausgeführt:

Die Informationen zum Autor des Zitats sind nicht Teil des Zitats und daher nicht in der <blockquote>, sondern nach dem Zitat. Obwohl es sich hierbei um Zitate im Grunde des Begriffs handelt, wird nicht auf eine bestimmte Ressource verwiesen. Sie werden daher in ein <p>-Absatzelement eingekapselt.

Die Zitation wird über drei Zeilen hinweg angezeigt, einschließlich des Namens der Person, der früheren Rolle und ihrer beruflichen Ziele. Der Zeilenumbruch für <br> erstellt einen Zeilenumbruch in einem Textblock. Es kann in Anschriften, in Gedichten und in Signaturblöcken verwendet werden. Linie Zeilenumbrüche sollten nicht als Zeilenumbruch für getrennte Absätze verwendet werden. Schließen Sie stattdessen den vorherigen Absatz und öffnen Sie einen neuen. Absätze verwenden für Absätze ist nicht nur gut für die Barrierefreiheit, sondern ermöglicht die Gestaltung. Das <br>-Element ist nur ein Zeilenumbruch. von sehr wenigen CSS-Eigenschaften.

Wir haben Zitationsinformationen in einem Absatz nach jedem Block eingefügt. Die zuvor gezeigten Zitate sind jedoch auf diese Weise codiert, da sie nicht aus einer externen Quelle stammen. Wenn dies der Fall ist, kann (sollte?) die Quelle zitiert werden.

Wenn die Rezension von einer Rezensionswebsite, einem Buch oder einem anderen Werk stammt, kann für den Titel das Element <cite> verwendet werden. einer Quelle. Beim Inhalt von <cite> kann es sich um den Titel eines Buchs, den Namen einer Website oder TV-Sendung oder sogar den Namen eines Computerprogramms. Die Kapselung <cite> kann unabhängig davon verwendet werden, ob die Quelle bei der Übergabe erwähnt wird oder wenn die Quelle zitiert wird oder auf das verwiesen wird. Der Inhalt von <cite> ist das Werk, nicht der Autor.

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

Das Zitationselement <cite> hat keine implizite Rolle und sollte den zugänglichen Namen aus seinem Inhalt erhalten. Sie dürfen kein aria-label einfügen.

Das Attribut cite verwendet als Wert die URL des Quelldokuments oder der Nachricht für die zitierten Informationen, um die Urheberschaft zuzuordnen, wenn Sie den Inhalt nicht sichtbar machen können. Dieses Attribut ist für <q> und <blockquote> gültig. Es handelt sich zwar um eine URL, sie ist zwar maschinenlesbar, aber für den Leser nicht sichtbar:

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

Die meisten Browser fügen sowohl <blockquote>-Inline-Wegbeschreibungen als auch <cite>-Inhalte kursiv hinzu. lässt sich dies mit CSS steuern. <blockquote> fügt keine Anführungszeichen hinzu. Diese können jedoch mit CSS-generierten Inhalten hinzugefügt werden. Das Element <q> fügt standardmäßig Anführungszeichen mit sprachspezifischen Anführungszeichen hinzu.

Im Abschnitt #teachers wird HAL zitiert: „Es tut mir leid, , aber das kann ich leider nicht.“ Der Code dafür im Englischen und Französischen lautet:

Mit dem Inline-Zitat-Element <q> werden sprachgeeignete Anführungszeichen hinzugefügt. Zu den Standardstilen des User-Agents gehören Inhalte, die mit offenen und schließenden Anführungszeichen generiert werden:

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

Über das Attribut lang wird dem Browser mitgeteilt, dass die Basissprache der Seite im öffnenden <html lang="en-US">-Tag als Englisch definiert wurde, dieser Absatz jedoch in einer anderen Sprache ist. Dadurch können bei Sprachbefehlen wie Siri, Alexa und voiceOver die französische Aussprache verwendet werden. Sie informiert den Browser auch darüber, welche Art von Anführungszeichen angezeigt werden soll.

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

HTML-Entitäten

Vielleicht ist dir schon die Escapesequenz oder das „entity“ aufgefallen. Da das < in HTML verwendet wird, musst du es mit < oder einer weniger einfach zu merkenden Codierung < maskieren. In HTML gibt es vier reservierte Entitäten: <, >, & und ". Die Zeichenverweise sind <, >, & und ".

Andere Rechtssubjekte, die du häufig verwendest, sind © für Copyright (©), ™ für Marken (TM) und   für geschützte Leerzeichen. Umbruchsichere Leerzeichen sind nützlich, wenn Sie ein Leerzeichen zwischen zwei Zeichen oder Wörtern einfügen und gleichzeitig einen Zeilenumbruch an dieser Stelle verhindern möchten. Es gibt über 2.000 benannte Zeichenreferenzen. Bei Bedarf hat jedes einzelne Zeichen, einschließlich Emojis, jedoch ein codiertes Äquivalent, das mit &# beginnt.

Wenn Sie sich den Workshop von ToastyMcToastface ansehen (nicht im Codebeispiel oben enthalten), gibt es einige 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 Block kann auch so geschrieben werden:

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

In diesem Code-Chaos gibt es einige nicht korrekt codierte Zeichen und einige Verweise auf benannte Zeichen. Da der Zeichensatz UTF-8 ist, Die letzten Zeichen im Blockzitat müssen eigentlich nicht maskiert werden, wie in diesem Beispiel. Nur Zeichen werden nicht unterstützt Zeichensatzes mit Escapezeichen versehen. Es gibt viele Tools, um verschiedene Zeichen mit Escapezeichen zu versehen. Alternativ können Sie einfach <meta charset="UTF-8"> in <head> aufnehmen.

Auch wenn Sie den Zeichensatz als UTF-8 angeben, müssen Sie < maskieren, wenn dieses Zeichen auf dem Bildschirm angezeigt werden soll. Im Allgemeinen müssen Sie die Verweise auf benannte Zeichen für >, " oder & nicht angeben. Wenn Sie eine Anleitung zu HTML-Entitäten schreiben möchten, müssen Sie < schreiben, wenn Sie jemandem beibringen, wie ein < programmiert wird. 😀

Oh, und das Smiley-Emoji heißt 😀, aber dieses Dokument ist als UTF-8 deklariert, sodass es nicht im Escape-Format angegeben ist.

Wissen testen

Testen Sie Ihr Wissen über Text in HTML.