Analysieren Sie tief die Semantik von HTML und den damit verbundenen Front-End-Frameworks

In diesem Artikel wird hauptsächlich die eingehende Analyse der HTML-Semantik und des damit verbundenen Front-End-Rahmens vorgestellt. Einfaches HTML hat auch großes Wissen! Freunde, die es brauchen, können sich auf die folgenden Fragen zur Semantik beziehen

Semantik untersucht die Beziehung zwischen Anzeichen und Symbolen und der Bedeutung, die sie darstellen. In der Linguistik untersucht es hauptsächlich die Bedeutung dieser Marker (wie Wörter, Phrasen oder Geräusche) in der Sprache. Im Bereich der Front-End-Entwicklung beinhaltet die Semantik hauptsächlich die Bedeutung, die von HTML-Elementen, Attributen und Attributwerten (einschließlich Erweiterungen wie Microdata) vereinbart wird. Diese in den Spezifikationen üblicherweise verwendeten formalen Konventionssemantik können den Programmen helfen (und diejenigen, die später an der Entwicklung teilnehmen), besser Informationen zu allen Aspekten einer Website zu verstehen. Selbst wenn die Semantik dieser Elemente, Attribute und Attributwerte formalisiert sind, müssen sie dennoch der Anpassungsfähigkeit des Entwicklers und den Ergebnissen ihrer gemeinsamen Wahl unterliegen. Dies ermöglicht es, dass formale Konventionssemantik in Zukunft geändert wird (und dies ist eines der Prinzipien des HTML -Designs).

Nach dem Prinzip des Schreibens semantischer HTML ist eine der Grundlagen der modernen professionellen Front-End-Entwicklung. Die meisten Semantik beziehen sich auf die aktuellen oder erwarteten Inhaltseigenschaften (wie: H1 -Element, Lang -Attribut, E -Mail -Wert des Typs des Typs, Microdata).

Allerdings müssen nicht alle Semantik inhaltsorientiert sein. Klassennamen können nicht semantisch sein. Egal welchen Namen es hat, sie müssen Bedeutung und Zweck haben. Die Semantik der Klassennamen kann sich von diesen HTML -Elementen unterscheiden. Wir können die globale Semantik von HTML -Elementen, bestimmte HTML -Attribute, Mikrodaten usw. verwenden und dann die lokale spezifische Semantik der Website oder Anwendung verwenden, um sie zu unterscheiden. Diese spezifische Semantik sind normalerweise im Attributwert enthalten, wie z. B. das Klassenattribut.

Obwohl diese angenommene Best Practice im Kapitel über Klasseneigenschaften der HTML5 -Spezifikation wiederholt wird ...

… Entwickler werden ermutigt, Klassenattributwerte zu verwenden, um den tatsächlichen Inhalt zu beschreiben, anstatt zu beschreiben, was sie erwarten.

... Es gibt keinen inhärenten Grund dafür. Wenn diese Methode in großen Websites oder Anwendungen angewendet wird, wird sie häufig zu einer Barriere.

HTML -Elemente und andere Attribute liefern bereits die Semantik der Inhaltsschicht

Für Maschinen oder Besucher gibt es nur sehr wenig nützliche semantische Informationen, die der Klassenname enthüllen kann, oder sogar nein. Es sei denn, es ist der kleine Teil des bereits vereinbarten Namens (auch von der Maschine lesbar) - Mircoformats

Der Hauptzweck von Klassennamen ist es, ein Haken für CSS und JavaScript zu sein. Wenn Sie Ihrer Seite keine Leistung und Verhalten hinzufügen müssen, müssen Sie möglicherweise keine Klassennamen zu Ihrem HTML hinzufügen

Klassennamen sollten Entwicklern nützliche Informationen vermitteln. Wenn Sie einen DOM -Snippet lesen, wird dies die spezifische Rolle eines bestimmten Klassennamens verstehen. Insbesondere in Multi-Personen-Kollaborations-Entwicklungsteams sind Front-End-Entwickler nicht nur mit HTML-Komponenten zu tun.

Lassen Sie uns ein sehr einfaches Beispiel geben: