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!

Pfade in Unterordnern

Was passiert, wenn du von einer Datei in einem Unterordner auf eine andere Datei verweisen möchtest? Zum Beispiel: Du schreibst CSS-Code und möchtest ein Bild aus dem img/-Ordner einbinden. Der CSS ist aber im css/-Ordner!

Infografik Pfadangaben für Bilder

Dafür brauchst du ../ – das bedeutet: "Gehe eine Ebene nach oben". 

mein-projekt/
├── index.html
├── css/
│ └── style.css ← Von hier aus...
└── img/
└── logo.svg ← ...will ich hierhin

In deiner css/style.css würdest du schreiben: /* Von css/style.css auf images/logo.png verweisen */ background-image: url(../images/logo.png);

Was bedeutet das? 

   ../ = "Gehe in den Eltern-Ordner" (von css/ zu mein-projekt/)
   images/logo.png = "Dann gehe in den images-Ordner und hole logo.png"

Noch ein Beispiel:

Du möchtest von einer Datei tief im Ordner-Baum zurück zur Startseite linken: <a href="/">Zur Startseite</a> <a href="../index.html">Zur Startseite</a> <a href="../../index.html">Noch eine Ebene höher</a>

In jedem Ordner sollte als Standarddatei eine index.html liegen, das ist allerdings eine Sache der Webserver-Einstellungen.[5][6]

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

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.

Siehe auch

  • Links

    Referenzieren in HTML Richtig verlinken!

     
  • Webserver Grundlagen
    • Client und Server
    • HTTP - Request und Response
     
  • Verzeichnisoptionen
    • Verzeichnis-Browsing einstellen
     


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
  5. ↑ Verzeichnisstruktur (de.wikipedia.org)
  6. ↑ Verzeichnisdatei (de.wikipedia.org)
    Besser erklärt in der englischen Version: Web server directory index (en.wikipedia.org)

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