Warum sollten wir Tags wie p, span, hx verwenden, wenn wir stattdessen CSS verwenden können?

Warum sollten wir Tags wie p, span, hx verwenden, wenn wir stattdessen CSS verwenden können? Ist es aus SEO-Sicht wichtig?

Die kurze Version ist, dass die verschiedenen Tags und CSS unterschiedliche Zwecke haben.

<h1>Whatever</h1>Zum Beispiel hat es eine gewisse Bedeutung zusammen mit seiner Verwendung: "Dies ist eine Überschrift, eine wichtige - erste Ebene" und so weiter. Einige Parser verwenden auch die hx-Tags (und andere), um eine Gliederung der Dokumentstruktur zu erstellen , die für alle Zwecke von der Datenverarbeitung bis zur Barrierefreiheit verwendet werden kann. .

Sie können die semantischen Tags nicht basierend auf Ihren Möglichkeiten mit CSS schließen und umgekehrt.
Sie können CSS auf ein anderes Tag anwenden, damit es genauso aussieht wie das h1, z. B .: Dadurch wird <span style="font-weight:bold;font-size:2em">Whatever</span>dieses span-Tag jedoch in Bezug auf Funktion und Semantik nicht zu einem tatsächlichen Header . In diesem Fall wäre diese Gliederung, mit der ich oben verlinkt habe, so gut wie unmöglich, da diese Felder keine Überschriften sind, sondern nur ein Text, den Sie willkürlich groß und fett gemacht haben.

Markup und Präsentation sind unterschiedlich

Das ist ein bisschen wie die Frage "Warum sollten wir Wände haben, wenn wir malen?" :)

HTML-Tags kennzeichnen Ihren Inhalt - dies ist eine Überschrift, dies ist eine Liste usw.

CSS gibt an, wie Ihr Inhalt aussehen soll - Überschriften sollten blau sein, Listen sollten so stark eingerückt sein, das Menü sollte sich links befinden usw.

JavaScript legt fest, wie sich Ihre Seite verhalten soll - Animationen usw.

Ohne HTML-Inhalte haben CSS und Javascript also wirklich nichts zu tun.

Diese Kategorien sind nicht zu 100% schwarzweiß - CSS kann beispielsweise jetzt "Übergänge" angeben, die Animationen sind - aber sie sind die Grundidee.

Bitte lesen Sie die vorherigen Diskussionen zu diesem Thema auf StackOverflow hier und hier .

Gutes Markup spart eine Menge Aufwand und funktioniert besser

Wenn Sie möchten, dass sich etwas wie ein Link verhält, können Sie <span class="mylink">eine Reihe von CSS und JS verwenden, um das Erscheinungsbild zu verbessern. Oder Sie können einfach ein <a>Element verwenden und alles kostenlos herunterladen, ohne zusätzlichen Code herunterladen zu müssen, da die Browser bereits wissen, was zu tun ist, und die Logik in schnellem, nativem Code implementiert haben. Außerdem funktioniert es mit größerer Wahrscheinlichkeit bei Bildschirmleseprogrammen, mobilen Browsern, Suchmaschinen, Aggregatoren und anderen Anwendungsfällen, an die Sie nicht gedacht haben.

Aus diesem Grund sollten Sie auch a <button>für anklickbare Aktionen, a <label>zum Beschriften von <input>und a <main>für den Hauptabschnitt Ihrer Seite verwenden.

Wie gut Markup SEO auswirkt

Grundsätzlich geht es bei SEO darum, Suchmaschinen davon zu überzeugen, dass Ihre Inhalte am besten zu einem Suchbegriff passen. Offensichtlich liest niemand bei Google persönlich jede Webseite und bewertet sie.

Damit Suchmaschinen wissen, was Ihr Inhalt ist, muss ein Programm ihn analysieren.

Und hey, schau! Wir haben diese ganze Sprache namens HTML, die Ihren Inhalt so beschriften soll, dass Maschinen ihn verstehen können! :)

Ja, klares Markup hilft Suchmaschinen, Ihre Seiten besser zu indizieren.

Ein extremes Beispiel: Wenn die Überschrift Ihrer Seite tatsächlich ein Foto war, das Sie von einer Zeitungsüberschrift gemacht haben, könnte es interessant aussehen, und die Leute könnten es gut lesen, aber für eine Suchmaschine wäre es nur ein Bild ohne Bedeutung . Während <h1>Turtle Groomer 5000</h1>klar sagt den Suchmaschinen, dass Sie ein Produkt haben, das die Testitudinalhygiene erleichtert.

Denken Sie auch an Menschen mit einer Behinderung, die (als Beispiel) einen Braille-Reader verwenden müssen. In solchen Fällen sind die HTML-Tags von weit größerer Bedeutung als die visuellen CSS-Stile.

Su beantwortete den semantischen Teil. In Bezug auf SEO werden Sie feststellen, dass das Element h1 von Suchmaschinen stärker gewichtet wird als andere Tags. Die Tags h2 / b / strong haben eine etwas höhere Gewichtung als normaler Text.

Die meisten anderen Tags sind ziemlich gleich, aber Sie sollten immer das am besten geeignete Tag für den Job verwenden. Google hat vor kurzem damit begonnen, Tabellen zu analysieren, wenn sie für Tabellendaten verwendet werden. Anderes entsprechend verwendetes HTML kann Signale geben, für die der Inhalt wichtiger ist als für andere.

Bei HTML5 sollten Sie in HTML5 fett und kursiv auschecken .

Zusammenfassung:

Verwenden <b>Sie diese Option, wenn der Text einen anderen Stil ohne kontextbezogene Bedeutung haben soll. Verwenden <strong>Sie diese Option, wenn der Text aus inhaltlicher oder SEO-Sicht eine zusätzliche Bedeutung haben soll.

Verwenden Sie <i>diese Option , um die Stimmung des Texts auszugleichen, aber verwenden Sie <em>diese Option, um den Text hervorzuheben.

Außerdem: Vergessen Sie nicht, wie wichtig die Semantik für Benutzer mit Behinderung ist. Screenreader-Software ist auf diese Semantik angewiesen, um Blinden den erforderlichen Kontext zu präsentieren, den sie aufgrund ihrer Behinderung verpassen.

Erstens <hx>ist es ein ziemlich wichtiges Tag, da es Überschriften definiert, wie andere bereits erwähnt haben. Überschriften sind nicht nur für das Aussehen sehr nützlich, sondern auch, weil sie Abschnitte auf eine Weise trennen, die ein Aussehen nicht kann. Schauen Sie sich zum Beispiel Wikipedia an. Einige Programme sind auf diese Art von Tags angewiesen, um Dokumente "aufzuteilen" oder sogar ein automatisches Inhaltsverzeichnis zu erstellen. Eine Suchmaschine würde davon ausgehen, dass der Text innerhalb eines <h1>Tags wichtiger ist, da es sich um eine Überschrift handelt - einen Titel.

Während Stylesheets großartig sind, ignorieren einige Geräte Stylesheets und konzentrieren sich nur auf HTML, wo ein Tag wie <em>nützlich ist. Wenn Stylesheets deaktiviert waren oder beim Laden ein Problem aufgetreten ist (z. B. Probleme mit der Internetverbindung), wird der Text weiterhin formatiert angezeigt. <em>Ich könnte auch sagen, dass es eine Betonung des Wortes geben soll, während Kursivschrift allein etwas von einem Filmtitel sein kann, um nur eine Bildunterschrift zu erstellen, die sich vom normalen Text unterscheidet. Dies kann von Personen verwendet werden, die Behinderungstools verwenden, bei denen sonst die Betonung im Allgemeinen nicht erreicht wird.

<span>Auf der anderen Seite handelt es sich größtenteils um eine Inline-Version des <div>Tags, und wenn überhaupt, ersparen Sie sich damit die Eingabe einer zusätzlichen Klasse (wenn dies gesagt wird, möchten Sie diese wirklich <span class="italic">statt <i>für jede kursive Instanz verwenden) Es erschwert das Lesen von Code, ist weniger standardisiert (unter der allgemeinen Annahme, dass die Mehrheit der Benutzer den letzteren gegenüber dem ersteren verwenden würde) und verbessert das Dokument in keiner Weise.

<p>Dies ist auch praktisch für Menschen mit Behinderungen, da hierdurch sichergestellt wird, dass der Text auf eine Weise in überschaubare Absätze zerlegt werden <br />kann, die nicht möglich ist.

Sicher, wir können sagen, dass HTML nicht für das Stylen gedacht war, aber es gibt eine feine Grenze zwischen Design und Stil. und ehrlich gesagt würde ich sagen, dass dies eine Benutzerpräferenz ist. Egal, ob Sie <i>oder verwenden <span class="italic">, es liegt an Ihnen und wird für SEO keinen Unterschied machen. Warum beschränken wir uns schließlich auf eine Möglichkeit, Dinge zu tun? (Zum Beispiel, wie wir entscheiden können, ob in JavaScript Semikolons am Ende von Zeilen verwendet werden sollen oder nicht - ich verwende sie immer, während andere sie nie verwenden, und es macht für die Funktionalität überhaupt keinen Unterschied.)