Herzlich willkommen zum SELF-Treffen 2026
vom 24.04. – 26.04.2026 in Halle (Saale)

Wie fange ich an?/Dateiorganisation

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Fast jeder hat auf seinem Computer oder Handy Dateien: Fotos, Videos, Texte, Programme. Stell dir vor, du hast hunderte von Fotos auf deinem Handy und wirfst sie alle wild in einen Ordner. Nach kurzer Zeit wird es mega chaotisch – so wie ein Schreibtisch voller durcheinander liegender Papiere.

Genauso ist es bei Webseiten! Deshalb gibt es Konventionen – das sind vereinbarte Regeln, wie man Dateien und Ordner organisiert.

Dateiorganisation bedeutet: Deine Dateien (HTML, CSS, Bilder, JavaScript) nach einem System in übersichtliche Ordner einzuteilen.

So erreichst du, dass …

  • deine Dateien jetzt und später schnell auffindbar sind
  • du Zeit sparst – keine stundenlange Suche oder das Vergleichen verschiedener Versionen mehr
  • Andere dein Projekt verstehen und mitarbeiten können
  • Änderungen nachvollziehbar sind und Fehler nicht so leicht passieren
  • Dateien nicht versehentlich gelöscht oder überschrieben werden.

Die Standard-Struktur

Es gibt eine bewährte Art und Weise, Webseiten zu organisieren. Die meisten Profis nutzen ähnliche Strukturen: 

mein-projekt/
├── index.html
├── css/
│ └── style.css
├── js/
│ └── script.js
├── images/
│ ├── logo.svg
│ └── background.svg
└── README.md

Was bedeutet das?

  • mein-projekt/ - Das ist dein Hauptordner (Projektordner)
  • index.html - Deine Startseite (liegt im Hauptordner)
  • css/ - Ordner für alle CSS-Dateien (die das Aussehen festlegen)
  • js/ - Ordner für alle JavaScript-Dateien (die die Interaktivität steuern)
  • images/ - Ordner für alle Bilder und Grafiken


Größere Projekte organisieren

Wenn deine Website wächst und immer komplexer wird, kannst du die Struktur noch verfeinern: 

├── images/
│ ├── icons/
│ ├── hero/
│ └── portfolio/
└── fonts/
  └── custom-font.woff2

Der Ordner images erhält separate Unterordner

  • icons/ - Kleine Icons
  • hero/ - Große Hero-Images für Header-Bereich
  • portfolio/ - Projektbilder
  • fonts/ - Spezielle Schriftarten

Faustregel: Wenn ein Ordner zu voll wird (mehr als 10-15 Dateien), teile ihn in Unterordner auf!

Dateien richtig benennen

Jetzt weißt du, wie deine Ordner heißen sollten. Aber auch die Dateinamen selbst sind wichtig! Es gibt Konventionen – vereinbarte Regeln – wie man Dateien benennen sollte.

Die 4 Goldenen Regeln für Dateinamen:


1. Nur Kleinbuchstaben

Schreibe alles klein, auch Datei-Anfänge

Richtig 
mein-logo.svg

 MeinLogo.svg

Konsequente Kleinschreibung für Dateinamen und -endungen, um Missverständnissen vorzubeugen.


2. Keine Leerzeichen

Richtig 
header-image.jpg

header image.jpg

Verwende stattdessen Bindestriche "-". Andere Satzzeichen können in bestimmten Fällen problematisch sein, und der Unterstrich kann bei unterstrichenen Links überdeckt werden.


3. Keine Umlaute oder ß

Verwende stattdessen normale Buchstaben

Richtig 
ueberschrift.html

überschrift.html

Verwende nach Möglichkeit keine Leerzeichen, Umlaute oder ß in den Dateinamen, obwohl dies dank URL-Codierung und UTF-8 nicht mehr so problematisch ist. Für ein internationales, nicht-deutschsprachiges Publikum und zum Abtippen bestimmter URLs sollten aber lieber alphanumerische ASCII-Zeichen ohne Großbuchstaben verwendet werden.

  • Fragezeichen "?" und Sternzeichen "*" solltest du auf jeden Fall vermeiden, da diese Zeichen bei fast allen Systemen eine besondere Bedeutung haben.
  • Auch auf Leerzeichen sollte man unbedingt verzichten. (Diese werden z. B. von der Mediawiki-Software in Unterstriche umgewandelt.)

