Was ist der unterschied zwischen logischen, physischen und semantischen Auszeichnungen in HTML?

Bei einer physischen Auszeichnung wird vorgegeben, wie eine Information visuell dargestellt werden soll.

Ein typisches Beispiel für eine physische Auszeichnung wäre das u-Element.

<u>Unterstrichener Text</u>

Es gibt klar vor, wie die Information dargestellt werden soll. Für eine korrekte Darstellung muss das interpretierende Programm dann aber auch solche Formatierungen unterstützen. Das damalige blink-Element (welches seinen Inhalt blinken ließ) wurde bspw. nicht von jedem Browser unterstützt.

Bei einer logischen Auszeichnung hingegen werden Aussehen und Aussage voneinander getrennt. Die interpretierende Instanz (also z.B. dein Browser) entscheidet, wie sie die Auszeichnung (standardmäßig) interpretieren soll.

Ein typisches Beispiel für eine logische Auszeichnung wäre das strong-Element.

<strong>Wichtig</strong>

Es vermittelt nur die Bedeutung seines Inhalts (in diesem Fall, dass dieser extra betont / mit Nachdruck aufgefasst werden sollte), aber überlässt die Entscheidung, wie es visuell dargestellt werden soll, dem interpretierenden Programm. Programm A könnte also die Entscheidung getroffen haben, solche Elemente stets gelb zu färben und Programm wiederum schreibt die Buchstaben einfach mit einer höheren Schriftstärke.

Welches konkrete HTML-Element als logisch oder physisch einzustufen ist, kannst du dir bspw. auf MDN anlesen.

--

Als semantische Elemente werden die Elemente aufgefasst, die eine klare Bedeutung haben / ausdrücken. Ein Beispiel dafür wäre das nav-Element. Der Name verrät schon sehr eindeutig, dass es Navigationselemente beinhalten soll.

Nichtsemantische Elemente hingegen verraten nicht explizit, welchen Inhalt sie beherbergen. Als Beispiele seien hier div und span genannt. Ob in ihnen nun ein Bild liegt, sie wie ein article-Element einen für sich geschlossenen Inhalt anzeigen oder aber wie ein footer-Element einen bestimmten Teilbereich der Seite darstellen sollen, ist unbestimmt.