Semantik und Syntax HTML?
Syntax eines Elements und Semantik eines Elements.
Wo liegt der Unterschied (HTML/CSS).
2 Antworten
Semantik lässt sich mit Bedeutungslehre übersetzen. In HTML-Dokumenten geht es darum, Inhalte sinnvoll mit Metainformationen zu beschreiben. Wenn man beispielsweise Tags wie h1 oder h2 verwendet, sollen diese ganz klar Überschriften darstellen. Es geht hierbei nicht um die visuelle Darstellung, sondern um die Priorisierung / Einordnung der Inhalte.
Ich verwende in diesem Zusammenhang gern folgendes Beispiel: Angenommen, ein Programm sollte einem blinden Menschen einen Text vorlesen, der mittels HTML mit Metainformationen ausgestattet wurde. Anhand der Tags könnte das Programm entscheiden, wie es die Inhalte vorliest. Nach Überschriften könnte es bspw. eine kleine Pause lassen oder bei einem strong-Tag könnte es dessen Inhalt mit einem Nachdruck in der Stimme vorlesen.
Wenn der Autor des HTML-Dokuments aber bei seiner Tag-Auswahl nur auf die visuelle Repräsentation des Browsers schauen würde, könnte es schnell verquer gehen. Angenommen, er nutzt h1, h2, ... nur dazu, um Text groß darzustellen oder Tabellen, um seine Elemente auf der Seite zu positionieren, würde das Vorleseprogramm die Daten an seinen Zuhörer nicht so wiedergeben, so wie sie eigentlich gedacht waren.
Dieses Beispiel hat im Übrigen auch wirkliche praktische Relevanz, denn beispielsweise Menschen mit Beeinträchtigung des Sehvermögens nutzen meist Screenreader, um sich Informationen von Webseiten zu beziehen. Ansonsten sind auch Crawler von Suchmaschinen daran interessiert, die Daten von Webseiten einzulesen und entsprechend einzuordnen.
Bei der Syntax wiederum bezieht man sich auf die Grammatik der HTML-Elemente. Regeln legen fest, wie Elemente aufgebaut sind (Beispiel: Tags werden von spitzen Klammern gruppiert), welche Attribute sie beinhalten dürfen oder welche Kindelemente (in welcher Reihenfolge).
Um noch auf den Semantikbegriff bei CSS einzugehen: In diesem Fall bezieht man sich eher darauf, wie Klassen- oder ID-Selektoren benannt werden.
Ein Beispiel-Snippet:
<div class="product-item"><!-- ... --></div>
<div class="red bold"><!-- ... --></div>
Bei der ersten Box wird ein Klassenselektor gesetzt, der die Bedeutung des Elements zusätzlich beschreibt. Wenn man es liest, weiß man: Diese Box wird irgendein Produkt darstellen.
Die zweite Box hingegen verwendet Klassen, die sich nicht so sehr auf den Inhalt des Elements / dessen Bedeutung beziehen, sondern auf dessen visuelle Repräsentation.
Man hat hier also einen semantischen und einen nicht-semantischen Ansatz. Ersterer hat den Vorteil, sich nur auf bestimmte Modultypen zu beziehen und das Element zusätzlich zu beschreiben. Sie sind leicht lesbar und einfacher auffindbar. Wenn du einen Fehler bei einer Produktbox hast, wirst du den Fehler wohl schnell finden.
Der nicht-semantische Ansatz hingegen baut auf dem Konzept, Styles möglichst oft wiederverwenden zu können. Das kann deinen CSS-Code später sehr verkürzen. Allerdings ist die Wahrscheinlichkeit, dass du bei Änderungen Regressionen einbaust, größer und Fehler somit nicht immer leicht behebbar.
Wenn du via Google etwas recherchierst, wirst du sicherlich auf diverse Blogartikel stoßen, die sich dem Thema noch näher mit pro-kontra-Argumenten widmen.
Nur mit dem Aufbau. Vergleichbar mit der Regelsammlung für die Rechtschreibung von Deutsch, Englisch, ...
semantik, wie das wort sagt ist die bedeutung, dabei schreibst du alles korrekt so wie es die vorgabe (syntax) es zeigt.
ergo ist ein bild tag dazu da ein bild darzustellen
schreibst du etwas falsch, also hälst du dich nicht an die vorgabe bzw formale regel , dann hast du einen syntax fehler.
bei einem syntax fehler machst du also irgendwas so falsch das der browser nicht richtig arbeitet bzw es nicht richtig verstehen kann .
ergo der bild tag kann nicht korrekt interpretiert werden und der code wird fehlerhaft.
css hat nix mit semantik zu tun sondern mit der ansicht bzw darstellung, aber auch css kann man falsch schreiben und ein syntax fehler erzeugen.
kurz : html semantik meint hier kommt ein bild , css wäre dann die position und darstellung eines bildes. machste fehler beim schreiben im code so das er falsch gelesen wird ist es ein syntaxfehler
okay Semantik habe ich verstanden also ist Syntax legiglich der Aufbau des Elements heißt also damit ist nicht gemeint wie es aussieht weil hier ein Beispiel Strong und bold sehen gleich aus nur das mit Strong etwas hervorgehoben werden will das wäre ja dann eine Semantik Element und Bold ist ja dann für das Design zuständig deswegen dachte ich Syntax? Also hat Syntax nichts mit dem Design zutun sondern einfach nur mir dem Aufbau ?