So verstehen Sie die semantische HTML-Struktur

Ich glaube, jeder kennt HTML und CSS, kennt die Trennung von HTML-Struktur und CSS-Ausdruck und kennt die Semantik von HTML. Dies waren in den letzten Jahren angesagte Schlüsselwörter. Semantisches HTML begann in China erst vor ein oder zwei Jahren populär zu werden. Wenn man sich die HTML-Struktur ansieht, die jetzt in der Gruppe diskutiert wird, nimmt semantisches HTML einen großen Teil der Interviewfragen zur HTML-Struktur ein. Warum also semantisches HTML verwenden? Was sind die Vorteile von semantischem HTML?

HTML stellt die kontextuelle Struktur und Bedeutung des Inhalts eines Webdokuments bereit; HTML selbst hat keinen Ausdruck. Wir sehen beispielsweise, dass <h1> fett ist, mit einer Schriftgröße von 2em, und fett ist; <strong> ist fett. Denken Sie nicht, dass dies der Ausdruck von HTML ist. Tatsächlich ist der Standard-CSS-Stil von HTML am Werk. Zunächst einmal müssen wir also wissen, dass HTML nichts mit dem Ausdruck der Seite zu tun hat. Dies sind Dinge, die CSS tut. Die Funktion von HTML auf einer Seite besteht in der Strukturierung und Bedeutung. Einfach ausgedrückt besteht es darin, den Inhalt aufzuteilen: was hier steht und was wir hier platzieren.

Die semantische HTML-Struktur muss zunächst die HTML-Struktur betonen

