Online-Shop mit HTML erstellen – Anleitung
Onlineshop erstellen mit HTML
Du willst deinen eigenen Onlineshop erstellen mit HTML und weißt nicht genau, wo du anfangen sollst? Damit bist du nicht alleine. Viele Menschen möchten ihre Produkte oder Dienstleistungen online anzubieten, fühlen sich aber von der Technik abgeschreckt. Dabei ist der erste Schritt oft einfacher als gedacht.
Wenn du mithilfe von HTML einen einfachen Onlineshop erstellen willst, lies weiter. Es geht nicht um ein voll ausgestattetes E-Commerce-System mit Warenkorb und Zahlungsschnittstellen – dafür gibt es spezialisierte Lösungen wie Shopify oder WooCommerce. Doch ein Grundgerüst nur mit HTML? Das ist möglich und eine großartige Übung für alle, die verstehen wollen, wie das Web funktioniert.
Also, schnapp dir einen Texteditor, vielleicht eine Tasse Kaffee, und lass uns gemeinsam deinen ersten Schritt in die Welt des Online-Handels gehen.
Warum HTML
“Warum sollte ich einen Onlineshop in HTML bauen, wenn es doch fertige Systeme gibt?” – eine berechtigte Frage. Die Antwort: Weil du so lernst, wie die Bestandteile deines Shops eigentlich funktionieren. Und: Manchmal braucht es einfach keine komplexe Lösung.
HTML ist die Grundlage jeder Webseite. Es strukturiert Seiteninhalte und lässt sich leicht erlernen. Für einen kleinen Shop mit wenigen Produkten reicht reines HTML (mit etwas CSS für das Design) oft völlig aus, insbesondere, wenn kein automatisierter Bestellvorgang nötig ist.
Du möchtest z. B. ein paar handgemachte Produkte verkaufen und brauchst nur eine einfache Plattform mit Produktbildern, Beschreibungen und einem Bestellformular? Perfekt – HTML ist dafür genau richtig.
Was du brauchst um loszulegen
Bevor du startest, solltest du ein paar Dinge bereit haben:
- Einen Computer mit einem Texteditor (z. B. Visual Studio Code, Sublime Text oder einfach Notepad++)
- Grundkenntnisse in HTML (nicht zwingend, aber hilfreich)
- Bilder deiner Produkte
- Texte zu deinen Produkten (Beschreibung, Preis, ggf. Verfügbarkeit)
- Einen Webspace oder einen kostenlosen Hostingdienst, um deinen Shop online zu stellen (z. B. GitHub Pages oder Netlify)
Klingt machbar, oder? Dann los!
Die Grundstruktur einer HTML-Seite
Wir starten mit einem grundlegenden HTML-Gerüst. Jedes HTML-Dokument beginnt mit einem sogenannten Doctype und der <html>-Struktur:
Mein Onlineshop Mein kleiner Shop
Das ist die Grundlage. Alles Weitere fügen wir Schritt für Schritt hinzu – also keine Panik.
Produkte sauber darstellen
Deine Produkte sollen gut aussehen und klar beschrieben sein. Dafür verwenden wir eine einfache Struktur mit <section> und <article>-Elementen. Jedes Produkt bekommt sein eigenes <article> – das sorgt für Übersichtlichkeit im Code.
Produktname 1
Kurze Beschreibung des Produkts.
Preis: 19,99 €
Jetzt bestellen
Natürlich kann das je nach Produktanzahl schnell länger werden, aber denk dran: Je übersichtlicher dein Code, desto einfacher das Bearbeiten.
Ein bisschen Stil mit CSS
Ein Onlineshop soll nicht nur funktionieren – er soll auch gut aussehen. Hier kommt CSS ins Spiel. Auch wenn du kein Designer bist: Mit ein paar einfachen Regeln wirkt dein Shop sofort professioneller.
body {
font-family: Arial, sans-serif;
background-color: #f9f9f9;
color: #333;
margin: 0;
padding: 0;
}
header, footer {
background-color: #333;
color: white;
padding: 1em;
text-align: center;
}
section {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
article {
border: 1px solid #ccc;
border-radius: 8px;
background: white;
margin: 1em;
padding: 1em;
width: 250px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
img {
max-width: 100%;
}
Plötzlich sieht das alles nach etwas aus, oder? Nur mit ein paar Zeilen CSS. Nicht perfekt – aber ein guter Anfang.
Bestellungen entgegennehmen
Ein echter Onlineshop braucht irgendwann ein Bestellformular. Auch das lässt sich in HTML lösen – allerdings ohne direkte Bezahlung. Für den Anfang genügt oft ein simples Kontaktformular:
Bestellung
Dieses Formular nutzt das mailto:-Protokoll. Es öffnet beim Absenden das E-Mail-Programm des Nutzers – nicht supermodern, aber ein Anfang. Willst du später mehr, kannst du auf PHP oder externe Dienste wie Formspree zurückgreifen.
Navigation nicht vergessen
Wenn dein Shop mehr als eine Seite hat – z. B. Startseite, einzelne Produktseiten, ein Kontaktformular – dann braucht er ein Menü. Eine einfache Navigation hilft dem Besucher, sich zu orientieren:
Natürlich muss du für jeden Link auch eine eigene HTML-Datei anlegen – aber das ist ja schnell gemacht.
Mobilfreundlichkeit und Responsive Design
Viele Besucher kommen per Smartphone oder Tablet auf deine Seite. Deshalb solltest du ein paar Zeilen CSS hinzufügen, um das Layout flexibel zu gestalten. Das Stichwort lautet “Responsive Design”.
Brauchst du gleich eine komplett mobile Version? Nein. Aber du kannst mit Medienabfragen sicherstellen, dass deine Artikel nebeneinander oder untereinander liegen – je nach Bildschirmgröße.
@media (max-width: 768px) {
section {
flex-direction: column;
align-items: center;
}
article {
width: 90%;
}
}
Diese paar Zeilen machen schon viel aus. Du siehst: Auch ein in HTML erstellter Onlineshop kann sich an mobile Nutzer anpassen.
Bilder optimieren und Dateiverwaltung
Wichtig ist auch, dass du deine Dateien sauber organisierst. Bilder gehören in einen Ordner /bilder, CSS in /css – so findest du dich besser zurecht. Und vergiss nicht: Bilder sollten möglichst klein sein! Niemand wartet gerne auf eine sich ewig ladende Seite.
Tools wie TinyPNG oder Squoosh helfen dir, Bilder ohne großen Qualitätsverlust zu verkleinern. Das hilft nicht nur deinen Besuchern, sondern auch deinem Hosting, denn kleinere Dateien bedeuten weniger Traffic.
Den Shop online stellen
Jetzt der spannendste Teil: Deinen Shop online bringen! Du kannst dazu kostenlose Dienste wie GitHub Pages oder Netlify nutzen. Beide ermöglichen es dir, statische Seiten (also HTML) kostenfrei zu hosten.
Dafür musst du deine Dateien in ein öffentliches GitHub-Repository hochladen (kein Hexenwerk) und dann GitHub Pages aktivieren. Schon ist dein Shop online erreichbar – ganz ohne Server oder Programme.
Klingt kompliziert? Ist es nicht – und der Stolz, seinen ersten eigenen Onlineshop live zu sehen, ist unbezahlbar.
Grenzen von HTML-Onlineshops
So toll ein statischer HTML-Shop auch ist – irgendwann stößt du an Grenzen. Keine Warenkorb-Funktion, keine Zahlungsanbindung, kein automatisiertes Lagerverwaltungssystem. Du kannst damit starten, keine Frage – aber für den professionellen Verkauf wirst du früher oder später auf ein echtes Shopsystem umsteigen müssen.
Aber: Wenn du verstanden hast, wie dein HTML-Shop funktioniert, wird dir der Wechsel auf ein professionelles System leichter fallen. Du wirst die Hintergründe verstehen – und das ist Gold wert.
Onlineshop erstellen HTML
Ein Onlineshop nur mit HTML – geht das wirklich? Ja, und wie! Sicher, es ist keine Lösung für große Projekte mit tausenden Artikeln und tiefem Backend. Aber um klein anzufangen, Know‑how zu sammeln oder einen überschaubaren Shop zu betreiben, ist es ideal.
Du kannst mit HTML deine Produkte präsentieren, Bestellungen entgegennehmen und deinen Shop responsive gestalten. Aber wichtiger ist: Du verstehst, was im Hintergrund passiert – und gewinnst Unabhängigkeit von komplexer Software.
