CSS führt zur Trennung von...?
Ich bin der Meinung: Inhalt und Gestaltung.
Struktur kann man nämlich mit CSS auch gestalten...
Das Ergebnis basiert auf 10 Abstimmungen
4 Antworten
Die Struktur einer Webseite wird via HTML definiert. Es geht um die logische Einordnung der einzelnen Elemente im HTML-Dokument.
Beispiel: Eine Webseite wird in eine Stage-/Headersektion, eine Navigation, eine Footersektion und einem Bereich für den hauptsächlichen Inhalt aufgeteilt. Letzterer Bereich könnte in weitere Subsektionen aufgeteilt werden, die jeweils aus einem Titel, Bildern und Paragraphen bestehen.
Auch wenn man kein CSS verwendet, erzeugen Browser wie Chrome oder Firefox dennoch eine visuelle Darstellung der jeweiligen Seitenelemente. Die konkreten Inhalte (Texte, Bilder, u.ä.) werden also sichtbar wiedergegeben.
Mit CSS kann nun eine individuelle/angepasste visuelle Gestaltung der Oberfläche (das Layout) vorgegeben werden. Das umfasst beispielsweise die Schriftformatierung, den Weißraum (bzw. welche Abstände zwischen einzelnen Elementen bestehen sollen) oder aber die Anordnung der einzelnen Elemente. Layouts werden in einem Designprozess kreiert bzw. von einem Corporate Design abgeleitet.
Zieht man sich noch einmal das obige Beispiel heran, könnten die Subsektionen horizontal nebeneinander angeordnet und die Sektionstitel in bunten Farben dargestellt werden. Man ändert damit aber nur die visuelle Darstellung. Die logische Struktur bleibt gleich. Selbst wenn die Schriftgröße der Sektionstitel auf 1px gesetzt wird, verlieren oder ändern diese nicht ihre logische Bedeutung.
Zum tatsächlichen Inhalt (Texte, Bilder, Videos, u.ä.) soll CSS nicht beitragen. Pseudoelemente gelten dabei auch nicht als Inhalt, sondern als dekorative Elemente. HTML wiederum ist ebenfalls nicht als Inhaltserzeuger gedacht, sondern soll bestehenden Inhalt nur beschreiben/strukturieren. Um Struktur und Inhalt klarer voneinander zu trennen, würde man den Inhalt in einem dynamischen Prozess aus einer Quelle (z.B. einer Datenbank) mit dem HTML zusammenfügen.
Dass man z.b. mit flex order die "html-struktur" vermeintlich ändern kann. (...)
Ja, man kann mit CSS so einiges auf den Kopf stellen.
Aus:
<article>
<h1>Title</h1>
<p>Text</p>
</article>
kann man mit CSS so eine Webseite zusammenbasteln:
<article style="display:flex; flex-direction:column-reverse">
<h1 style="font-size:12px; font-weight:normal">Title</h1>
<p style="font-size:24px; font-weight:bold; margin: 0">Text</p>
</article>
Aber es sind nur visuelle Änderungen, die Struktur/Gliederung bleibt konstant. Ein DOM-Parser würde in jedem Fall erkennen, dass Title als eine h1-Überschrift und Text als ein normaler Textabschnitt zu werten ist.
CSS führt nur die Option ein, eine visuell unabhängige Ebene einzubinden. Die visuelle und logische Ebene muss man jeweils deutlich voneinander unterscheiden.
Darüber hinaus finde ich könnte man doch sagen dass die Struktur selbst -> Inhalt ist.
Stell dir vor, du möchtest ein Buch schreiben, findest aber keine Worte, um die Seiten zu füllen. Für das Buch magst du zwar eine Struktur festgelegt haben (Inhaltsverzeichnis, Einteilung in Kapitel, ...) doch aufgrund Ideenmangels bleiben die Seiten dennoch leer. Es wäre ein inhaltsloses Werk.
HTML nimmt eine logische Einordnung von Inhalten/Daten vor. So werden im obigen Beispiel die Texte Title und Text strukturell eingeordnet (Welche Bedeutung haben sie innerhalb des Dokuments? In welchem Kontext stehen sie zueinander? u.ä.). Ohne Inhalte gibt es im Grunde genommen keinen Bedarf an einer Strukturierung. Würde man die beiden Texte herausnehmen, würde man nichts strukturieren. In der Bedeutung könnte man es wohl gleich werten, wie ein leeres Dokument.
CSS trennt Inhalt und Darstellung, mit welchen Begriffen die Informatik das theoretisch bezeichnet ist mir in der Praxis unwichtig.
Allerdings ist die Verwendung von CSS keine Garantie für eine erfolgreiche Trennung!
Funktionales CSS mit sprechenden Klassennamen, die sich auf konkrete Darstellung beziehen, führen diesen Anspruch ad absurdum. Beispiel: <div class="green border-2px font-xxl">.
Genau das wird aber von Bootstrap, Tailwind und ähnlichen Frameworks und Designsystemen so gemacht. Siehe: https://www.browserlondon.com/blog/2019/06/10/functional-css-perils/
Also lässt sich mal wieder nicht alles verallgemeinern.
Im HTML wird der Strukturelle Aufbau der Website festgelegt
Im CSS wird das Aussehen der Webseite oder gar der ganzen Website
Genauso wie auch das Responsable Design- also das dynamische Anpassen an verschiedenen Display Auflösungen.
Responsable Design
Ja, was ist dass denn? Richtig...die STRUKTUR.
Wie also trennt CSS die Struktur von der Gestaltung?
Responsable Design
Ja, was ist dass denn?
Nein das ist nicht die Struktur der Website.
Die Struktur der Website ist unabhängig von der Display Größe!
Das Responsable Design ändert nur das Aussehen.
Z.b. kann eine Liste bein PC Horizintal angezeigt werden und am Hany vertikal.
Bestes Beispiel ist die Navigationsiste.
Am PC die links hintereinander. Am Handy aus Platzgründen untereinander.
An der Strukturierung der Website ändert dies gar nichts
Gleiches gilt z.b. bei der Unordnung der DIV beim Grid.
Beim PC zum Beispiel 4 DIV nebeneinander
Beim Tablet 2 nebeneinander
Und beim Handy 1 DIV nebeneinander
Keine Änderungen der DIV Struktur und trotzdem vollkommen andere Anzeige
Evtl werden Mobil sogar Daten unsichtbar gemacht da zu wenig Platz, ohne Änderung der Struktur
Struktur und Inhalt -> HTML
Design -> CSS
Struktur geht aber bzgl. z.b. Flexbox oder CSS-Grid auch mit CSS.
Daher führt CSS nicht unbedingt zur Trennung von Struktur und Gestaltung. Über bleibt also Inhalt und Gestaltung... (Habe ich es richtig verstanden oder gibts da noch ein denkfehler)
Mit CSS (Flexbox oder Grid) legst du keine Struktur der Website fest.
Die Struktur ergibt sich durch das HTML
Mit Flexbox oder Besser Grid und weiteren Styles legst du das Aussehen fest. Vor allem das Responsable Design!
Was ist denn dann für dich die Struktur? Für mich heißt es: Die Platzierung der Elemente. Mit CSS Grid gibt man genau diese vor, ganz unabhängig von der HTML Struktur.
So bleibt für mich nur noch Inhalt und Gestaltung über...
https://wiki.selfhtml.org/wiki/HTML/Tutorials/Trennung_von_Inhalt,_Pr%C3%A4sentation_und_Verhalten Hier von Experten bestätigt xD
Nein im CSS kannst du auch keine Details der Struktur festlegen
Nur das Design
Struktur und Styles sind getrennt
Ja is mir schon klar, ich meinte damit das du in der CSS nur die details zum Flexbox-Grid festlegst. Somit ist die Struktur dennoch in der HTML
Der Strukturelle Aufbau, hat nichts mit dem Design zu tun.
Struktur:
- header und footer
- nav
- main
- article oder sesection
- aside
- address
- klickbare Telefonnummer
- Klickbare E-Mail-Adresse
- Formulare
- Zitate
- Hervorhebungen
- ...
Die Elemente bestehen z.b aus
- Überschriften
- CONTAINER
- Texte
- Bilder
- Listen
- Eingabefelder
- ...
Das wichtigste einer HTML Struktur sind natürlich auch die Links, ohne die die nichts funktioniert
Wie die einzelnen Elemante und damit die Webseite aussieht wird alleine im CSS bestimmt.
und zwar entweder im eigenen CSS File oder (was immer schlecht ist) im Default des Browsers
Z.b. interessiert für Google und das verstehen der Seite nur die Struktur!
Das Aussehen durch die Styles ist unerheblich und hat generell keinen Einfluss auf das Ranking bei Google
Lediglich ob Websites auch bei mobilen Geräten - also kleinen Display - auch bedienbar ist, prüft Google.
D.h. Buttons sollten für Mobil nicht zu klein sein damit man sie noch bedienen kann.
Da Google natürlich interessiert ist dass Android auch funktioniert gilt deshalb die goldene Regel beim Erstellen einer Website:
Mobile First
Für mich ist der Begriff Struktur falsch. Inhalt finde ich passender.
Der Inhalt ist aber der Text und die Bilder (also dass was der außer auch sieht)
Der Begriff Struktur ist ganz und gar nicht falsch.
Ohne den Strukturellen Aufbau könnte der Browser die Website gar nicht sinnvoll darstellen
Die Struktur ist sehr wichtig
Auch für die Bedienung von Sehbehinderten.
Nur eine korrekte Struktur ermöglicht die Bedienung von Sehnehinderten und Blinden
Der Inhalt ist aber der Text und die Bilder (also dass was der außer auch sieht)
Der Begriff Struktur ist ganz und gar nicht falsch.
Nur durch die richtige Strukturierung z.b. der Überschriften und Texten und Listen wird aus einem Fließtext eine Sinnvoll strukturierte Website
Ohne den Strukturellen Aufbau könnte der Browser die Website gar nicht sinnvoll darstellen
Die Struktur ist sehr wichtig
Auch für die Bedienung von Sehbehinderten.
Nur eine korrekte Struktur ermöglicht die Bedienung von Sehnehinderten und Blinden
Also meine Bedenken sind folgende:
Darüber hinaus finde ich könnte man doch sagen dass die Struktur selbst -> Inhalt ist.
Aber es sind wahrscheinlich nur Begrifflichkeiten die mich da voll durcheinander bringen. Danke für die Ausführliche Antwort