Ich fordere Webmaster auf Schritt und Tritt dazu auf, so viele strukturierte Daten wie möglich in ihre Inhalte zu integrieren. Da ich immer noch auf Widerstand stoße, habe ich heute beschlossen, den Maschinen auf andere Weise zu erklären, worum es auf unserer Website geht.
Dieses Mal werden wir die Kraft des semantischen Potenzials nutzen, das nicht in exotischen Standards oder ausgefallenen Methoden steckt, sondern in gutem, altmodischem HTML.
Ohne zu zögern lade ich Sie zu einer faszinierenden (aber nicht übertriebenen) Reise durch die weniger bekannten Elemente von HTML ein, die Ihnen unter anderem eine bessere Kommunikation ermöglichen werden. mit Google-Bots.
Ich lasse bewusst die ganz offensichtlichen Elemente weg – konzentrieren wir uns auf die, die weniger bekannt sind oder erst mit HTML 5* eingeführt wurden.
Worüber werden Sie lesen?
- warum Sie den Befehl <auf> nicht verwenden sollten, um Wörter zu unterstreichen
- Sie werden lernen, dass <hr> überhaupt nicht zum Zeichnen horizontaler Linien geeignet ist….
- wie, wo und in welcher Menge Überschriften zu verwenden sind
- Sie lernen 4 Möglichkeiten kennen, wie Sie Text fett und akzentuiert darstellen können – nicht nur <b>!
… und viele mehr
*Ummit einer nicht ganz so interessanten Kuriosität zu beginnen: der Name der Programmiersprache ist HTML5 – zusammengeschrieben. Getrennte Schreibweise: HTML 5, bezieht sich auf die nächste, fünfte Version von HTML. Letztlich beziehen sich beide Versionen auf dasselbe Projekt, und ich habe darauf hingewiesen, dass dies keine besonders interessante Kuriosität ist.
Spis treści
HTML-Semantik und On-Page-Inhalt
Semantik ist ein Thema, das von den Vertretern verschiedener wissenschaftlicher Disziplinen unterschiedlich verstanden wird. Die Semantik in der Suchmaschinenoptimierung stützt sich auf jede dieser Disziplinen:
- In der Linguistik ist die Semantik die Lehre von der Bedeutung von Wörtern, Sätzen und Texten.
- In der Logik ist die Semantik die Wissenschaft von der Beziehung zwischen Zeichen und Wörtern und der Realität.
- In der Informatik ist die Semantik die Definition der Bedeutung von Symbolen in einem Programm
Semantik in der Suchmaschinenoptimierung ist eine Kombination dieser drei Disziplinen; sie ermöglicht die Kommunikation zwischen Mensch und Maschine unter Verwendung von Ausdrücken, die Sinn machen und der Realität entsprechen.
In der Praxis ist semantische Suchmaschinenoptimierung also ein Weg, eine Website so zu optimieren, dass der Inhalt und seine Struktur von allen Dialogpartnern verstanden werden kann. Eine der wichtigsten Möglichkeiten, dies zu optimieren, sind HTML-Elemente, mit denen Sie den Maschinen den Inhalt Ihrer Website erklären können.
<abbr> oder Erklärung von Abkürzungen
Stellen Sie sich vor, dass Sie bei der Erstellung von Inhalten für eine Seite auf eine Quelle verweisen, deren Namen Sie angeben möchten. Unglücklicherweise ist diese Quelle zum Beispiel Die Kommission zur Zukunft der Europäischen Union. Studie über Änderungen im Zusammenhang mit der Einführung der Verkehrsorganisation in gebührenpflichtigen Parkzonen, dem Projekt Mobile Kraków und der Verkehrspolitik der Stadt Krakau*.
*authentisch!
Da 90 % der Nutzer nach dem zweiten Wort aufhören würden zu lesen und Ihre Absprungrate wie die Inflation in Venezuela steigen würde, wäre es eine gute Idee, eine Abkürzung zu verwenden. Um der Suchmaschine jedoch nicht die Möglichkeit zu nehmen, zu wissen, auf wen Sie sich beziehen, können Sie das Element <abbr> verwenden:
Źródło: <abbr title="Komisja ds. Zbadania Zmian w Związku z Realizacją Organizacji Ruchu w Strefach Płatnego Parkowania, Projektu Mobilny Kraków oraz Polityki Transportowej dla Miasta Krakowa">KdsZZwZzRORwSPPPMKoPTdMK</abbr>.
<h1>, <h2>, <h3>, <h4>, <h5>, <h6> d.h. Überschriften
Ich weiß, dass ich eigentlich nur über die weniger bekannten HTML-Tags schreiben sollte, aber es gibt so viele Missverständnisse über Überschriften und SEO, dass es wahrscheinlich an der Zeit ist, zu den Wurzeln zurückzukehren und sich daran zu erinnern, wofür diese unglücklichen Überschriften da sind.
Und sie dienen trotz des gegenteiligen Anscheins nicht dazu, den Inhalt von schlechten SEO-Audits mit irgendetwas zu füllen. Die Überschrift soll Bots (und visuell den Nutzer) über das Design der betreffenden Seite informieren.
Hx-Überschriften sollten wie Elemente eines Buches behandelt werden:
- H1 ist der Titel des Buches
- H2 ist der Titel eines Kapitels des Buches
- H3 ist der Titel eines Unterabschnitts des Buches
- H4 ist der Titel eines Teils des Unterabschnitts
- usw.
Es können beliebig viele H2-H6-Überschriften auf einer Seite verwendet werden, solange sie sinnvoll sind.
Auf die häufig gestellte Frage: Muss die H1-Überschrift nur eine sein? ist meine Antwort immer die gleiche: Sie muss nicht, aber sie sollte es sein.
Dies ist nicht nur meine Meinung, sondern auch eine Empfehlung in der HTML-Dokumentation. Warum?
Um auf die Analogie zum Buch zurückzukommen – H1 ist der „Titel“ unserer Unterseite. Theoretisch könnte das Buch, wenn man darauf bestehen würde, zwei Titel haben. Dies würde jedoch zu unnötiger Verwirrung und Fehlinformationen führen. Wenn Sie darauf bestehen – ok, aber es ist viel logischer, eine H1-Überschrift zu lassen. Die Auswirkungen auf die Suchmaschinenoptimierung sind ohnehin vernachlässigbar.
Was man NICHT mit <hx-Kopfhörern machen sollte>
- keine Stufe überspringen
An oberster Stelle der Hierarchie steht der H1-Tag, und es dürfte Sie nicht überraschen, dass der nächste Tag H2 und nicht etwa H2 ist. H4. Erstellen Sie keine Seiten, auf denen Sie irgendeine Ebene von Überschriften weglassen, da die Struktur und Hierarchie dann unlogisch wird. - Verwenden Sie Überschriften nicht zur visuellen Formatierung des Inhalts
. Wenn Sie z. B. etwas im Inhalt hervorheben wollen, gibt es viele andere HTML-Tags für diesen Zweck, und in Kombination mit CSS können Sie jeden möglichen Effekt erzielen. Verwenden Sie zu diesem Zweck keine Überschriften, da dies die Struktur des Dokuments in der Regel völlig unlogisch macht. - regen Sie sich nicht auf – <h6 > ist die Grenze dessen, was wirtun können
Vielleicht ist es albern, aber ich bin bei Prüfungen auch schon auf solche Wunder gestoßen. H7 wäre bereits eine grobe Übertreibung bei der Anordnung des Inhalts – bedenken Sie, dass HTML-Überschriftenebenen nur eine maximale Anzahl vorsehen. 6 und das ist sicher genug für Sie.
Erwähnenswert ist auch die Positionierung der H1 – H6 Überschriften. Sie sollten innerhalb der Elemente des <Headers> platziert werden, was insbesondere im Hinblick auf die häufig gestellten Fragen zur Positionierung des H1 Headers interessant ist. Mehr dazu schreibe ich weiter unten, im Kapitel
<Kopfzeile> und <Kopfzeile> d.h. völlig unterschiedliche Arten von Kopfzeilen
.
<hr>, die überhaupt keine horizontale Linie ist….
Die interessantesten Fälle im Zusammenhang mit der Hinwendung zur Codesemantik, die die Entwicklung von HTML erlebt hat, sind Elemente wie <hr>.
Jeder, der die Grundlagen von HTML kennt, weiß, dass wir die horizontale Linie mit dem guten alten <hr> zeichnen… FEHLER!
Die Empfehlungen sind unterschiedlich – wenn Sie eine Linie ziehen wollen, um den Text zu verschönern oder besser lesbar zu machen, verwenden Sie CSS.
<hr> ja, es zeichnet eine horizontale Linie in seiner Standarddarstellung, aber dieses Element ist in erster Linie semantisch. Ihr Hauptzweck besteht darin, den Inhalt zu trennen, z. B. bei einem Themenwechsel innerhalb eines Kapitels oder bei einem Wechsel des Handlungsortes im Falle einer Kurzgeschichte.
Wenn wir <hr> so gestalten, dass es unsichtbar ist, wird es für die Maschinen, die unsere Seite lesen, trotzdem einen Unterschied machen.
<em> und <und>, d. h. unterschiedliche Verwendung von Kursivschrift
Hier ein interessanter Fall <em>, oft verwechselt mit dem guten alten <und>. Obwohl die Elemente visuell im Allgemeinen nicht zu unterscheiden sind, haben sie so viel miteinander zu tun wie die Haare von Justin Timberlake mit chinesischen Suppennudeln. Das heißt, abgesehen von einem identischen Erscheinungsbild – nichts.
Lassen Sie uns also ein für alle Mal etwas in Ordnung bringen. Wenn wir etwas kursiv schreiben wollen, verwenden wir:
- <em> wenn wir etwas Wichtiges betonen wollen, z.B.: Das <em>nicht</em> sind Übungen! (dadurch wird das bezeichnete Wort hervorgehoben)
- <und> wenn es sich bei der betreffenden Passage um ein Zitat von etwas Fremdem handelt, z. B. um eine Fachterminologie, einen Satz in einer Fremdsprache oder einen fiktiven Bewusstseinsstrom: Ich dachte mir: <und>Das ist unmöglich!</i>
- <> anführen, wenn Sie eine Quelle zitieren, z. B. den Titel eines Buches oder einer Fernsehsendung
Jedes dieser Elemente im Standardstil des Browsers sieht gleich aus, sagt dem Roboter aber etwas anderes über den Inhalt, den wir präsentieren.
<u> dh. Verwenden Sie es nicht
In den schönen Tagen des einfachen Internets <u> wurde Text hervorgehoben. HTML4 hat diesen Befehl abgeschafft, indem es ihn als veraltet markiert hat. Sie ist in HTML5 zurückgekehrt, aber bereits in einer anderen Anwendung.
Ja, der Text wird immer noch visuell hervorgehoben, aber um einen visuellen Effekt zu erzielen, wird die Verwendung von CSS empfohlen; von <u> wird dringend abgeraten.
Wofür wird dieses Element also verwendet? Nun, das ist schwer zu sagen, denn die einzige Verwendung, die die Dokumentation vorschlägt, ist das Hervorheben von Tippfehlern. Um Himmels willen, ich weiß nicht, wo dies auf einer Website realistischerweise von Nutzen sein könnte. Aber <unter> ist da, es läuft gut, nur sollte man es besser nicht mehr benutzen.
<>, d. h. Unterzeichnung von Zitaten und Quellen
Das Element <cite> ist eine Art Fußnote: Es kann auf Elementen wie <blockquote> verwendet werden, um die Quelle eines zitierten oder freigegebenen Inhalts zu kennzeichnen.
<blockquote> <p>Litwo! Ojczyzno moja! ty jesteś jak zdrowie</p> <footer> Pierwsze zdanie poematu <cite><a href="https://wolnelektury.pl/katalog/lektura/pan-tadeusz.html"><i>Pan Tadeusz</i></a></cite> Adama Mickiewicza. </footer> </blockquote>
<code> dh… Code
Das Code-Element <> ist Ihnen wahrscheinlich bekannt, aber Sie sollten sich darüber im Klaren sein, dass es nicht nur dazu dient, den Inhalt schön zu formatieren, damit sich der eingefügte Quellcode vom übrigen Text abhebt. Das Code-Element <> hat ebenfalls eine semantische Bedeutung und zeigt Robotern an, dass es sich bei dem Inhalt um Computercode handelt.
<Zeit> oder Zeit
<time> ist ein Element, mit dem wir alle zeit- und datumsbezogenen Daten kennzeichnen (z. B. das Datum der Veröffentlichung eines Artikels). <time> kann zusätzlich ein „datetime“-Attribut haben, das das Datum und die Uhrzeit in einem maschinenlesbaren Format enthalten kann.
Das Element <time>kann beschriftet werden:
- Datum:
Post opublikowano <time datetime="2019-07-07">7 lipca</time>
- eine Stunde:
Koncert rozpoczyna się o <time datetime="21:00">21:00</time>
- Dauer:
Pociąg miał opóźnienie <time datetime="PT2H30M">2,5 godziny</time>
<dfn> oder Definition
Element <dfn> bezeichnet den zu erklärenden Begriff, während der Kontext innerhalb des gleichen Abschnitts, Absatzes oder der Liste der Definitionen (<p>, <Abschnitt> oder <dt>/<dd>) wird von den Bots als die Definition des angegebenen Begriffs erkannt.
<p><dfn id="def-validator">Defenestracja</dfn> to akt wyrzucenia kogoś lub czegoś przez okno.</p>
Denken Sie darüber nach – wäre es nicht eine gute Idee, Ihre Schlüsselwörter und deren Erklärung in Form einer Definition aufzunehmen? Just sayin‘ 😉
<kbd> und <samp> d.h. Zuordnung von Eingangs- und Ausgangsdaten
Die Elemente <kbd> und <samp> gehören zu den Dingen, die eigentlich sehr einfach sind, von denen man aber nicht weiß, wie man sie erklären soll. Es ist daher am einfachsten, dies anhand eines Beispiels zu tun:
<p>Naciśnij <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>R</kbd> aby przeładować tę stronę.</p>Drücken Sie Strg + Shift + R, um diese Seite neu zu laden.
<p>Użyj komendy <kbd>format c</kbd> aby sformatować dysk twardy.</p>Verwenden Sie den Befehl format c, um die Festplatte zu formatieren.
Das Element <kbd> markiert daher die Tastatureingabeanweisungen; standardmäßig werden diese Passagen in der Standardschriftart Monospace dargestellt.
<samp> ist ein ähnlicher Befehl, der jedoch das Ergebnis eines Computerprogramms anzeigt, d. h.:
- <kbd> = Eingabe
- <samp> = Ausgabe
<Adresse> oder Kontaktangaben
Das Element <address> ist entgegen seinem Namen nicht nur für die Kennzeichnung von Adressdaten gedacht, sondern kann beliebige Kontaktangaben enthalten.
Es kann in verschiedenen Kontexten verwendet werden – z.B. kann es in der Kopfzeile die Kontaktdaten unseres Unternehmens enthalten, während es im Element <article> auf die Kontaktdaten des Autors des betreffenden Textes verweisen kann.
<blockquote> und <q> d.h. Anführungszeichen
Beide Elemente werden verwendet, um Zitate zu kennzeichnen (und, nebenbei bemerkt, natürlich auch zu stilisieren). Sie können auch das Element <cite> enthalten, um die Quelle anzugeben.
Der Unterschied zwischen den beiden besteht darin, dass <blockquote> zur Kennzeichnung längerer Zitate verwendet wird und einen separaten Abschnitt mit dem betreffenden Zitat erstellt, der es standardmäßig vom restlichen Text trennt.
<q> hingegen ist ein Element, das zur Kennzeichnung kurzer Zitate verwendet wird und standardmäßig inline angezeigt wird, ohne die Kontinuität des Textes zu unterbrechen oder die Zeile im Absatz zu brechen.
<s>, <del> und <ins>, d.h. Löschen und Aktualisieren von Text
Das Element <s> hat das bekannte Element <strike> ersetzt. Kurz gesagt – wir posten den betreffenden Text quer und teilen den Robotern gleichzeitig mit, dass der betreffende Text nicht mehr gültig ist, wir ihn aber auf der Seite belassen wollen.
Etwas komplizierter ist die Verwendung von <del> und <ins>. Dies sind Elemente aus semantischer Sicht, die über gelöschte bzw. hinzugefügte Textfragmente informieren. Und aus der Sicht des Benutzers können sie unterschiedlich genutzt werden; so ist es beispielsweise möglich, sie so zu stilisieren, dass sowohl für den Benutzer als auch für die Maschine deutlich wird, was entfernt und was dem Text hinzugefügt worden ist:
<stark>, <b>, <mark> und wieder <em> Betonung auf Text
Früher war es einfacher, weil wir nur <b> hatten – der Text wurde deutlicher, und alle achteten darauf.
Bevor Sie nun den Text hervorheben, müssen Sie sich genau überlegen, welches HTML-Element aus semantischer Sicht geeignet ist. Das ist nicht einfach.
Also lasst es uns gemeinsam angehen. Vier Befehle, jeder mit einer etwas anderen Absicht, werden verwendet, um die Bedeutung von Textpassagen hervorzuheben:
- <b> ist das Fettdrucken von Text, ohne ihm eine stärkere Bedeutung zu geben, sondern um die Bedeutung in der Präsentation zu erhalten und um die Aufmerksamkeit zu erregen.
Z.B. für einen Produktnamen in einer Rezension, Schlüsselwörter in einer Textzusammenfassung, etc. - <stark> gibt dem Text eine starke Bedeutung, unterstreicht seine Wichtigkeit.
Hervorragend geeignet z. B. für den wichtigsten Satz im gesamten Text oder für die Anzeige von Warnhinweisen - <mark> wählt den Text aus und gibt dabei implizit das CSS-Attribut background-color an.
Semantisch gesehen bezeichnet es einen Text, der eine bestimmte Referenz darstellt, eine für den Kontext der Seite relevante Passage. Das beste Beispiel ist die Markierung <mark> der Teile des Zitats, die unsere These belegen. - <em> – Über dieses Element habe ich bereits geschrieben.
Obwohl sie standardmäßig kursiv dargestellt wird, dient sie semantisch auch dazu, die Bedeutung von Textpassagen hervorzuheben. In diesem Fall geht es darum, z. B. einzelne Wörter zu akzentuieren. So können Sie Wörter markieren, die beim Lesen eines Satzes hervorgehoben werden müssen; eine solche Akzentuierung kann die Bedeutung oder zumindest den Ton eines Textes verändern.
<dl>, <dt> und <dd> d.h. Listen von Definitionen und Begriffen
Eine gute Möglichkeit, die Konzepte aufzulisten und zu erklären, ist das Element <dl>. Damit können wir Bots und Nutzern ein Inventar der wichtigsten Konzepte für unsere Inhalte erstellen und erklären.
- <dl> Liste mit Beschreibungen (entspricht <ul> und <ol>)
- <dt> Begriff, Name, Liste Begriff
- <dd> Beschreibung, Definition des Eintrags in der Liste
<p>Rodzaje SEOwców:</p> <dl> <dt>Leniuszek</dt> <dd>Nie robi nic, ściemnia w raportach.</dd> <dt>Pracoholik</dt> <dd>Blastuje dawno zbanowane domeny.</dd> <dt>Uczciwy i sumienny SEOwiec</dt> <dd>Nie występuje w naturze.</dd> </dl>
Der obige Code wird mehr oder weniger diesen Effekt erzielen:
Arten von SEOws:
- Fauler Mann
- Er tut nichts, er verdunkelt seine Berichte.
- Workaholic
- Sprengt lange gesperrte Domains.
- Ehrliches und gewissenhaftes SEO
- In der Natur nicht zu finden.
<Abbildung> und <Bildunterschrift> d.h. der Inhalt und seine Signatur
<figcaption> und <figcaption> lösen das Problem von Bloggern, die z.B. beim Schreiben über die Symmetrie der Wellenfunktion von Quantenteilchen gerne ein Meme mit der Überschrift MY KOTH zwischen die Absätze werfen. Kennzeichnung von Grafiken als <Abbildung> und, innerhalb dieses Tags, die Unterschriftsmarkierung als <Bildunterschrift> lässt die Werke wissen, dass sich die Signatur direkt auf den enthaltenen <Abbildung> Das Bild und die Interpretation des Textes sollten aus dem normalen Fluss des Textes „herausgelöst“ werden.
tekst tekst tekst
<figure>
<img src="/kotely/kotel.jpg"
alt="Koteł">
<figcaption>MÓJ KOTEŁ</figcaption>
</figure>
tekst tekst tekst
HTML-Semantik und Kennzeichnung von Teilen einer Seite
HTML-Elemente, mit denen wir Maschinen mitteilen können, welche Funktion ein bestimmter Abschnitt unserer Website hat.
<Artikel> oder eigenständige Inhaltseinheit
Der Name Artikel erinnert an einen Artikel auf einer Seite oder zumindest an einen Blogbeitrag, aber das sind nicht die einzigen Verwendungsmöglichkeiten für das Element <article>. Sie kann auch erfolgreich zur Kennzeichnung einzelner Forenbeiträge, Bewertungen, Dateneinheiten usw. verwendet werden.
<Der Artikel> ist daher für jede eigenständige inhaltliche Einheit gedacht, auch wenn es sich nur um ein paar Worte handelt. Es ist wichtig, dass es sich um eine in sich geschlossene Einheit handelt, d.h. dass es theoretisch möglich ist, diese Informationen getrennt vom Rest unserer Website zu verbreiten.
Die Autoren der Mozilla-Dokumentation haben sogar kurz die Wettervorhersage für den Tag als Beispiel genannt:
<article class="day-forecast"> <h2>04 March 2018</h2> <p>Periods of rain.</p> </article>
<article class="day-forecast"> <h2>05 March 2018</h2> <p>Heavy rain.</p> </article>
<Beiseite> d.h. Didaskalien oder Zwischenrufe
Eine sehr nützliche Funktion, vor allem für Blogger, die gerne 3 Cents einwerfen, die wenig mit dem Mainstream zu tun haben. Und wenn der klassische WYSIWYG-Editor von WordPress einen solchen Shortcut hätte und ich kein schuhloser Schuster wäre, würde ich ihn vielleicht sogar benutzen.
Wie auch immer, <beiseite> ist ein Element, das zur Kennzeichnung von Zwischenrufen und Randbemerkungen verwendet wird, die oft visuell an der Seite, in separaten Kästen oder in Seitenleisten platziert werden.
<Fußzeile>
Hier ist das Problem offensichtlich – wir haben es mit einer Fußzeile zu tun, in der wir Informationen über den Autor aufnehmen, das Urheberrecht vorbehalten oder verwandte Inhalte präsentieren können.
Weniger offensichtlich ist, dass es nicht die Fußzeile der gesamten Seite sein muss. <footer> kann für jede Art von Tag verwendet werden, der unsere Seite in Teile unterteilt.
Zum Beispiel, <Fußzeile> direkt unter dem Ende des Tags <Körper> wird die traditionelle Fußzeile auf Websites bedeuten, aber bereits <Fußzeile> im Tag <Artikel> wird die Fußzeile nur für den angegebenen Artikel sein. <Fußzeile> enthalten im Tag <nav> wird die Fußzeile des Navigationsmenüs sein, in <Abschnitt> wird die Fußzeile des betreffenden Abschnitts sein usw.
<Kopfzeile> und <Kopfzeile> d.h. völlig unterschiedliche Arten von Kopfzeilen
Beide Tags beziehen sich auf das, was man als Kopfzeile bezeichnen könnte, beide sind für Bots relevant, und da enden die Gemeinsamkeiten auch schon.
Das Element <head> ist ein grundlegendes HTML-Element, das Informationen für Browser und Bots speichert, die für Benutzer nicht sichtbar sind (z. B. Skripte, Meta-Beschreibung, Stylesheets) oder indirekt sichtbar sind (z. B. Meta-Titel).
Natürlich können wir Dutzende von Informationen einfügen, die für einen Suchmaschinenroboter nützlich sind(hreflangs, canonicale, usw.), aber das sind grundlegende SEO-Dinge, auf die ich hier nicht näher eingehen werde.
Das Element <header> hingegen unterscheidet sich von <head> vor allem dadurch, dass es Elemente enthält, die für den Benutzer sichtbar sind. Dazu gehören z. B. das Logo, das Suchfeld und andere Daten, die wir in den einleitenden Teil unserer Seite aufnehmen wollen.
Die HTML-Spezifikation empfiehlt (schreibt aber nicht vor), dass das Element <header> eine Überschrift (H1-H6) für den Abschnitt enthält, in dem es sich befindet:
<h1>Tytuł</h1> (...) <section> <header> <h2>Nazwa sekcji/rozdziału</h2> Ewentualne inne elementy nagłówka sekcji </header> Treść sekcji </section>Theoretisch sollte daher in den meisten Fällen die H1-Überschrift innerhalb der Hauptüberschrift stehen. <Kopfzeile> unsere Seite – wenn unsere wichtigste (und oft einzige) <Kopfzeile> befindet sich direkt in <Körper>. Dies gilt für die meisten modernen Websites:
<body> <header> <h1>Tytuł</h1> </header> (...) <section> <header> <h2>Nazwa sekcji/rodziału</h2> </header> Treść sekcji </section> (...)
<main> oder main content
Eine sehr nützliche Funktion ist <main>. Sie markiert den Hauptinhalt der Seite (z. B. im Falle eines Blogs den Inhalt des Beitrags selbst), so dass die Maschinen unnötige oder sich wiederholende Elemente wie Seitenleisten, Fußzeilen, Logos, Navigationen usw. „aussortieren“ können.
Bitte beachten Sie, dass das Element <main> nur einmal pro Seite verwendet werden kann.
<main> erweist sich auch für schwer zugängliche Personen, z. B. für Menschen mit Behinderungen, als nützlich. So können sich beispielsweise Leser, die blinden Menschen Webinhalte vorlesen, auf den Inhalt selbst konzentrieren und die Navigationselemente usw. ignorieren.
In diesem Zusammenhang ist auch zu erwarten, dass das Hauptelement <> in naher Zukunft auch für die Sprachsuche nützlich sein wird, so dass Algorithmen und Bots leichter verstehen können, welche Teile unserer Website den Nutzern wirklich wertvolle Inhalte liefern werden.
<nav> oder Navigationselemente
Hier ist die Sache klar – mit <nav> teilen wir dem Browser und Robots mit, dass der angegebene Abschnitt Links zur Navigation enthält.
Diese können verschiedene Formen annehmen – traditionelle Menüs, Breadcrumbs oder Inhaltsverzeichnisse.
Natürlich müssen nicht alle Navigationslinks im Tag <nav> untergebracht werden – dieser ist eher für größere Navigationsblöcke gedacht.
Die Seite kann eine beliebige Anzahl von Elementen enthalten <nav>.
<Abschnitt> oder grundlegende Seiteneinteilung
<Abschnitt> ist ein Element, das einen Abschnitt darstellt, d. h. einen Teil der Seite, der nicht auf andere Weise kategorisiert werden kann (es handelt sich nicht um eine Kopfzeile, Fußzeile, Fußnote usw.).
In der Praxis ist dies eine der häufigsten Unterteilungen einer Seite in thematische Abschnitte. Konventionell sollten Abschnitte eine eigene H1-H6-Kopfzeile haben (vorzugsweise in der <-Kopfzeile platziert – siehe Abschnitt <Kopf> und <Kopf> für völlig unterschiedliche Arten von Kopfzeilen).
Vorteile einer korrekten Semantik in HTML
Falls jemand nicht davon überzeugt ist, dass es sinnvoll ist, sich auf semantisch korrekten Code zu konzentrieren, hier einige Überlegungen dazu:
SEO
Was uns am meisten interessiert. Ich brauche wohl nicht zu erklären, wie wichtig es ist, dass ein Suchmaschinenroboter versteht, was wir ihm mitzuteilen haben. Die Vorteile sind unmittelbar, gegenwärtig und greifbar. Sie werden mit der Weiterentwicklung des Algorithmus noch größer werden. Stellen Sie sich eine Situation vor, in der wir uns praktisch keine Gedanken mehr über das Verhältnis zwischen Code und Inhalt machen, was an dem Tag geschehen wird, an dem der Google-Roboter beginnt, den <main> Tag ernst zu nehmen. Eine schöne Vision, und dies ist nur die erste – die Möglichkeiten für weitere Entwicklungen sind endlos.
Wartung der Website
Als Paradebeispiel für ein Programmierchaos weiß ich, wie undurchsichtiger und verworrener Code jede Bearbeitung, jede Änderung und jede alltägliche Arbeit erschwert. HTML5 und die darin eingeführten semantischen Strukturen erzwingen die Aufrechterhaltung der Ordnung als solche. Die Website ist in übersichtliche Abschnitte unterteilt, die jeweils eine bestimmte Funktion haben. Keine 30-fache Verschachtelung von <div>-s mehr.
Verfügbarkeit der Website
Auch Menschen mit Behinderungen – z. B. Blinde oder Hörgeschädigte – profitieren von den Veränderungen, die sich bei der Entwicklung von Programmiersprachen wie HTML vollziehen. Dank einer geordneten Struktur und einer klaren Kennzeichnung der Funktionen der einzelnen Elemente finden sich z. B. blinde Leser auf der Website besser zurecht und können die tatsächlich relevanten Inhalte besser finden. Wenn Sie jedoch ein verachtenswerter Mensch sind und sich aus irgendeinem Grund nicht darum scheren, dann …
Sprachsuche
… erinnern Sie sich an die Sprachsuche. Ohne strukturierte Daten und ein Verständnis der Codestruktur werden Sie wahrscheinlich nur zufällig in den Ergebnissen der Sprachsuche auftauchen. Aus denselben Gründen wie im vorigen Absatz erleichtert ein semantischer Ansatz für den Aufbau von Websites den Maschinen die Bereitstellung relevanter Informationen von unserer Website. Und anders als es den Anschein hat, handelt es sich nicht nur um Informationen ohne Querverbindungen. 45 % der Millenials“ in den USA nutzen regelmäßig die Sprachsuche für Einkäufe. 11,5 % der Nutzer von Heimlautsprechern verdienen mindestens. einmal im Monat. Schätzungen zufolge wird bis 2020 die Hälfte der Google-Suchanfragen per Sprache erfolgen.
Sie glauben es nicht? Auch an das Handy glaubten nicht alle.
Zusammenfassend
Da es niemand bis hierher geschafft hat, konnte ich schreiben, was ich wollte. Ich werde jedoch schreiben, dass die oben genannten HTML-Elemente unsere Website, ihre Struktur und ihren Inhalt kurz erklären werden.
Wir sollten die HTML-Semantik jedoch nicht als Ersatz für strukturierte Daten betrachten. Dies ist ein guter Ausgangspunkt – wir haben bereits eine übersichtliche und lesbare Website – jetzt springen wir auf schema.org und suchen nach strukturierten Datenmodellen, die zu unserem Inhalt passen.
Und wie immer empfehle ich den Verwirrten und/oder Faulen, sich an mich zu wenden, wenn etwas unklar bleibt.
