So verstehen Sie die semantische HTML-Struktur_HTML/Xhtml_Webseitenproduktion

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 kontextbezogene Struktur und Bedeutung von Webdokumentinhalten dar. Wir sehen, dass

fett ist , Denken Sie nicht, dass dies tatsächlich die Standard-CSS-Stile von HTML sind. Daher müssen wir zunächst wissen, dass HTML nichts mit der Leistung der Seite zu tun hat. Die Rolle von HTML in der Seite besteht darin, den Inhalt zu unterteilen.

Semantische HTML-Struktur muss zuerst die HTML-Struktur hervorheben

Die HTML-Struktur ist das Grundgerüst der Seite. Die HTML-Struktur besteht aus Wänden aus Stahl und Beton. Wenn ein Haus keine Wände aus Stahl und Beton hat, ist es nur ein Haufen nutzloser Dinge Ziegelsteine ​​und können nicht bewohnt werden, können nicht funktionieren. CSS ist ein dekoratives Material, das zum Dekorieren eines Hauses verwendet wird. Es ist unnötig zu erwähnen, dass CSS keine HTML-Struktur hat aus zusammengestrichenen Holzbrettern, es hat 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, ein 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 zur Ergänzung von Textinhalten mit Struktur und Bedeutung (oder „Semantik“). 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.

ist eine ungeordnete Liste . Warten Sie ... Wenn Sie den Inhalt sehen, überlegen Sie, welche Tags ihn besser beschreiben können, und verwenden Sie die gewünschten Tags.

Was sind die Vorteile der semantischen HTML-Struktur?

Wir wissen, dass HTML5 in dieser Hinsicht neue Tags wie

hat und sich in Richtung einer robusteren und semantischeren HTML-Struktur entwickelt Ein Grund dafür ist 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, und zwar mit einer Schriftgröße von 2em, und fett ist nicht die Leistung von HTML Dies sind eigentlich die Standardwerte von HTML, sodass die Seite eine klare Struktur aufweisen kann, wenn sie entfernt wird. Dies ist jedoch kein Vorteil der semantischen HTML-Struktur Der Zweck des Standardstils besteht auch darin, HTML besser auszudrücken. Man kann sagen, dass der Standardstil des Browsers und die 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. PDAs, Mobiltelefone und andere Geräte können Webseiten möglicherweise nicht wie normale Computerbrowser rendern (normalerweise, weil diese Geräte nur eine schwache Unterstützung für CSS haben). Durch die Verwendung von semantischem Markup wird sichergestellt, dass diese Geräte Webseiten auf sinnvolle Weise rendern. Im Idealfall hat das Anzeigegerät die Aufgabe, Webseiten im Einklang mit den Bedingungen des Geräts selbst darzustellen

Semantisches Markup stellt die relevanten Informationen bereit, die das Gerät benötigt, sodass Sie nicht alle möglichen Anzeigesituationen berücksichtigen müssen (einschließlich vorhandener oder neuer Geräte in der Zukunft). Ein Mobiltelefon kann beispielsweise einen Markup-Titeltext verwenden Wird auf einem Handheld-Computer möglicherweise in größerer Schrift angezeigt, sobald Sie den Text als Titel markiert haben, können Sie sicher sein, dass das Lesegerät ihn entsprechend seiner eigenen Bedingungen liest.

4. Suchmaschinen-Crawler verlassen sich auch auf Tags, um den Kontext und die Gewichtung einzelner Schlüsselwörter zu bestimmen

In der Vergangenheit 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 Normale Benutzer werden sehr traurig sein, 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, kann es sein, dass diese Seite in den Suchergebnissen weiter unten positioniert wird. Semantisches Markup erleichtert nicht nur die Benutzerfreundlichkeit, sondern erleichtert auch die korrekte Verwendung von CSS und JavaScript selbst Bietet viele „Hooks“, um den Stil und das Verhalten der Seite anzuwenden.
SEO hängt hauptsächlich vom Inhalt Ihrer Website und externen Links ab.

6. Erleichtern Sie die Teamentwicklung und -pflege

W3C hat für uns einen guten Standard festgelegt, 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.

Danke an Bruder Gui, Milk Tea, Xiaozhi, Stealing Rice, Caspar und die CSS Forest Group für die Diskussion

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn