Detaillierte Erklärung der Semiotik in Html/CSS

Basierend auf Theorien wie Saussures Sprachphilosophie argumentiert dieser Artikel, dass das Klassenattribut in CSS unnötig ist.

Der Vorteil von CSS besteht darin, dass HTML-Elemente in verschiedenen Stilen gestaltet werden können, ohne auf Klassenattribute angewiesen zu sein. Dieser Artikel versucht zu beweisen, dass Klassenattribute veraltet und für das Layout nicht geeignet sind. Der Verzicht auf Klassen kann uns beibringen, brauchbarere und wiederverwendbarere Inhalte zu erstellen.

Was passiert, wenn zwei Elemente desselben Typs ähnlich sind, wenn sie im selben Kontext auftreten?

Saussures Verständnis von Sprache als System basiert auf zwei grundlegenden Beziehungen: Paradigma und Segment (Aggregat und Komposition):

Paradigma

Ein Paradigma ist eine Gruppe von Wörtern, die funktionale Ähnlichkeiten, aber subtile oder radikale Unterschiede in der Bedeutung aufweisen. Beispielsweise „die Krabbe ist neben dem Hummer“. Das Wort „befindet sich“ gehört zu einem Paradigma von Substitutionswörtern und kann sich auch auf „ruhen bei“, „hocken bei“ und „stehen bei“ beziehen, was eine Substitutionsbeziehung darstellt.

Im Englischen gibt es bestimmte Regeln für die Ersetzung: Verben können nicht durch Substantive ersetzt werden, und in HTML können Inline-Elemente (die ein Aktionsverb wie Inline darstellen) nicht immer durch Blockelemente (Substantive) ersetzt werden.

Segment

Ein Absatz ist grundsätzlich ein Struktursegment, das aus paradigmatischen Entscheidungen besteht. Im Englischen sind Sätze, Absätze, Kapitel und Bücher allesamt Segmente. In HTML kann ein Codeblock, der aus Elementen Ihrer Wahl besteht, als Absatz betrachtet werden.

Jedes Segment hat sein eigenes semantisches System und kleinere Segmente können zu größeren Segmentsystemen gehören, so wie ein Absatz zu einem Kapitel gehören kann.

Nützlichkeit?

Saussures Sprachmodell kann Terabyte an Romanen, Prosa, Essays und Theaterstücken erkennen oder schreiben, ohne dass neue Wörter erfunden oder alte neu definiert werden müssen. Wenn dieses Modell für natürliche Sprachen wie Englisch gut genug ist, dann sollte es auch für einfache Metasprachen wie HTML gut genug sein. Natürlich werden mit der Zeit neue Wörter geprägt, so wie langsam neue Elemente in die HTML-Spezifikation eingeführt werden, aber dies geschieht durch sorgfältige Überlegung und Konsens. Für Kurse gibt es kein solches Zulassungsverfahren.

Das Saussure-Modell lässt uns viel Raum für Eleganz und Erfindungsreichtum und bewahrt uns davor, die falschen Entscheidungen zu treffen. Indem wir die Elemente unseres Dokuments auf Grundlage ihres Inhalts sowie ihres Was und Wo gestalten, wird es äußerst schwierig, den Benutzer in die Irre zu führen oder zu verwirren. Wir haben lediglich CSS verwendet, um die inhärente Struktur der Seite anzuzeigen.

Die Bedeutung des Kontextes

Aus semiotischer Sicht ist der einzige wirkliche Unterschied zwischen zwei ähnlichen Dingen vielleicht ihr Kontext: die Umgebung, in der sie sich befinden. Die Ureinwohner Englands und Frankreichs sind genetisch ähnlich, aber kulturell unterschiedlich. Aufgrund ihres nationalen Hintergrunds unterscheiden sie sich in vielerlei Hinsicht.

Das folgende HTML/CSS:

<font><i>// HTML:</i></font><font>

<Artikel>
   <h1 <b>class</b>=</font><font>"main-title"</font><font>>Artikeltitel</h1>
   <beiseite>
      <h1 <b>class</b>=</font><font>"main-title"</font><font>>Nebentitel</h1>
   </aside>
</Artikel>

</font><font><i>// CSS:</i></font><font>
.Haupttitel {
   Schriftgröße: 30px;
}
</font>

Durch Erstellen der Klasse .main-title haben wir einen Übersetzer erstellt, der uns dabei hilft, alle Überschriften der obersten Ebene einfach ähnlich zu gestalten. Allerdings sind die beiden Überschriften h1 in unserem Beispiel nicht ähnlich. Wer den HTML5-Parser versteht, weiß, dass die eine Überschrift h1 zur Nebengruppe gehört, während die andere Überschrift h1 direkt zum Artikel gehört. Welche dieser beiden Beziehungen ist die wichtigste?

Gehört direkt zum Artikel:

<Artikel>
   <h1 <b>class</b>=<font>"main-title"</font><font>>Artikeltitel</h1>
</font>

Gehört direkt zu nebenbei, nebenbei gehört zum Artikel:

<Artikel>
   <h1 <b>class</b>=<font>"main-title"</font><font>>Artikeltitel</h1>
   <beiseite>
      <h1 <b>class</b>=</font><font>"main-title"</font><font>>Nebentitel</h1>
</font>

Der Parser behandelt die nebenstehende Überschrift h1 als bloße Unterüberschrift, die nach der ersten Überschrift kommt.

Die Klasse in diesem Beispiel ist redundant: Wir hätten das Stilattribut h1 verwenden können, um den Stil des Elements beispielsweise auf „Schriftgröße: 30px“ festzulegen. Der Schlüssel liegt darin, dass wir, wenn wir die beiden Elemente kontextbasiert unterscheiden, den Kontext durch die Verwendung eines abgeleiteten Selektors unterscheiden können: „abgesehen von h1“. Dann bindet sich CSS an die Struktur von HTML (abgesehen von h1 ist eine Struktur, h1 gehört zum kleinen Absatz, „abgesehen“ gehört zum großen Absatz, der kleine Absatz h1 ist im großen Absatz „abgesehen“ enthalten) und das Erscheinungsbild des Elements entspricht seiner berechneten Bedeutung.

Modularität und Portabilität

Die Methode, das Class-Attribut zu verwenden, ist eigentlich eine objektorientierte Methode. Die objektorientierte Methode besteht darin, ein Element überall gleich aussehen zu lassen, unabhängig vom Umgebungshintergrund. Das ist so, als würde ein Brite in andere Länder einwandern und sich weigern, die Landessprache zu sprechen. Das ist unangemessen.

Ich betrachte CSS nicht als objektorientiert, sondern als schnittstellenorientiert. Der Zweck von CSS besteht nicht darin, einzelnen Elementen das gewünschte Aussehen zu verleihen, sondern eine Schnittstelle für die Gestaltung von HTML-Dokumenten bereitzustellen, die überzeugend und lesbar ist. Für eine optimale Verständlichkeit einer Schnittstelle sollten alle Komponenten reibungslos zusammenarbeiten und die allgemeine visuelle Struktur sollte respektiert werden, unabhängig davon, woher die Komponenten stammen.

Kurz gesagt sollte unser Ziel eine echte Trennung von Stil und Inhalt sein, sodass der Inhalt zwischen verschiedenen Stilschnittstellen fließen kann, die Stilschnittstelle jedoch unverändert bleibt. In jedem wohlgeformten Dokument sollten Attribute die Quelle des Inhalts ausdrücken (Klasse als Elementattribut drückt nicht die Quelle des Inhalts aus, sondern den Typ der Inhaltsquelle).

Zusammenfassen

Oben ist die Einführung in die Semiotik in HTML/CSS durch den Herausgeber. Ich hoffe, es wird für alle hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Herausgeber wird Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken!