Ich glaube, jeder kennt HTML und CSS, kennt die Trennung von HTML-Struktur und CSS-Leistung und kennt die HTML-Semantik. Dies sind in den letzten Jahren beliebte Schlüsselwörter. Semantisches HTML erfreute sich in China erst vor ein oder zwei Jahren großer Beliebtheit. Wenn man sich die HTML-Struktur ansieht, die jetzt in der Gruppe diskutiert wird, und die Interviewfragen zur HTML-Struktur, ist semantisches HTML zum großen Teil ausschlaggebend. Warum also semantisches HTML verwenden? Welche Vorteile bietet semantisches HTML?
HTML stellt die kontextuelle Struktur und Bedeutung des Webdokumentinhalts bereit; HTML selbst hat beispielsweise keine Fettschrift mit der Schriftgröße 2em, und <strong> ist fett Denken Sie, es liegt an der Leistung, das sind eigentlich die Standard-CSS-Stile von HTML. Daher müssen wir zunächst wissen, dass HTML nichts mit der Leistung der Seite zu tun hat, das sind CSS-Angelegenheiten. Die Rolle von HTML in der Seite besteht darin, den Inhalt zu unterteilen.
Die semantische HTML-Struktur muss zunächst die HTML-Struktur hervorheben
Die HTML-Struktur ist wie ein Haus. Die HTML-Struktur besteht aus Wänden aus Stahl und Beton nicht bewohnbar oder beruflich nutzbar. CSS ist ein dekoratives Material, das zum Dekorieren eines Hauses verwendet wird. Wenn CSS keine HTML-Struktur hat, ist es nur ein Haufen Holz Die Bretter sind zusammengestrichen und haben keinen tatsächlichen Gebrauchswert. CSS verlässt sich vollständig auf das (X)HTML-Dokument, das darauf verweist. Wenn Sie die Leistungsfähigkeit von CSS voll ausnutzen möchten, ist es notwendig, HTML mit Inhalten bereitzustellen, die sowohl sauber als auch strukturiert sind. „HTML ist die Verkehrssprache für die Veröffentlichung von Hypertext im Internet … HTML verwendet Tags, um Text zu strukturieren.“ isierung“ ( http://www.w3.org/MarkUp/ ).
Wie schreibe ich eine semantische HTML-Struktur?
HTML ist eine Methode zum Hinzufügen von Struktur und Bedeutung (oder „Semantik“) zu Textinhalten. Es wird uns gesagt: „Diese Zeile ist ein Titel, diese Zeilen bilden einen Absatz. Diese Wörter sind eine Liste von Elementen, und diese Wörter sind ein Hyperlink zu einer anderen Datei im Internet. Es ist erwähnenswert, dass Sie HTML nicht zulassen sollten.“ sagt uns: „Diese Texte sind blau und diese Texte sind rot. Dieser Teil des Inhalts ist die Spalte ganz rechts, und diese Inhaltszeile ist kursiv geschrieben.“ Diese leistungsbezogenen Informationen sind die Aufgabe von CSS. Denken Sie bei der Frontend-Entwicklung daran: HTML sagt uns, was ein Inhalt ist (oder welche Bedeutung er hat), nicht wie er aussieht. Wenn wir von „semantischem Markup“ sprechen, sollte der HTML-Code, über den wir sprechen, vollständig von den Präsentationsinformationen getrennt sein und die darin enthaltenen Tags sollten die Struktur des Dokuments semantisch definieren.
Die semantische HTML-Struktur ist eigentlich sehr einfach. Erfassen Sie zunächst die Semantik jedes Tags in HTML. <strong> dient der Hervorhebung Den Inhalt sehen Wenn Sie darüber nachdenken, welches Etikett ihn besser beschreiben kann, verwenden Sie das entsprechende Etikett.
Welche Vorteile bietet die semantische HTML-Struktur?
Wir wissen, dass HTML5 neue Tags wie <header> und <footer> hat. HTML ist in dieser Hinsicht nicht so fortschrittlich wie HTML5 Der Tod von xhtml2 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 keine Leistung. Wir sehen beispielsweise, dass <h1> fett ist, die Schriftgröße ist 2em, und <strong> ist fett. Dies ist eigentlich nicht die Leistung von HTML .Funktion, daher kann das Entfernen oder Verlieren des Stils dazu führen, dass die Seite eine klare Struktur aufweist, was kein Vorteil der semantischen HTML-Struktur ist. Der Zweck des Standardstils besteht jedoch auch darin, die Semantik besser auszudrücken html. Man kann sagen, dass Browser-Standardstile und semantische HTML-Struktur untrennbar miteinander verbunden sind.
2. Screenreader (wenn der Besucher sehbehindert ist) „lesen“ Ihre Seite vollständig auf der Grundlage Ihres Markups .
Wenn Sie beispielsweise semantisches Markup verwenden, „buchstabieren“ Screenreader Ihr Wort, anstatt zu versuchen, es vollständig auszusprechen.
3. Geräte wie PDAs und Mobiltelefone können Webseiten möglicherweise nicht wie normale Computerbrowser rendern (normalerweise, weil diese Geräte nur eine schwache CSS-Unterstützung bieten).
Durch die Verwendung von semantischem Markup wird sichergestellt, dass diese Geräte Webseiten auf sinnvolle Weise darstellen. Im Idealfall hat das Anzeigegerät die Aufgabe, Webseiten im Einklang mit den Bedingungen des Geräts selbst darzustellen.
Semantisches Tagging versorgt das Gerät mit den relevanten Informationen, die es benötigt, und erspart Ihnen die Mühe, alle möglichen Anzeigeszenarien berücksichtigen zu müssen (auf vorhandenen oder neuen Geräten in der Zukunft). Beispielsweise könnte ein Telefon einen mit einem Titel versehenen Abschnitt anzeigen . Der Text wird möglicherweise in einer größeren Schriftart angezeigt, sobald Sie den Text als Titel markieren. Sie können sicher sein, dass das Lesegerät die Seite entsprechend anzeigt.
4. Suchmaschinen-Crawler verlassen sich auch auf Tags, um den Kontext und die Gewichtung einzelner Schlüsselwörter zu bestimmen.
Früher haben Sie vielleicht nicht daran gedacht, dass Suchmaschinen-Crawler auch „Besucher“ der Website sind, aber jetzt sind sie tatsächlich äußerst wertvolle Benutzer. Ohne sie können Suchmaschinen Ihre Website nicht indizieren, und dann wird es auch so sein Für normale Benutzer ist es schwierig, sie zu besuchen.
5. Es ist sehr wichtig, ob Ihre Seite für Crawler leicht verständlich ist, da Crawler das für die Leistung verwendete Markup weitgehend ignorieren und sich nur auf das semantische Markup konzentrieren.
Wenn daher der Titel der Seitendatei mit einem Tag versehen ist, wird die Seite möglicherweise weiter unten in den Suchergebnissen angezeigt. Semantisches Markup erleichtert nicht nur die Benutzerfreundlichkeit, sondern erleichtert auch die korrekte Verwendung von CSS und JavaScript, da es selbst viele Möglichkeiten bietet. Hook“, um den Stil und das Verhalten der Seite anzuwenden.
SEO basiert hauptsächlich auf den Inhalten Ihrer Website und externen Links.
6. Erleichtern Sie die Teamentwicklung und -pflege
W3C hat einen guten Standard für uns festgelegt. Jeder im Team folgt diesem Standard, der viele differenzierte Dinge reduzieren, Entwicklung und Wartung erleichtern, die Entwicklungseffizienz verbessern und sogar eine modulare Entwicklung erreichen kann .
Wenn Sie andere Meinungen oder Ergänzungen haben, hinterlassen Sie bitte eine Nachricht zur Diskussion.
Vielen Dank an Bruder Gui, Milk Tea, Xiaozhi, Stealing Rice, Caspar und die CSS Forest Group für die Diskussion
Originaltext: http://www.css88.com/archives/1668