Semantik: Ist HTML/XHTML wirklich standardkonform?
|
<br />Originaltext: http://jorux.com/archives/what-is-semantics/ Semantik lässt sich als Semantik (Wissenschaft) übersetzen und ist ein wichtiger Aspekt bei der Prüfung, ob HTML/XHTML wirklich den Standards entspricht. Jorux ist hier, um einige seiner eigenen Ansichten mit allen zu diskutieren. Wenn etwas Unangemessenes ist, korrigieren Sie mich bitte. Warum legen so viele Menschen im Westen so viel Wert auf die Semantik von Webseiten? Vielleicht werden Sie sagen, dass der Westen regelkonformer ist und Wert auf Standards legt, aber was ich sagen möchte, ist, dass hinter diesen Erscheinungen eine „ unsichtbare Hand “ steckt, die sie kontrolliert. Zur Verdeutlichung meines Standpunkts möchte ich hier das Beispiel einer Navigationsleiste verwenden. Sie haben sicherlich schon viele Navigationsstrukturen wie die folgende gesehen: Home | Über | Blog | Nachricht | Album Sie haben alle eine gemeinsame Funktion: Es gibt einen Trennbalken „|“, um die einzelnen Einträge zu trennen. Um den oben genannten Effekt der Navigationsleiste zu erzielen, gibt es viele Möglichkeiten, HTML/XHTML zu schreiben. Hier sind nur einige typische Beispiele: Beispiel 1: <p><a href=”home.html”>Startseite</a> | <a href=”about.html”>Über</a> | <a href=”blog.html”>Blog</a> | <a href=”message.html”>Nachricht</a> | <a href=”album.html”>Album</a></p> Beispiel 2: <ul> <li><a href=”home.html”>Startseite</a></li> <li>|</li> <li><a href=”about.html”>Über</a></li> <li>|</li> <li><a href=”blog.html”>Blog</a></li> <li>|</li> <li><a href="message.html">Hinterlassen Sie eine Nachricht</a></li> <li>|</li> <li><a href=”album.html”>Album</a></li> </ul> Beispiel 3: <ul> <li><a href=”home.html”>Startseite</a> | </li> <li><a href=”about.html”>Über</a> | </li> <li><a href=”blog.html”>Blog</a> | </li> <li><a href=”message.html”>Hinterlassen Sie eine Nachricht</a> | </li> <li><a href=”album.html”>Album</a></li> </ul> Beispiel 4: <ul> <li><a href=”home.html”>Startseite</a></li> <li><a href=”about.html”>Über</a></li> <li><a href=”blog.html”>Blog</a></li> <li><a href="message.html">Hinterlassen Sie eine Nachricht</a></li> <li><a href=”album.html”>Album</a></li> </ul> Oben finden Sie vier HTML/XHTML-Beispiele für Navigationsleisten zur Erläuterung der Semantik. Beispiel 1 verwendet den Absatz „p“ als semantischen Elementbezeichner der Navigationsleiste (im Gegensatz zu Strukturelementen wie „div“ usw.). Offensichtlich ist ihm ein typischer Fehler unterlaufen, bei dem die Navigationsleiste, die ursprünglich ein Element (eine Liste) war, mit einem Absatz verwechselt wurde. Die Beispiele 2, 3 und 4 verwenden alle ul/li als semantische Elementbezeichner der Navigationsleiste. Der einzige Unterschied zwischen ihnen ist die Position des Trennzeichens „|“ und ob es in HTML/XHTML erscheint. Dank der Existenz von CSS und seiner Fähigkeit, das Erscheinungsbild zu steuern, kann das Erscheinungsbild der obigen vier Beispiele exakt gleich gestaltet werden, ohne dass dies mit bloßem Auge erkennbar ist. Aber das ist nur der Schein. Während Suchmaschinen im Internet immer mehr an Bedeutung gewinnen und XML immer häufiger und wichtiger wird, lesen sie als Roboter nur noch HTML-/XML-/XML-Quellcode, aber kein CSS. Das heißt, sie interessieren sich mehr für die eigentliche Bedeutung Ihrer Webseite als dafür, ob sie gut aussieht oder nicht. Mit anderen Worten: Wenn Sie Ihre Webseiten semantischen Standards anpassen, können diese Roboter Ihre Webseiten besser verstehen, das Ranking Ihrer Website in Suchergebnissen verbessern und größere Vorteile daraus ziehen. Diese unsichtbare Hand bestimmt, welchen Schwerpunkt der Westen auf die Semantik legt, was sogar noch wichtiger ist als die Frage, ob eine Webseite die W3C-Tests bestanden hat. Ich persönlich denke, dass die Bedeutung der Semantik folgende ist: Entfernen Sie CSS und Ihre Webseiten sehen immer noch standardmäßig und leicht verständlich aus. Mit dieser Regel können Sie Ihr bloßes Auge und die Logik des Roboters bis zu einem gewissen Grad in Einklang bringen. Anhand der obigen Theorie ist der Fehler aus Beispiel 1 leichter zu verstehen. Die Schlüsselwörter im Eintrag sind wertvoller als die Schlüsselwörter im Absatz. Warum muss ein Inhalt, der ursprünglich ein Artikel ist, Absätze verwenden? ! Warum ist das Trennzeichen in den Beispielen 2, 3 und 4 so wichtig? Der einzige Unterschied zwischen Beispiel 2 und 3 ist die Position. Da nun kein CSS mehr zur Steuerung des Erscheinungsbilds vorhanden ist, ist der Unterschied im HTML/XHTML-Ausdruck offensichtlich. Die Leser können es ausprobieren. Im Beispiel 2 belegt der Splitter lediglich vier Li-Elemente, so dass aus den ursprünglich fünf Li-Elementen neun werden. So wird beispielsweise aus einem Unternehmen mit fünf Mitarbeitern ein Unternehmen mit neun Mitarbeitern. Die Anteile aller werden um die Hälfte verwässert, und die Bedeutung jedes einzelnen Aktionärs wird sicherlich geschwächt. Noch schlimmer ist, dass es sich bei vier der Aktionäre um die gleichen handelt. Der Roboter erachtet diese vier Anteilseigner (|) möglicherweise als wichtiger und verringert die Bedeutung anderer Anteilseigner (Schlüsselwörter). Wenn wir in Beispiel 3 das Trennzeichen zum Sekretär des ursprünglichen Aktionärs machen, hat dies natürlich keinen Einfluss auf die Wichtigkeit der Schlüsselwörter. Vom Aussehen her ist Beispiel 3 besser als Beispiel 2. In Beispiel 2 nimmt der Trennbalken eine einzelne Zeile ein, was rätselhaft ist. Dann wird in Beispiel 4 kein Trennzeichen verwendet, was semantisch besser ist. Das Aussehen des Trennbalkens lässt sich ganz einfach in CSS durch einen Bildhintergrund realisieren. Zudem nimmt ein einfarbiger Trennbalken wie dieser im gif-Format nur wenige Bytes ein, was die Downloadgeschwindigkeit nicht beeinträchtigt. Oben genanntes sind einige der Erkenntnisse, die Jorux durch die Kommunikation mit Westlern, kombiniert mit Benutzerfeedback, gewonnen hat. Wenn Sie anderer Meinung sind oder Fragen haben, können Sie gern Kritik äußern. Ich hoffe, dass dies die Aufmerksamkeit unserer Freunde auf dem Festland erregt und sie ermutigt, auf die Verwendung und Standardisierung semantischer Elemente wie h1/h2/p/ul/li/blockquote/table zu achten und Strukturelemente wie div nicht zu missbrauchen . Robot ist solchen Elementen nicht sehr nahe. Streng genommen ist beispielsweise nur ein h1 auf einer einzelnen Webseite zulässig, nämlich der Titel Ihrer Webseite. Der Status von h1 in Robot ist nur <title></title> unterlegen. Hinweis: Ich habe vergessen, wann das letzte Update war. Die Update-Geschwindigkeit ist so schnell, dass ich fast aufgeben möchte. Ich dachte, dass solch eine halbtote Website nach und nach in Vergessenheit geraten würde, aber die Zahl der Feed-Abonnements steigt, was mich fragen lässt, ob mit dem Feedburner-Zähler etwas nicht stimmt. Was mich trösten kann, ist dieser Artikel: Schreiben Sie Artikel, keine Blog-Beiträge. Jakob Nielsen, eine Autorität auf dem Gebiet interaktiver Schnittstellen, hat offenbar die Rationalität seines Schneckentempos gefunden. Sie können die Alertbox dieser Person abonnieren. |
<<: CSS3-Flip-Card-Nummern-Beispielcode
>>: Eine dauerhafte Lösung für MySQLs Unfähigkeit, Chinesisch zu erkennen
Artikel empfehlen
Klicken Sie auf den Ankerlink in JS, um reibungslos zu scrollen und die obere Position frei anzupassen
Klicken Sie auf den Ankerlink, um reibungslos zu ...
Von Vue berechnete Eigenschaften
Inhaltsverzeichnis 1. Grundlegende Beispiele 2. B...
Nginx implementiert den Aufbau eines Clusters mit hoher Verfügbarkeit (Keepalived+Haproxy+Nginx)
1. Komponenten und implementierte Funktionen Keep...
Detaillierte Fehlerbehebung bei Docker.service-Startfehlern
Führen Sie den folgenden Befehl aus, um einen Feh...
Beispiel für einen reinen CSS3-Mindmap-Stil
Mindmap Er sieht wahrscheinlich so aus: Die meist...
Teilen Sie 20 hervorragende Beispiele für Webformular-Design
Sophie Hardach Kai von Clyde Quay 37 Ost Seifenkis...
HTML + CSS + JS-Beispielcode zur Nachahmung des Helligkeitsanpassungseffekts von Win10
HTML + CSS + JS imitieren den Helligkeitsanpassun...
Vue implementiert das Senden von Emoticons im Chatfenster
Der spezifische Code zum Senden von Emoticons im ...
Prozessdiagramm für das erste Bereitstellungs-Webprojekt von Tomcat
Legen Sie Ihr eigenes Webprojekt im Verzeichnis w...
Auswahl und Überlegungen zur MySQL-Datensicherungsmethode
Inhaltsverzeichnis 1. rsync, cp Dateien kopieren ...
JS implementiert Layoutkonvertierung in Animation
Beim Schreiben von Animationen mit JS wird häufig...
Fallstudie zu den SQL ROW_NUMBER()- und OVER()-Methoden
Syntaxformat: row_number() über (Partition durch ...
Verwendung des Linux-Befehls „cal“
1. Befehlseinführung Mit dem Befehl cal (Kalender...
Installationsmethode der dekomprimierten Version von MySQL 5.7.18 unter Win7x64
Weiterführende Literatur: Beheben Sie das Problem...