Layout mit HTML5 für SEO mit semantischem Sinn

Viele Designer verwenden html oder xhtml zum Trennen oder Gruppieren von Elementen in Ebenen mit div. Das Problem ist, dass, wenn wir 50 div haben, die jeweils mit ihrer Klasse getrennt sind, die die Struktur der Webseite definiert, dies für den Designer oder Programmierer sinnvoll ist, aber nicht für die Suchmaschinen, da sie nicht unterscheiden können, was jede Klasse ist, wenn es sich um einen Header handelt , Abschnitt , Artikel, Fußzeile usw.
Vorteil HTML5 vs. XHTMLHTML5 bietet gegenüber herkömmlichem xhtml einen sehr wichtigen Vorteil, nämlich dass es Tags hat, um eine semantische Struktur zu definieren.
Wir nennen das html-Code semantisches html, bei dem die Struktur für Suchmaschinen sinnvoll ist und somit der SEO-Positionierung dient. Es geht darum, dass jede Suchmaschine in der Lage ist, jeden Teil einer Webseite zu verstehen und sogar den gesamten Inhalt zu entfernen.
XHTML hat keine Tags, die es ermöglichen, Gruppen oder Blöcke von Elementen mit semantischem Sinn zu definieren.
HTML5 löst dieses Problem, indem es Elemente und Tags anbietet, die es uns ermöglichen, die Semantik der Webseite zu definieren, einige davon sind unter anderem header, footer, nav, hgroup, section und article.
Als nächstes werden wir die wichtigsten im semantischen Sinne definieren:

• Header: Definieren Sie den Header-Block der Webseite und fügen Sie den Header-Inhalt ein.
• Navi: definiert einen Block, der ein Menü darstellt, daher wissen Suchmaschinen, wenn sie dieses Tag finden, dass es die Navigationsstruktur ist.
• hgruppe: definieren und gruppieren Sie Titel und geben Sie so jedem Titel eine unterschiedliche Bedeutung.
• Rubrik und Artikel: Die vorherigen Elemente, die div>-Ebenen definieren und durch die Abschnitts- und Artikel-Tags ersetzt werden, die bei der Definition von Abschnitten und Artikeln innerhalb der Abschnitte einen semantischeren Sinn haben.
• beiseite: definiert und gruppiert tangentiale Elemente der Webseite. Das heißt, Inhalte, die nicht die Hauptinhalte sind, wie die Seitenspalten oder die Seitenleiste des Webs
• Fusszeile: definiert und gruppiert Elemente in der Fußzeile der Webseite.

Die Verwendung von HTML5 bedeutet nicht, dass XHTML nicht mehr verwendet wird, sie sind immer noch sehr gut darin, die Struktur zu organisieren und Elemente der Webseite zu gruppieren oder Jquery aufzurufen. Denken Sie daran, dass HTML5 dazu dient, ihr einen semantischen Sinn zu geben, aber innerhalb des Blocks können Sie fortfahren um ein anderes XHTML-Tag zu verwenden. Sehen wir uns unten ein Beispiel an

Untertitel
Weblogo

Wir können sehen, dass mit den Ebenen die Struktur definiert wurde und innerhalb der Kopfzeile eine hgroup definiert wurde, um die Titel zu gruppieren, sowie eine Ebene, die das Logo enthält.
So ermöglichen uns die XHTML-Schichten, die Webseitenstruktur zu definieren, um eine bessere Organisation für den Programmierer zu haben, dann hilft uns XHTML, sinnvolle Blöcke für die Struktur zu definieren und HTML5 ermöglicht uns, sinnvolle Blöcke für Suchmaschinen und SEO zu erstellen. Wie das Abschnitts-Tag in HTML5 für SEO verwendet wird.
Die Verwendung des Abschnitts-Tags ist der Verwendung eines div-Layers sehr ähnlich, mit dem Unterschied, dass Abschnitt den semantischen Sinn bereitstellt und alle in Abschnitt eingeschlossenen Elemente mit der Semantik des Webs zusammenhängen. Es ist wichtig, keinen Abschnitt zu verwenden, um Elemente in einem Block zu gruppieren, da wir unsinnige Elemente gruppieren müssen, um CSS-Stile oder einen Programmiereffekt zuzuweisen.
Wenn der Grund für die Erstellung eines Blocks darin besteht, CSS anzuwenden oder ihn aus Code mit einem Skript zu verwenden, dann sollte HTML5 besser nicht verwendet werden, da der Block keinen semantischen Inhalt hat. In diesem Fall müssen wir einen Block mit der div-Schicht von xhtml erstellen. Wie im obigen Beispiel zu sehen ist, macht das Logo für die Verwendung von HTML5 keinen Sinn, da CSS verwendet wird, um das Bild anzuzeigen.
DIV-Ebene oder AbschnittEine Möglichkeit, über die Relevanz jedes Blocks nachzudenken, um festzustellen, ob es sich um einen Div-Layer oder einen Abschnitt handelt, wenn ich der Besucher der Webseite bin. Gibt mir dieser Block nützliche Informationen? Wenn die Antwort ja ist, handelt es sich um einen Abschnitt, wenn nicht um eine Ebene.
Wenn wir das Artikelelement verwenden, definieren wir einen Block mit semantischem Sinn und Inhalt, den Suchmaschinen durchsuchen können. Der Artikel-Tag bezieht sich nicht unbedingt auf eine Textnotiz, sondern kann ein Produkt, Bilder oder ein Formular sein.
Sehen wir uns ein einfaches Beispiel für eine Webseite und ihren Code in HTML5 an:

Honda Civic

Da wir innerhalb des Artikels Ebenen oder Absätze oder andere xhtml-Elemente einfügen können, kann der Inhalt des Webs in einigen Fällen nur einen Artikel enthalten, und für den Fall, dass die Seite Listen oder Kataloge enthält, wie im vorherigen Fall von Autos Online, können wir einen Artikel für jedes gezeigte Produkt und auch eine eigene Kopfzeile, um den Titeln mehr Relevanz zu verleihen.
Wir können auch CSS-Stile auf HTML5-Elemente anwenden, sehen wir uns ein einfaches Beispiel für einen Online-Blog mit HTML5 und CSS3 an.



 
Titel 1
Veröffentlicht am 06. Dezember 2014 von Sergio - 3 Kommentare
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin euismod tellus eu orci imperdiet nec rutrum lacus blandit. Cras enim nibh, sodales ultricies elementum vel, fermentum id tellus. Proin metus Hass, Ultricies eu pharetra dictum, laoreet id Hass …

Titel 2
Gepostet am 1. Dezember 2014 von Sergio - 20 Kommentare
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin euismod tellus eu orci imperdiet nec rutrum lacus blandit. Cras enim nibh, sodales ultricies elementum vel, fermentum id tellus. Proin metus Hass, Ultricies eu pharetra dictum, laoreet id Hass …

Dies zeigt, dass sie nicht nur semantische Elemente sind, sondern auch Teil des Designs und der Struktur der Webseite sein können.
Dieses Element dient dazu, einen sekundären Block innerhalb der Struktur der Webseite zu definieren, es sind Inhalte oder Daten, die wir dem Besucher zeigen möchten, aber es handelt sich nicht um einen Hauptinhalt.
Wir können das Aside-Tag mit den Seitenspalten oder allgemein bekannt als Sidebar verknüpfen, die sekundäre Navigationsmenüinhalte, Links zu anderen Webseiten und Anmeldeformulare enthalten. Wir können auch eine Nebenbemerkung innerhalb eines Artikels erstellen. Das bedeutet, dass die Nebenbemerkung eine Ergänzung zum Artikelinhalt ist, aber kein direkter Teil dieses Inhalts ist, zum Beispiel wenn wir einen Artikel über einige Verkäufe haben und in einer Nebenbemerkung wir Statistiken veröffentlichen .
Erinnern Sie sich schließlich an das Ziel von Layout:
Was ist das Layout einer Webseite?Das Layout einer Webseite dient dazu, das Grafikdesign in HTML-Code zu bringen, wobei CSS jedes entsprechende Element über den Code auf der Webseite findet.Hat dir dieses Tutorial gefallen und geholfen?Sie können den Autor belohnen, indem Sie diesen Knopf drücken, um ihm einen positiven Punkt zu geben