Die HTML-Struktur ist das Skelett der Seite. Eine Seite ist wie ein Haus, und die HTML-Struktur sind die Stahlbetonwände. Wenn ein Haus keine Stahlbetonwände hat, ist es nur ein Haufen nutzloser Ziegelsteine, die weder zum Wohnen noch für die Arbeit im Büro genutzt werden können. CSS ist ein dekoratives Material, es wird wie Holzböden, Marmor oder Farbe zur Dekoration von Häusern verwendet. Über die Leistungsfähigkeit von CSS muss man nicht viel sagen. Wenn CSS keine HTML-Struktur hätte, wäre es nur ein Stapel zusammengestrichener Holzbretter und hätte keinen praktischen Wert. CSS ist vollständig abhängig vom (X)HTML-Dokument, das darauf verweist. Wenn Sie das volle Potenzial von CSS nutzen möchten, müssen Sie HTML mit sauberen und strukturierten Inhalten versehen. „HTML ist die Lingua Franca für die Veröffentlichung von Hypertext im Internet ... HTML verwendet Tags, um Text zu strukturieren“ ( http://www.w3.org/MarkUp/ ).

Wie schreibt man eine semantische HTML-Struktur?
HTML ist eine Methode, um Textinhalten Struktur und Bedeutung (oder „Semantik“) zu verleihen. Es sagt uns: „Diese Zeile ist eine Überschrift. Diese Zeilen bilden einen Absatz. Dieser Text ist eine Liste von Elementen. Dieser Text ist ein Hyperlink zu einer anderen Datei im Internet.“ Es ist wichtig zu beachten, dass HTML uns nicht sagen sollte: „Dieser Text ist blau. Dieser Text ist rot. Dieser Teil des Inhalts ist die äußerste rechte Spalte. Diese Inhaltszeile ist kursiv.“ Diese Art von präsentationsbezogenen Informationen ist die Aufgabe von CSS. Denken Sie bei der Front-End-Entwicklung daran, dass HTML uns sagt, was ein Inhalt ist (oder was seine Bedeutung ist), und nicht, wie er aussieht. Wenn wir von „semantischer Auszeichnung“ sprechen, meinen wir HTML, das vollständig von Präsentationsinformationen getrennt ist, und die darin enthaltenen Tags sollten alle die Struktur des Dokuments semantisch definieren.

Die semantische Struktur von HTML ist eigentlich sehr einfach. Zunächst müssen Sie die Semantik jedes Tags in HTML verstehen. <div> ist ein Container; <strong> zeigt eine Hervorhebung an; <ul><li> ist eine ungeordnete Liste usw. Wenn Sie den Inhalt sehen, überlegen Sie, welches Tag ihn besser beschreiben kann, und verwenden Sie das Tag, das ihn beschreibt.

Was sind die Vorteile einer semantischen HTML-Struktur?

Wir wissen, dass HTML mit den neuen Tags, die in HTML5 hinzugefügt wurden, wie <header> und <footer>, in Richtung einer robusteren semantischen HTML-Struktur geht. XHTML2 ist in dieser Hinsicht nicht so weit fortgeschritten wie HTML5, was einer der Gründe für den Tod von XHTML2 ist. Dies zeigt auch, dass die semantische HTML-Struktur der Entwicklungstrend von HTML ist.

1. Wenn der Stil entfernt wird oder verloren geht, kann die Seite eine klare Struktur aufweisen:

HTML selbst hat keinen Ausdruck. Wir können beispielsweise sehen, dass <h1> fett ist, mit einer Schriftgröße von 2em und fett ist; <strong> ist fett. Denken Sie nicht, dass dies der Ausdruck von HTML ist. Tatsächlich sind dies die Standard-CSS-Stile von HTML bei der Arbeit. Daher kann das Entfernen oder Weglassen des Stils dazu führen, dass die Seite eine klare Struktur aufweist, was kein Vorteil der semantischen HTML-Struktur ist. Allerdings haben alle Browser Standardstile. Der Zweck des Standardstils besteht darin, die Semantik von HTML besser auszudrücken. Man kann sagen, dass der Standardstil des Browsers und die semantische HTML-Struktur untrennbar sind.

2. Bildschirmleseprogramme (wenn der Besucher sehbehindert ist) „lesen“ Ihre Seite vollständig auf Grundlage Ihrer Markierungen .

Wenn Sie beispielsweise eine semantische Auszeichnung verwenden, wird der Bildschirmleser Ihr Wort „buchstabieren“, anstatt zu versuchen, es auszusprechen.

3. PDAs, Mobiltelefone und andere Geräte können Webseiten möglicherweise nicht wie gewöhnliche Computerbrowser darstellen (normalerweise, weil diese Geräte CSS nur unzureichend unterstützen).

Durch die Verwendung semantischer Markierungen wird sichergestellt, dass diese Geräte die Webseite auf sinnvolle Weise darstellen. Im Idealfall ist das Anzeigegerät dafür zuständig, die Webseite auf eine Weise darzustellen, die mit den nativen Fähigkeiten des Geräts übereinstimmt.

Semantische Markierungen liefern dem Gerät die relevanten Informationen, die es benötigt, und ersparen Ihnen die Berücksichtigung aller möglichen Anzeigesituationen (einschließlich vorhandener und zukünftiger Geräte). Ein Mobiltelefon kann beispielsweise einen als Überschrift markierten Textabschnitt fett anzeigen. Ein PDA kann ihn in einer größeren Schriftart anzeigen. So oder so: Sobald Sie den Text als Überschrift markiert haben, können Sie sicher sein, dass das Lesegerät die Seite entsprechend seinen eigenen Bedingungen richtig anzeigt.

4. Auch die Crawler der Suchmaschinen nutzen Tags, um den Kontext und die Gewichtung einzelner Keywords zu ermitteln.

Früher haben Sie Suchmaschinen-Crawler vielleicht nicht als „Besucher“ Ihrer Website betrachtet, aber jetzt sind sie tatsächlich äußerst wertvolle Benutzer. Ohne sie können Suchmaschinen Ihre Website nicht indizieren, und dann wird es für normale Benutzer schwierig, sie zu besuchen.

5. Es ist sehr wichtig, dass Ihre Seite für Crawler leicht verständlich ist, da Crawler das für die Präsentation verwendete Markup weitgehend ignorieren und sich nur auf das semantische Markup konzentrieren.

Wenn der Titel eines Seitendokuments statt mit markiert ist, wird die Seite in den Suchergebnissen möglicherweise niedriger eingestuft. Neben der Verbesserung der Benutzerfreundlichkeit erleichtert die semantische Markierung die korrekte Verwendung von CSS und JavaScript, da sie viele „Ansätze“ zum Anwenden des Stils und Verhaltens der Seite bietet.
SEO hängt hauptsächlich vom Inhalt Ihrer Website und von externen Links ab.

6. Einfach für Teamentwicklung und Wartung

W3C hat für uns einen sehr guten Standard festgelegt. Wenn jeder im Team diesen Standard befolgt, können wir viele Unterschiede reduzieren, Entwicklung und Wartung vereinfachen, die Entwicklungseffizienz verbessern und sogar eine modulare Entwicklung erreichen .

Sollten Sie anderer Meinung oder Ergänzungen sein, hinterlassen Sie bitte eine Nachricht zur Diskussion.

Danke an Guige, Milk Tea, Xiaozhi, Toufianmi, Caspar und CSS Forest Group für die Diskussion