Egal, ob Sie ein Webmaster oder ein Webdesigner sind, es gibt eine Frage, die Sie wahrscheinlich im Laufe der Jahre oft gestellt oder beantwortet haben. Diese Frage lautet: "Wie viele Tags kann ich pro Seite verwenden und wie genau sollte ich sie implementieren? "
Es gibt im Allgemeinen zwei Gründe, warum diese Frage gestellt wird. Die erste und häufigste ist für SEO-Zwecke; Sicherstellen, dass der Inhalt so formatiert ist, dass er die Indexierung der Suchmaschinen unterstützt. Die zweite ist die technische Korrektheit. Sicherstellen, dass das Markup gemäß der entsprechenden W3C-Spezifikation geschrieben wird.
Mit dem Aufkommen von HTML5 hat sich die Antwort auf diese Frage sowohl in Bezug auf SEO als auch in technischer Hinsicht erheblich verändert. Es ist jetzt nicht nur möglich mehrere zu haben Überschriften pro Webseite, die für Suchmaschinen sinnvoll sind, aber in den meisten Fällen ist dies der empfohlene Kurs.
Da die HTML5-Spezifikation jedoch noch nicht so weit verbreitet ist, gibt es noch viele Ratschläge, von denen einige sogar in letzter Zeit geschrieben wurden, basierend auf den Regeln des HTML5-Webdesigns.
In diesem Tutorial werden einige Missverständnisse beseitigt. Wir werden einen detaillierten Blick darauf werfen, was HTML5 bedeutet Verwendung von Tags sowie Möglichkeiten, wie Sie die jetzt verfügbaren Verbesserungen nutzen können, um Webseiten zu erstellen, die semantisch reichhaltiger und strukturierter sind als je zuvor.
Das Pre HTML5 "Single
Tag "Regel
Lange Zeit galt es als eine der Hauptregeln von HTML und SEO, dass jede einzelne Seite einer Site eine haben sollte Überschrift und nur eine. Zusätzlich schreibt die Regel vor, dass dieses Singular gilt Überschrift sollte den Hauptinhalt der Seite bezeichnen.
Diese Regel wurde im Allgemeinen mit dem Ziel verfolgt, Suchmaschinen dabei zu helfen, den Hauptinhalt jeder Seite besser zu verstehen, sodass sie ihre Relevanz für verschiedene Suchausdrücke ermitteln, die Genauigkeit der Suchmaschinen verbessern und somit das Ranking für gut erstellte Websites verbessern können.
Betrachten wir eine Beispiel-Website vor HTML5. In dieser Beispielsite wird der Unternehmensname auf allen Seiten im Kopfbereich angezeigt, auf der Startseite wird eine Beschreibung des Unternehmens angezeigt und in einem anderen Bereich der Website werden Fachartikel veröffentlicht.
Im Folgenden die "Single" Tag "Regel hat die Homepage dieser Website Tags, die im Kopfbereich auf den Namen des Unternehmens angewendet werden, um anzugeben, dass das Unternehmen selbst der Hauptgegenstand dieser Seite ist.
Allerdings in einem Artikel, der an anderer Stelle auf derselben Website veröffentlicht wurde, Tags werden aus dem Unternehmensnamen in der Kopfzeile entfernt und stattdessen auf den Titel des Artikels angewendet. Dies geschieht, weil der Titel des Artikels eine repräsentativere Bezeichnung für den Hauptinhalt der Seite enthält, der jetzt der Inhalt des Artikels ist und nicht die Beschreibung des Unternehmens, das sich auf der Startseite befand.
Eine vor-HTML5-Version dieser Website würde daher wie folgt gekennzeichnet sein:
Warum Überschriften wichtig sind: Dokumentumrisse
Trotz des seit langem starken Fokus auf Tags waren sie nie ein Element, das unabhängig vom Rest des Dokuments isoliert arbeitete. Es gibt einen Grund dafür, wie wichtig die sorgfältige Platzierung von Überschriften-Tags sowohl in der HTML5- als auch in der Vor-HTML5-Epoche ist. Dies ist die Generierung von Dokumentumrisse.
Dokumentumrisse ähneln einem Inhaltsverzeichnis einer Website. Sie werden automatisch aus dem Markup auf einer bestimmten Webseite generiert.
Vor HTML5 wurden Dokumentumrisse aus Ihrer Verwendung von Überschriften-Tags generiert durch zu . Jede Verwendung einer Überschrift würde den Beginn eines neuen Inhaltsbereichs bedeuten.
Nehmen Sie zum Beispiel die folgende HTML-Datei und notieren Sie die Platzierung von , und Tags, die die Gliederung des Dokuments bestimmen:
Beispiel für ein HTML5-Markup
Die richtige Verwendung von Erdnüssen
Wie man Erdnüsse isst
Erdnüsse können mit Salz gegessen werden.
Dies ist eine akzeptable Verwendung von Erdnüssen.
Überlegene Erdnuss-Essmethoden
Erdnüsse sind in Kombination mit Schokolade unendlich viel besser.
Wir empfehlen diesen Ansatz für beste Ergebnisse
Falsche Anwendung von Erdnüssen
Erdnüsse sollten nicht zum Füllen von Parkuhren verwendet werden.
Sie werden in dieser Funktion nicht wirksam sein.
Vor HTML5 würde das obige Markup eine Dokumentgliederung wie folgt generieren:
1. (Dokument) Die richtige Verwendung von Erdnüssen
1. (h2) Wie man Erdnüsse isst
1. (h3) Überlegene Erdnuss-Essmethoden
2. (h2) Falsche Anwendung von Erdnüssen
Der Erste Das Element gilt als Bezeichnung für das gesamte Dokument. Die nachfolgenden Überschriften werden als Beschriftungen für Inhaltsabschnitte in diesem Dokument betrachtet und bilden einen Baum darunter.
Das obige Beispiel ist einfach genug, aber in den wilden Webseiten sind diese selten so einfach. Wenn wir eine komplexere Inhaltsdarstellung benötigen, stoßen wir auf das große Problem mit der Markierung vor HTML5 und der Grund, warum es bisher notwendig war, nur eines zu verwenden Überschrift pro Seite.
Im obigen Beispiel wird ein einziges Thema behandelt: "Die richtige Verwendung von Erdnüssen". Was aber, wenn dieses Thema auf einer Seite mit mehreren Artikeln von gleicher Wichtigkeit behandelt wird, wie Sie es zum Beispiel in einem Blog sehen können??
Nehmen Sie diese HTML-Datei mit einem zweiten Artikel (jeder Artikel ist verpackt)
Stichworte):
Beispiel für ein HTML5-Markup
Die richtige Verwendung von Erdnüssen
Wie man Erdnüsse isst
Erdnüsse können mit Salz gegessen werden.
Dies ist eine akzeptable Verwendung von Erdnüssen.
Überlegene Erdnuss-Essmethoden
Erdnüsse sind in Kombination mit Schokolade unendlich viel besser.
Wir empfehlen diesen Ansatz für beste Ergebnisse
Falsche Anwendung von Erdnüssen
Erdnüsse sollten nicht zum Füllen von Parkuhren verwendet werden.
Sie werden in dieser Funktion nicht wirksam sein.
Kochende Bohnen
Ist das Kochen von Bohnen wirklich wert??
Seien wir ehrlich, es dauert ewig.
Wir empfehlen, stattdessen Dosenbohnen zu kaufen.
Vor HTML5 hätte dieses Markup die folgende Dokumentgliederung erzeugt:
1. (Dokument) Die richtige Verwendung von Erdnüssen
1. (h2) Wie man Erdnüsse isst
1. (h3) Überlegene Erdnuss-Essmethoden
2. (h2) Falsche Anwendung von Erdnüssen
2. (h1) Kochende Bohnen
1. (h2) Ist das Kochen von Bohnen wirklich wert??
Auch wenn zwei Artikel von gleicher Bedeutung auf der Seite sind, wird die Überschrift des ersten Artikels "Die richtige Verwendung von Erdnüssen" immer noch als Etikett interpretiert, das das gesamte Dokument darstellt, einfach weil es das erste ist, dem man begegnet. Dies würde darauf hinweisen, dass der gesamte Inhalt der Seite "Die richtige Verwendung von Erdnüssen" ist, obwohl der zweite Artikel ein völlig anderes Thema ist.
Der typische Weg, um dies zu bekämpfen, war die Schaffung eines Catch-Alls Tags überall dort, wo mehrere gleichwertige Inhaltsbereiche angezeigt wurden, um sie so weit wie möglich darzustellen. Zum Beispiel:
Beispiel für ein HTML5-Markup
Legumliteratur-Blog
Die richtige Verwendung von Erdnüssen
Wie man Erdnüsse isst
Erdnüsse können mit Salz gegessen werden.
Dies ist eine akzeptable Verwendung von Erdnüssen.
Überlegene Erdnuss-Essmethoden
Erdnüsse sind in Kombination mit Schokolade unendlich viel besser.
Wir empfehlen diesen Ansatz für beste Ergebnisse
Falsche Anwendung von Erdnüssen
Erdnüsse sollten nicht zum Füllen von Parkuhren verwendet werden.
Sie werden in dieser Funktion nicht wirksam sein.
Kochende Bohnen
Ist das Kochen von Bohnen wirklich wert??
Seien wir ehrlich, es dauert ewig.
Wir empfehlen, stattdessen Dosenbohnen zu kaufen.
Beachten Sie die Hinzufügung des generalisierten markierte Überschrift und die Herabstufung jeder nachfolgenden Überschrift um eine Ebene.
Die folgende Dokumentgliederung würde jetzt generiert:
1. (Dokument) Legumliteratur-Blog
1. (h2) Die richtige Verwendung von Erdnüssen
1. (h3) Wie man Erdnüsse isst
1. (h4) Überlegene Erdnuss-Essmethoden
2. (h3) Falsche Anwendung von Erdnüssen
2. (h2) Kochende Bohnen
1. (h3) Ist das Kochen von Bohnen wirklich wert??
Probleme aufgrund von Dokumentvorgaben vor HTML5
Dieser Dokumententwurf ist zwar das Beste, was vor HTML5 durchgeführt werden konnte, stellt jedoch einige erhebliche Probleme dar:
Das verallgemeinerte Label für die gesamte Seite verwässert die Relevanz. Wir haben das Tagged "Legume Literature Blog" - Titel, der als Beschriftung für die gesamte Seite fungiert. Der Text dieser Überschrift enthält jedoch nur eine verallgemeinerte Darstellung des Inhalts. Dies verringert die Fähigkeit von Suchmaschinen, das eigentliche Thema auf der Seite zu interpretieren und wiederum deren Relevanz für Suchphrasen.
Separate Artikel werden als Unterabschnitte eines einzelnen Inhalts dargestellt. Es gibt keine Möglichkeit, die beiden Artikel auf derselben Seite als gleichwertige und in sich geschlossene Entitäten zu unterscheiden. Sie werden beide als Teil eines einzigen Inhalts gesehen, auch wenn dies nicht der Fall ist.
In verschiedenen Standortbereichen ist ein anderes Markup erforderlich. Sollte ein Besucher einen der Artikel selbst ansehen, wie dies in einem typischen Blog der Fall ist, müsste das Markup so überarbeitet werden Tags werden anstelle des Site-Titels auf den Titel des Artikels angewendet, wie ich an meiner Beispiel-Business-Website im vorherigen Abschnitt demonstriert habe.
Es gibt Einschränkungen hinsichtlich der Art der Dokumentbeschriftung / des Site-Titels. In vielen Fällen bezieht sich ein Site-Titel (der auch in HTML5 die Rolle der Dokumentbeschriftung spielt) möglicherweise nicht in sinnvoller Weise auf den Inhalt einer Seite. Zum Beispiel könnte ich ein Blog mit dem Seitentitel "Kezz Says" betreiben, in dem ein Artikel über HTML-Codierung und ein anderer über niedliche Welpen angezeigt wird. In diesem Fall wäre es nicht sinnvoll, den Seitentitel als einen dieser Artikel zu interpretieren. Daher müsste ich den Namen meines Blogs ändern. Dies kann insbesondere dann ein Problem sein, wenn eine Website mit einem Namen versehen werden soll, der einprägsam sein kann, aber nicht unbedingt sinnvoll ist.
Hier hilft HTML5, um den Tag zu retten und jedes dieser Probleme zu lösen.
Der HTML5-Dokument-Gliederungsalgorithmus
Wenn Sie die oben beschriebenen Probleme in Betracht ziehen, haben sie alle eine gemeinsame und etwas einfache Wurzel: Die Annahme, dass jede Webseite ein einzelnes Dokument mit einem einzelnen Thema ist, das nur ein einzelnes Etikett erfordert.
Die ebenso einfache Lösung für diese Probleme ergibt sich aus der Möglichkeit, anzuzeigen, ob eine Webseite über separate Abschnitte verfügt, die möglicherweise mehrere Themen mit jeweils eigenen aussagekräftigen Bezeichnungen enthalten.
Wenn Sie festlegen könnten, dass jeder Artikel auf einer Seite separat ist, können Sie sie mit aussagekräftigen Überschriften kennzeichnen, die den Inhalt genau darstellen, und jedem Artikel die gleiche Wichtigkeit zuweisen.
Wenn es möglich wäre, deutlich zu machen, wenn ein Seitentitel nicht für den Inhalt der Seite repräsentativ ist, wäre das Problem der Relevanzverwässerung gelöst.
Mit einem eindeutigen Hinweis anstelle des Unterschieds zwischen dem Site-Titel, den Artikeln und den Artikeltiteln wäre es nicht mehr erforderlich, die Markierung von einem Bereich in einen anderen zu ändern. EIN getaggter Seitentitel konnte seine behalten Tags auf der gesamten Website.
Und weil klar wäre, wenn der Seitentitel nicht den Artikelinhalt auf der Seite darstellt, ist es möglich, ihn auf alles zu setzen, egal wie abstrakt er ist.
HTML5 ermöglicht all dies durch die Einführung seiner semantischen Elemente und des HTML5-Dokumentenkontrollalgorithmus.
Hauptaspekte des HTML5-Dokumentenkontrollalgorithmus
Während die Dokument-Gliederung vor HTML5 ausschließlich aus Überschriften-Tags besteht, verwendet der HTML5-Dokument-Gliederungsalgorithmus die folgenden Hauptaspekte:
Schnittwurzel: Ein Abschnittsstamm ist ein Container, der einen Bereich für die einzelnen Inhaltsabschnitte bietet, die darin definiert werden. Jede Abschnittswurzel erhält ihre eigene individuelle Gliederung. Die oberste Abschnittswurzel einer Seite wird durch ihre gebildet Tags, so dass immer eine Gliederung für jede Webseite erstellt wird, beginnend mit der Tags und das Durcharbeiten der Abschnitte, in die es eingebrochen ist.
Abschnittswurzel-Tags: , , ,
, , ,
Schnittinhalt: Jede Abschnittswurzel ist in eine Reihe von Inhaltsabschnitten unterteilt. Diese Abschnitte werden erstellt, indem abschnittsweise Inhaltselement-Tags um einzelne Teile des Inhalts platziert werden. Inhaltselemente zum Einteilen sind verschachtelbar und semantisch. Der Typ, der verwendet werden sollte, hängt von der Art des Inhalts ab, den er enthalten wird. (Wir werden im Folgenden besprechen, wie Sie die einzelnen Elemente des Abschnitts verwenden.)
Inhalts-Tags unterteilen: , , ,
Überschrift Inhalt: Nur-Text-Labels für Inhaltsbereiche. Wenn keine Inhalts-Tags für Abschnitte vorhanden sind, wird das Vorhandensein eines Überschrift-Tags immer noch als Beginn eines neuen Inhaltsbereichs interpretiert…
Überschrift Tags: , , , , ,
Zu verstehen, wie diese Aspekte von HTML5 verwendet werden, ist relativ unkompliziert und der Prozess verläuft in der Regel wie folgt:
Die Abschnittswurzel des Dokuments wird von seinem gebildet Stichworte.
Innerhalb dieser Abschnittswurzel wird das Dokument in Abschnittsinhalt unterteilt, z. durch Umhüllen von Artikeln mit der Stichworte.
Überschriften-Tags werden nach Bedarf in die Inhaltsabschnitte eingefügt, wobei das erste Überschriften-Tag in einem Abschnitt als Bezeichnung für diesen Abschnitt dient.
Der HTML5-Dokument-Gliederungsalgorithmus hat viele andere Aspekte. Ausführliche Informationen hierzu sind auf W3C verfügbar.
Mit den oben aufgeführten Aspekten können wir jedoch alle im vorherigen Abschnitt dieses Tutorials beschriebenen Probleme lösen.
Lösen der alten Probleme mit dem Dokumententwurf
Werfen wir einen Blick auf unseren "Legume Literature Blog", der mit HTML5 markiert werden könnte. Die folgenden einfachen Modifikationen wurden vorgenommen:
hinzugefügt, um HTML5 aufzurufen
Tags wurden hinzugefügt, die jeden Artikel umschließen und den generischen Code ersetzen
Stichworte
Artikelüberschriften wurden von geändert bis zu Stichworte
Die anderen Überschriften-Tags in jedem Artikel wurden um eine Stufe in Bezug auf Sachleistungen erhöht
Ein gebrandeter / nicht sinnvoller Site-Titel wird verwendet
HTML5-Markierungsbeispiel
Whackamoon Hülsenfrüchte!
Die richtige Verwendung von Erdnüssen
Wie man Erdnüsse isst
Erdnüsse können mit Salz gegessen werden.
Dies ist eine akzeptable Verwendung von Erdnüssen.
Überlegene Erdnuss-Essmethoden
Erdnüsse sind in Kombination mit Schokolade unendlich viel besser.
Wir empfehlen diesen Ansatz für beste Ergebnisse
Falsche Anwendung von Erdnüssen
Erdnüsse sollten nicht zum Füllen von Parkuhren verwendet werden.
Sie werden in dieser Funktion nicht wirksam sein.
Kochende Bohnen
Ist das Kochen von Bohnen wirklich wert??
Seien wir ehrlich, es dauert ewig.
Wir empfehlen, stattdessen Dosenbohnen zu kaufen.
Nun würde uns der HTML5-Dokument-Gliederungsalgorithmus Folgendes geben:
1. (Dokument) Whackamoon Hülsenfrüchte!
1. (Artikel) Die richtige Verwendung von Erdnüssen
1. (h2) Wie man Erdnüsse isst
1. (h3) Überlegene Erdnuss-Essmethoden
2. (h2) Falsche Anwendung von Erdnüssen
2. (Artikel) Kochende Bohnen
1. (h2) Ist das Kochen von Bohnen wirklich wert??
Das erste, was Ihnen auffällt, ist das Aussehen der (Artikel) Element in der Gliederung und daneben die Überschriften für jeden unserer Artikel.
Beachten Sie das in HTML5, Tags werden spezifisch verwendet, um "eine vollständige oder in sich geschlossene" Komposition in einem Dokument, einer Seite, einer Anwendung oder einer Website anzuzeigen, und diese ist im Prinzip unabhängig voneinander vertreibbar oder wiederverwendbar, z. B. bei der Syndizierung Zeitschriften- oder Zeitungsartikel, ein Blogeintrag, ein vom Benutzer übermittelter Kommentar, ein interaktives Widget oder Gadget oder ein beliebiger anderer unabhängiger Inhalt. " (Quelle: W3C)
Das Aussehen der (Artikel) Ein Element neben unseren Artikelüberschriften und nicht die Überschriften-Tags, die wir zuvor gesehen haben, sagt uns, dass diese Dinge jetzt in der Gliederung auftreten:
Jeder Artikel wurde als in sich geschlossener Inhalt mit gleichem Gewicht und Wichtigkeit zueinander erkannt.
Die Artikelüberschriften werden nun korrekt als sinnvolle Beschriftungen zu den Artikeln abgeglichen, die ihren Gegenstand darstellen.
Da die Artikel mit ihren eigenen Überschriften richtig gekennzeichnet sind, wird der Seitentitel nicht mehr als repräsentativ für den Inhalt dieser Artikel interpretiert.
Das bedeutet, dass alle Probleme, die wir zuvor in diesem Tutorial beschrieben haben, sofort gelöst wurden:
Gelöst: Das verallgemeinerte Label für die gesamte Seite verwässert die Relevanz. Wir haben keine Verwässerung mehr von verallgemeinerten Etiketten mehr, da das Etikett jedes Artikels eindeutig damit verbunden ist.
Gelöst: Separate Artikel werden als Unterabschnitte eines einzelnen Inhalts dargestellt. Die Seite wird nicht mehr als ein einzelner Inhalt betrachtet, da das Vorhandensein der Artikel-Tags anzeigt, wo die Seite in unabhängige Abschnitte unterteilt ist.
Gelöst: In verschiedenen Standortbereichen ist ein anderes Markup erforderlich. Weil alle Tags, die im Markup verwendet werden, werden nun korrekt interpretiert, und wir müssen uns keine Sorgen mehr um Labels machen, die die Relevanz verringern, und wir müssen nicht mehr verschiedene Tags auf den Site-Titel anwenden Ebene durchgehend.
Gelöst: Es gibt Einschränkungen hinsichtlich der Art der Dokumentbeschriftung / des Site-Titels. Da der Site-Titel nicht mehr als Etikett für den Artikelinhalt interpretiert wird, können wir ihn beliebig festlegen. Es muss nicht länger als "Catch-All" -Vertreter für den gesamten Inhalt der Seite fungieren. Es kann sich also um einen abstrakten oder gebrandeten Titel handeln, der sich überhaupt nicht auf den Artikelinhalt bezieht.
Warum mehrere?
Tags sind korrekt
Sie können jetzt auch anhand der HTML5-Dokument-Gliederung, die durch unser Markup generiert wird, erkennen, dass es in Ordnung ist, so viele zu verwenden Tags, wie es Ihr Dokument erfordert; das ist eine pro Abschnittswurzel oder Inhaltsabschnitt.
In diesem Beispiel können Sie auch sehen, wie es weniger korrekt wäre, nur einen Satz von zu verwenden Tags in diesem Beispiel und mehrere Sätze von Tags repräsentieren den Inhalt genauer.
Wenn du noch hättest Tags, die nur auf den Site-Titel angewendet werden, und Tags, die auf Ihre Artikeltitel angewendet werden, würden die Gliederung Ihrer Artikel verworfen.
Dies liegt daran, dass Sie Ihre Artikelüberschriften mit markieren Tags, von denen Sie sagen, dass es sich um Überschriften der zweiten Ebene handelt, obwohl sie tatsächlich die Überschriften der ersten Ebene im Geltungsbereich von sind Sektion.
Die Zwischentitel der zweiten Ebene Ihrer Artikel werden wiederum notwendigerweise mit gekennzeichnet Tags, die fälschlicherweise auf Stufe drei gesetzt werden, sind die Überschriften der dritten Stufe mit markiert Tags und so weiter.
Die HTML5-Spezifikation erlaubt die Verwendung von Überschriften niedrigerer Ebene als B. um einen Abschnitt zu beschriften, und manchmal möchten Sie dies zu Präsentationszwecken, z. B. zum Anzeigen einer kleineren Überschrift in einem Seitenleisten-Blogroll-Abschnitt. Ich würde jedoch empfehlen, dies nur für kleinere Bereiche außerhalb Ihrer Artikel- / Inhaltsbereiche zu tun, in denen Überschriftenebenen keine Priorität haben, um eine Dokumentenkontur zu erstellen, die effektiv ein Inhaltsverzeichnis bildet.
In allen Fällen ist es am besten, den Inhalt sorgfältig zu prüfen und den besten Weg für das Beschneiden und Beschriften zu bestimmen, basierend auf dem, was Sie jetzt über den HTML5-Dokumentenkontrollalgorithmus kennen.
HTML5 ist neu
Nutzungsregeln
Ja, es ist wahr. Sie können jetzt so viele Sätze von verwenden Tags, wie erforderlich, über HTML5. Das bedeutet jedoch nicht, dass sie an beliebigen Orten frei hinzugefügt werden sollten.
So wie es Regeln gab Tag-Verwendung, die aus alten Dokumentkonturen stammte, so gibt es jetzt auch neue Regeln, die auf dem HTML5-Dokumentenkontrollalgorithmus basieren.
Hier sind sie auf einen Blick:
Verwenden Sie einen Satz von Tags pro Abschnittsstamm oder Inhaltsabschnitt.
Es sollte immer eine sein Überschrift zwischen der Öffnung Tag und der erste Inhaltsabschnitt, um das gesamte Dokument zu kennzeichnen.
Wenn ein Die Überschrift der Ebene wird zum Beschriften eines Inhaltsabschnitts verwendet. Es sollte die erste Überschrift sein, die in dem Abschnitt angezeigt wird, da die erste Überschrift immer als Beschriftung des Abschnitts interpretiert wird.
Wenn eine Die Überschrift der Ebene wird zum Beschriften eines Inhaltsabschnitts verwendet. Alle anderen Überschriften, die in diesem Abschnitt verwendet werden, müssen H2 oder niedriger sein, um eine genaue Dokumentenkontur zu erstellen.
Wie ich oben erwähnt habe, tun Abschnittskennzeichnungen absolut nicht haben sein Stichworte. Die HTML5-Spezifikation lässt zu, dass jedes Überschriften-Tag als Bezeichnung für einen Abschnitt fungiert durch zu . Ich empfehle jedoch immer wieder zu verwenden Level-Tags zum Markieren von Artikelinhalten.
Wenn Sie sich jedoch für ein anderes Tag als entscheiden Stellen Sie für eine Abschnittsbezeichnung nur sicher, dass Sie die gleichen Regeln wie oben aufgeführt einhalten und ersetzen in jeder Regel mit dem von Ihnen gewählten Tag.
Informationen zum Abschnittieren von Inhaltselement-Tags
Es gibt nur vier Sätze von Element-Tags, mit denen Sie Inhaltsabschnitte auf Ihrer Webseite kennzeichnen können. Diese können jedoch zunächst etwas kompliziert sein.
Sie sind:
Die beiden, die Sie wahrscheinlich am häufigsten verwenden werden, sind und Stichworte. Sie sind einander ähnlich, aber mit einem wichtigen Unterschied.
Tags sollten verwendet werden, wenn ein Inhalt vollständig aus einer Seite entfernt werden kann und dennoch ohne Umgebungsinhalt sinnvoll ist.
Tags hingegen sollten für Inhalte verwendet werden, die nach einem Thema gruppiert sind, jedoch nur im Kontext des umgebenden Inhalts sinnvoll sind.
Ausführliche Beispiele zur Verwendung der einzelnen Tags finden Sie auf den folgenden W3C-Seiten:
Das Artikelelement
Das Abschnittselement
Tags kennzeichnen die wichtigsten Navigationsblöcke auf einer Webseite, z. B. eine Menüleiste oder Seitenumbruch. Sie sollten nicht auf reguläre Links angewendet werden, sondern nur auf wichtige Abschnitte, die ausschließlich der Navigation gewidmet sind.
Tags können als das "alles andere" -Element für Inhalte bezeichnet werden, die weder Artikel noch Abschnitt oder Navigation sind. W3C schreibt dieses Tag für die Verwendung vor, wenn etwas tangential mit dem umgebenden Inhalt zusammenhängt, der jedoch vom Hauptinhalt der Seite (z. B. Seitenleisten, Blogrolls usw.) getrennt ist.
Weitere Informationen zu und Tags besuchen:
Das Nav Element
Das Nebenelement
Schneller Tipp: Umgang mit Taglines
Wir wissen jetzt, dass wir in HTML5 gerne verwenden können Tags auf unseren Website-Titeln in allen Bereichen unserer Websites. Obwohl dies technisch gesehen eine gängige Praxis ist Tags sollten nicht für eigenständige Untertitel oder Schlagzeilen verwendet werden.
W3C hat folgendes zu sagen:
h1-h6-Elemente dürfen nicht zur Markierung von Unterüberschriften, Untertiteln, alternativen Titeln und Taglines verwendet werden, sofern sie nicht als Überschrift für einen neuen Abschnitt oder Unterabschnitt dienen sollen.
W3C
Der Grund dafür ist, dass der HTML5-Dokumentumriss ein Überschriften-Tag immer als Beginn eines neuen Inhaltsbereichs interpretiert, unabhängig davon, ob abschnittsweise Inhalts-Tags eingebunden werden oder nicht.
Für eine Weile gab es eine Umgehung, wodurch Tags können für eine Tagline verwendet werden, wenn sie mit der Hauptüberschrift innerhalb einer Gruppe von gruppiert wurden Stichworte. Jedoch die wird aus der HTML5-Spezifikation entfernt, und die Verwendung von Code schlägt bei der Validierungsprüfung fehl.
Nun ist es am einfachsten, mit Schlagzeilen umzugehen
oder Markieren Sie Tags und wenden Sie CSS an, um sie wie Schlagzeilen aussehen zu lassen und Ihr Präsentationsziel zu erreichen, ohne die Umrisse des Dokuments negativ zu beeinflussen.
Weitere zu verwendende HTML5-Elemente
In diesem Tutorial haben wir uns konzentriert Tags in HTML5 und wie der neue Algorithmus zur Dokumentenkonfiguration funktioniert. Aus diesem Grund habe ich keine HTML5-Elemente berührt, die nicht durch den Algorithmus zur Dokumentenkonfiguration bewertet werden.
Ich wäre jedoch nachlässig, wenn ich Sie nicht in die richtige Richtung auf einige der wertvollsten HTML5-Tags verweisen würde, die Sie in Ihrem Markup verwenden können, um es noch semantischer zu gestalten.
Das Element
Das Element sollte einmal pro Seite verwendet werden, um den Hauptinhaltsbereich dieser Seite anzuzeigen.
Wenn Sie eine Gruppe von Artikeln anzeigen, werden alle diese Artikel umbrochen. Zum Beispiel:
HTML5-Markierungsbeispiel
Whackamoon Hülsenfrüchte!
Die richtige Verwendung von Erdnüssen
Wie man Erdnüsse isst
Erdnüsse können mit Salz gegessen werden.
Dies ist eine akzeptable Verwendung von Erdnüssen.
Überlegene Erdnuss-Essmethoden
Erdnüsse sind in Kombination mit Schokolade unendlich viel besser.
Wir empfehlen diesen Ansatz für beste Ergebnisse
Falsche Anwendung von Erdnüssen
Erdnüsse sollten nicht zum Füllen von Parkuhren verwendet werden.
Sie werden in dieser Funktion nicht wirksam sein.
Kochende Bohnen
Ist das Kochen von Bohnen wirklich wert??
Seien wir ehrlich, es dauert ewig.
Wir empfehlen, stattdessen Dosenbohnen zu kaufen.
Weitere Informationen: Das Hauptelement
Das Element
Das Das Element kann am Anfang eines Abschnittsstammes oder Inhaltsabschnitts verwendet werden, um den einleitenden Inhalt für diesen Abschnitt zu gruppieren.
Sie können es verwenden, um den Site-Titel und den Slogan oder einen Artikeltitel und eine Blog-Kategorie einzugeben. Zum Beispiel:
HTML5-Markierungsbeispiel
Whackamoon Hülsenfrüchte!
Wir waren Luvin Beans
Kochende Bohnen
Kategorie: Mittlere Bohnen
Ist das Kochen von Bohnen wirklich wert??
Seien wir ehrlich, es dauert ewig.
Wir empfehlen, stattdessen Dosenbohnen zu kaufen.
Weitere Informationen: Das Header-Element
Das
Das Element ist im Grunde das Gegenteil von Element, dass es an der verwendet werden kann Ende eines Abschnittsstammes oder Inhaltsabschnitts, um zusätzlichen Inhalt für diesen Abschnitt zu gruppieren.