Wer Probleme vermeiden möchte, nimmt nur Kleinbuchstaben "a-z" ohne Umlaute und ohne "ß", die Ziffern "0-9" und den Bindestrich "-".


4. Aussagekräftige Namen

Ein sprechender Name sollte zeigen, was in der Datei ist

Richtig 
kontakt-formular.html

datei1.html

Wenn du möchtest, dass der URL deiner Seite auch von Hand eingegeben werden kann, verwende …

  • Dateinamen, bei denen das auch einfach möglich ist. Eine 42-stellige Artikelnummer wird niemand abtippen.
  • Dateinamen einschließlich Pfad nur bis zu 256 Zeichen Länge, auch wenn einige Systeme längere Namen erlauben. [1]

Du fragst dich vielleicht: „Warum sind solche Regeln nötig?“

Gute Frage! Es gibt mehrere Gründe:

  • Verschiedene Computer: Auf deinem Windows-PC funktioniert Logo.PNG, aber auf einem Linux-Webserver (wo deine Website live geht) nicht – dort wird der Unterschied zwischen Groß- und Kleinschreibung ernst genommen![2]
  • URLs: Wenn jemand deine Website besucht und die URL eingibt, soll das einfach sein. Leerzeichen in Dateinamen machen URLs kompliziert und lang.
  • Internationale Websites: Umlaute können auf manchen Servern Probleme machen. Mit normalen Buchstaben funktioniert es überall.
  • Klare Struktur: Mit aussagekräftigen Namen findest du später schnell die richtige Datei!


Dateiendungen – Der Name ist wichtig!

Jede Datei hat eine Endung (auch "Dateityp" genannt) – das ist der Teil nach dem Punkt.

Die Endung zeigt dem Computer, was in der Datei ist:

Wichtig: Ändere die Endung nicht einfach so!
Wenn du eine HTML-Datei umbenennen möchtest, ändere nur den Namen vor dem Punkt, nicht die Endung![4]

Cool URIs don't change!

Wenn du eine Datei intro.html nennst, sollte sie immer über diese Adresse erreichbar sein. Wenn du sie später in einfuehrung.html umbenennst, funktionieren alle Links von anderen Seiten nicht mehr – das ist ärgerlich!

Daher: Überlege dir die Namen gut, bevor du die Seite veröffentlichst. Verwende aussagekräftige, stabile Namen, die nicht plötzlich veraltet sind."

Empfehlung:
  • Verwende für deine Webseiten eindeutige „sprechende“ Namen, die dem Nutzer sofort verständlich sind.
  • Verändere diese nicht, damit Nutzer nicht später auf eine 404-Fehlermeldung anstelle der gewünschten Inhalte stoßen.

Weitere Informationen zu diesem Thema findest du auf Englisch unter Hypertext Style: Cool URIs don't change.

Dateipfade richtig verlinken

Wenn deine Dateien in verschiedenen Ordnern liegen, musst du sie mit den richtigen Pfaden verlinken. Das ist wie eine Adresse, die dem Browser sagt: "Schau hier nach der Datei!"

Beispiele für richtige Pfade:

Richtig verlinken! 
<!-- CSS-Datei laden -->
<link rel="stylesheet" href="css/style.css">

<!-- JavaScript-Datei laden -->
<script src="js/script.js"></script>

<!-- Bild einfügen -->
<img src="images/logo.png" alt="Mein Logo">
Relative Pfade (empfohlen!) 
css/style.css
= "Schau im Ordner css"
Funktioniert überall, auch wenn dein Projekt den Computer wechselt!
C:\Users\Max\Projekte\css\style.css
= Die vollständige Computeradresse
Funktioniert nur auf diesem Computer!


Verzeichnisse und Standarddateien

https://de.wikipedia.org/wiki/Verzeichnisstruktur

https://de.wikipedia.org/wiki/Verzeichnisdatei


Viele Webadressen enden mit einem Schrägstrich, zum Beispiel https://www.example.org/verzeichnis/ – sie verweisen auf ein Verzeichnis, ohne weitere Angabe einer bestimmten HTML-Datei hinter dem Schrägstrich. Insbesondere bei Verweisen auf eine Domain, etwa https://www.example.org, fehlt er meist gänzlich und ist auch nicht erforderlich.

Der Webserver hat nun zwei Optionen. Bevorzugt verwendet er eine Liste von Default- oder Standarddateien. Üblich sind hier index.html, index.htm oder index.php. Man findet auf Windows-Systemen mit IIS Webserver auch welcome.htm und default.asp. Der Webserver probiert die Namen in seiner Default-Liste der Reihe nach durch und liefert die erste aus, die er findet.

Die zu prüfenden Dateinamen werden in der Webserver-Konfiguration festgelegt. Beim Apache-Webserver, am weitesten verbreitet, lautet die Einstellung DirectoryIndex; einige Hoster erlauben auch das Ändern über eine Weboberfläche.

Beim Aufruf von https://www.example.org/verzeichnis/ aus dem obigen Beispiel würde der Browser also die Ressource /verzeichnis/ vom Server abrufen und der Webserver würde in aller Regel die Datei /verzeichnis/index.html ausgeben. Es könnte aber auch /verzeichnis/start.rb oder default.aspx sein, das entscheidet sich anhand der Servereinstellung und bleibt dem Browser verborgen.

Grundsätzlich sollten als index benannte Dateien, egal ob index.html, index.txt oder anderes, für diesen Zweck reserviert bleiben. Ein einheitlicher Name erleichtert die Verwaltung und eventuelle Serverumzüge des Projektes erheblich.

Es muss sich bei dieser Datei übrigens nicht um eine HTML-Datei handeln. Wird als Default-Datei zum Beispiel index.txt oder index.jpg eingestellt, kann bei Aufruf eines Verzeichnisses auch eine einfache Textdatei oder ein Bild ausgegeben werden.

Wird die eingestellte Standarddatei nicht gefunden, oder ist die Direktive DirectoryIndex auf disabled (deaktiviert) gesetzt, versucht der Server, den Inhalt des Verzeichnisses aufzulisten. Empfehlenswert ist das im Normalfall nicht - aber wenn Sie einen Ordner mit Bildern veröffentlichen möchten, kann es nützlich sein, keine HTML-Seite hinzufügen zu müssen, die nichts weiter als eine Liste mit Links auf diese Bilddateien enthält.

Ist weder eine Standarddatei vorhanden, noch die Verzeichnisauflistung aktiviert, erzeugt der Zugriff einen HTTP-Fehler 403 (Forbidden).

Siehe auch Referenzieren in HTML

Siehe auch Webserver/htaccess/Verzeichnisoptionen

Sonderfall Backlink

Zurück zur Startseite 
 <a href="/">...</a>

Beginnt eine URL-Referenz mit dem Slash /, dann bedeutet das: Gehe vom höchsten erreichbaren Punkt der Verzeichnishierarchie aus. Im Web ist das das root-Verzeichnis der jeweiligen Domain, lokal ist es der Startpunkt des Filesystems, also auf einer Windows-Maschine typischerweise C:\.

So wird also im Normalfall die index.html im root-Verzeichnis geöffnet.



Weblinks

  1. ↑ Im FAT-Dateisystem durften Datei- oder Ordnername aus maximal 8 Zeichen plus einer Namenserweiterung aus 3 Zeichen bestehen
    Wikipedia: 8.3 (auch 8-Punkt-3-Namen)
    Beispielsweise wurde das Computerspiel Hamurabi mit nur einem m geschrieben, um in dieses Schema zu passen. Auf solchen Systemen betreibt man heute keine Webserver mehr!
  2. ↑ Man kann unter Windows eine Datei zwar SelfHtml Wiki nennen, aber eine weitere Datei namens selfhtml wiki ist nicht möglich. Das liegt daran, dass Windows zwar die Schreibweise speichert (es ist case preserving), sie beim Vergleich von Dateinamen aber nicht beachtet (case insensitive). Obwohl die Mac Computer seit Version 10 auf einem Unix Derivat laufen, verhalten sie sich genauso. Nur die Dateisysteme von Linux, seinem Derivat Android und auch von iOS können Dateien mit Namen, die sich nur in der Schreibweise unterscheiden, auseinander halten.
  3. ↑ SELF-Forum: Funktioniert alles super ..., aber nur lokal. Über den Server wird das CSS aber komplett ignoriert.
  4. ↑ heise.de: Dateiendungen im Überblick

Abgerufen am 10.03.2026
von "http://wiki.selfhtml.org/wiki/Wie_fange_ich_an%3F/Dateiorganisation"