Lernmodul
Auszeichnungssprachen (HTML)
Grundlagen der strukturierten Produktdarstellung im Web.
Du siehst eine Vorschau. Die erste Minute ist kostenlos.
Registriere dich kostenlos und wähle einen Plan um Videos in voller Länge zu sehen.
Transkript zum VideoAufklappen
Hallo und herzlich willkommen zu diesem Video! Heute tauchen wir gemeinsam in die faszinierende Welt von HTML ein, dem Grundgerüst jeder Webseite. Als zukünftige Kaufleute im E-Commerce ist es entscheidend, dass ihr versteht, wie Produktinformationen im Web strukturiert werden. Wir zeigen dir, wie du mit HTML Inhalte für deinen Online-Shop optimal aufbereitest und welche Vorteile das für SEO und Barrierefreiheit hat.
Lernziele
- Du verstehst die Funktion von HTML als Auszeichnungssprache und ihre Bedeutung für die Produktdarstellung im E-Commerce.
- Du kannst wichtige HTML-Tags und Attribute zur Strukturierung von E-Commerce-Inhalten anwenden und interpretieren.
- Du erkennst die Vorteile von semantischem HTML für Suchmaschinenoptimierung und Barrierefreiheit.
1.Stell dir vor, du planst den Bau eines Hauses. Du brauchst einen detaillierten Bauplan, der genau festlegt, wo Wände, Türen und Fenster hinkommen. Genauso ist HTML – die HyperText Markup Language – der Bauplan für jede Webseite in deinem Online-Shop. Sie ist keine Programmiersprache, sondern eine Auszeichnungssprache, die Inhalten eine Struktur gibt. Für uns im E-Commerce ist das extrem wichtig, denn nur eine klar strukturierte Produktdarstellung sorgt dafür, dass Kunden und Suchmaschinen deine Angebote richtig verstehen. Mit HTML legst du fest, was eine Überschrift ist, wo ein Produktbild hingehört oder welche Textteile eine Beschreibung bilden. Ohne HTML wäre das Web nur ein unübersichtlicher Textbrei – und dein Online-Shop unauffindbar.
VisuellGeneriere ein fotorealistisches Bild: Ein Architekt sitzt an einem Tisch voller Baupläne und Skizzen. Im Hintergrund ist schemenhaft eine moderne E-Commerce-Produktseite auf einem Bildschirm zu sehen, die Analogie zwischen Bauplan und We…
2.Jeder Bauplan hat seine eigenen Symbole und Bezeichnungen. In HTML sind das die Tags, Elemente und Attribute. Ein Tag ist ein Schlüsselwort in spitzen Klammern, zum Beispiel `<h1>` für eine Hauptüberschrift. Ein Element besteht aus einem Start-Tag, dem Inhalt und einem End-Tag, wie `<p>Dies ist ein Absatz.</p>`. Manche Elemente sind selbstschließend, wie das `<img>`-Tag für Bilder, das keinen separaten End-Tag benötigt. Attribute sind zusätzliche Informationen innerhalb eines Start-Tags, die das Element näher beschreiben oder sein Verhalten modifizieren. Zum Beispiel gibst du einem Bild mit dem Attribut `src` seine Quelle an oder mit `alt` eine Textbeschreibung, die für Suchmaschinen und Screenreader wichtig ist. Darüber hinaus gibt es Attribute wie `title`, das einen Tooltip beim Überfahren mit der Maus anzeigt, oder `class` und `id`. Das `class`-Attribut dient dazu, eine Gruppe von Elementen für das Styling mit CSS zu kennzeichnen, während `id` ein Element eindeutig identifiziert, oft für JavaScript-Interaktionen oder spezifische CSS-Regeln. Dein Webbrowser liest diesen HTML-Code und übersetzt ihn dann in die visuelle Darstellung, die wir auf dem Bildschirm sehen.
VisuellZeige die Definitionen und Beispiele für 'Tag' (`<h1>`), 'Element' (`<p>Dies ist ein Absatz.</p>`) und 'Attribut'. Liste Beispiele für Attribute auf: `src`, `alt`, `href`, `title` (mit Tooltip-Beispiel), `class` (mit CSS-Bezug) und `id`…
3.Wie bei einem Hausbau gibt es auch in HTML eine feste Grundstruktur. Jede HTML-Datei beginnt mit `<!DOCTYPE html>`, das dem Browser sagt, dass es sich um ein HTML5-Dokument handelt. Darauf folgt das Wurzelelement `<html>`, das den gesamten HTML-Inhalt umschließt. Innerhalb des `<html>`-Elements gibt es zwei Hauptbereiche: den `<head>` und den `<body>`. Der `<head>`-Bereich enthält Metadaten über die Webseite, die im Browser selbst nicht direkt sichtbar sind. Hier definierst du zum Beispiel den Titel der Browser-Registerkarte, den Zeichensatz oder verknüpfst CSS-Dateien für das Design. Auch wichtige Meta-Tags für die Suchmaschinenoptimierung gehören hierher. Der `<body>`-Bereich hingegen enthält den gesamten sichtbaren Inhalt deiner Webseite – also Texte, Bilder, Links und alles, was deine Kunden sehen und anklicken können.
VisuellEine schematische Darstellung der 'Grundlegenden HTML-Dokumentstruktur' als Prozess-Schritt-Darstellung. Zeige die Hierarchie von `<!DOCTYPE html>`, `<html>`, `<head>` (mit Beispielen für Metadaten) und `<body>` (mit Beispielen für sicht…
4.Für die Produktdarstellung im E-Commerce sind bestimmte HTML-Tags besonders wichtig. Mit `<h1>` bis `<h6>` strukturierst du Überschriften hierarchisch – `<h1>` für den Produktnamen, `<h2>` für Kategorien. Absätze wie Produktbeschreibungen oder Lieferinformationen fasst du in `<p>`-Tags. Interaktive Elemente wie 'In den Warenkorb'-Buttons oder 'Mehr Details'-Links erstellst du mit dem `<a>`-Tag und dem `href`-Attribut, das das Linkziel angibt. Produktbilder bindest du mit `<img>` ein, wobei `src` die Bildquelle und `alt` eine wichtige Textbeschreibung für Suchmaschinen und Barrierefreiheit festlegt. Für Produktmerkmale oder Spezifikationen nutzt du ungeordnete Listen `<ul>` oder geordnete Listen `<ol>`, wobei jedes Merkmal ein `<li>`-Element ist. Komplexe Daten wie technische Spezifikationen kannst du auch mit `<table>`-Tags darstellen.
VisuellEine 'Definitionen-Liste' mit den 'Wichtigen HTML-Tags für die Produktdarstellung im E-Commerce'. Zeige die Tags `<h1>`, `<p>`, `<a>` (mit `href`), `<img>` (mit `src`, `alt`), `<ul>`/`<ol>` (mit `<li>`), `<table>` mit kurzen Erklärungen…
5.Schauen wir uns ein konkretes Beispiel an: die Produktseite für einen 'Ergonomischen Bürostuhl'. Der Produktname 'Ergonomischer Bürostuhl Deluxe' wäre in einem `<h1>`-Tag. Die ausführliche Produktbeschreibung fassen wir in `<p>`-Tags. Die wichtigsten Merkmale wie 'Höhenverstellbar' oder 'Atmungsaktiver Bezug' listen wir übersichtlich in einer `<ul>`-Liste mit `<li>`-Elementen auf. Das Hauptproduktbild binden wir mit `<img>` ein und geben ihm ein aussagekräftiges `alt`-Attribut wie 'Ergonomischer Bürostuhl Deluxe in Schwarz'. Technische Daten wie Material oder Maße können wir in einer `<table>` mit `<th>` für Kopfzeilen und `<td>` für Daten übersichtlich präsentieren. Und natürlich der 'In den Warenkorb'-Button, der ein `<a>`-Tag mit passendem `href`-Attribut ist. So sieht der Browser den Bauplan und rendert die Seite für deine Kunden.
VisuellGeneriere ein fotorealistisches Bild: Eine E-Commerce-Produktseite für einen 'Ergonomischen Bürostuhl' auf einem Laptop-Bildschirm. Einzelne Bereiche der Seite sind mit Pfeilen markiert und beschriftet mit den entsprechenden HTML-Tags wi…
6.Neben der reinen Struktur ist die Bedeutung der Tags entscheidend. Semantisches HTML bedeutet, dass du Tags verwendest, die den Inhalt beschreiben, anstatt nur die Darstellung zu beeinflussen. Statt nur `<div>`-Elemente zu nutzen, verwenden wir zum Beispiel `<article>` für einen Blogbeitrag, `<nav>` für die Navigation oder `<header>` und `<footer>` für Kopf- und Fußzeilen. Das hilft Suchmaschinen, den Inhalt besser zu verstehen und deine Seite höher zu ranken. Gleichzeitig verbessert es die Barrierefreiheit, da Screenreader für sehbehinderte Nutzer die Bedeutung der Inhalte besser interpretieren können. Ein weiterer wichtiger Unterschied: Block-Elemente wie `<h1>` oder `<p>` nehmen die gesamte verfügbare Breite ein und erzeugen einen Zeilenumbruch. Inline-Elemente wie `<a>` oder `<span>` hingegen nehmen nur so viel Platz ein, wie ihr Inhalt benötigt, und bleiben in der Textzeile.
VisuellEine 'Vergleichstabelle' mit den Unterschieden zwischen 'Block-Elementen' (`<h1>`, `<p>`, `<div>`) und 'Inline-Elementen' (`<a>`, `<span>`, `<img>`). Erkläre die Auswirkungen auf Breite und Zeilenumbruch und zeige Beispiele für semantisc…
7.Auch beim HTML-Bauplan können Fehler passieren, die sich auf deinen Online-Shop auswirken. Ein häufiger Fehler ist das Vergessen von schließenden Tags oder eine falsche Verschachtelung von Elementen. Das kann dazu führen, dass deine Webseite im Browser fehlerhaft dargestellt wird oder schlimmstenfalls gar nicht richtig funktioniert. Suchmaschinen haben dann Schwierigkeiten, den Inhalt korrekt zu indexieren, was deine Sichtbarkeit beeinträchtigt. Ein weiterer kritischer Fehler ist die fehlende oder unspezifische Verwendung des `alt`-Attributs bei Bildern. Wenn du hier zum Beispiel nur 'Bild' statt 'Roter Sneaker Größe 42' schreibst, verlierst du nicht nur wertvolle SEO-Potenziale, sondern schließt auch sehbehinderte Nutzer aus, die auf Screenreader angewiesen sind. Achte also immer auf sauberen und semantisch korrekten HTML-Code!
VisuellEine Darstellung häufiger HTML-Fehler. Zeige Beispiele für fehlende schließende Tags oder falsche Verschachtelung und die Auswirkungen auf die Webseitendarstellung. Hebe die Bedeutung eines aussagekräftigen `alt`-Attributs für SEO und Ba…
8.Fassen wir zusammen: HTML ist das unverzichtbare Grundgerüst für jeden Online-Shop und ermöglicht die strukturierte Darstellung deiner Produkte. Es ist der Bauplan, der dem Browser sagt, was wo hingehört. Doch das ist nur ein Teil des Ganzen. Das Design und die Optik deiner Webseite werden durch CSS, die Cascading Style Sheets, gesteuert. Und für Interaktivität, wie zum Beispiel dynamische Warenkorbfunktionen oder Filter, kommt JavaScript ins Spiel. Für deine IHK-Prüfung solltest du dir besonders die korrekte Anwendung von semantischem HTML und die Bedeutung von Attributen wie `alt` für Bilder und `href` für Links merken. Auch die Attribute `class` und `id` sind wichtig für die spätere Gestaltung und Funktionalität. Ein tiefes Verständnis von HTML hilft dir nicht nur, mit Webentwicklern besser zu kommunizieren, sondern auch, die User Experience und die Sichtbarkeit deines Online-Shops entscheidend zu optimieren. Viel Erfolg dabei!
VisuellEine Infografik, die das Zusammenspiel von HTML (Struktur), CSS (Design) und JavaScript (Interaktivität) als drei Zahnräder oder Schichten darstellt, die gemeinsam eine funktionierende Webseite bilden. Füge einen Prüfungstipp zu semantis…
Hinweis: Dieses Transkript dient als barrierefreie Textalternative gemäß BFSG / WCAG 1.2.1. Die zusätzlichen „Visuell“-Hinweise beschreiben die wichtigsten Bildinhalte und erfüllen damit auch die Anforderung an eine Media-Alternative (WCAG 1.2.3) für Nutzer:innen, die das Video nicht sehen können. Eingeblendete Untertitel (WCAG 1.2.2) lassen sich im Player über das CC-Symbol ein- und ausschalten.
HTML ist das Grundgerüst jeder Webseite und entscheidend für die Strukturierung von Inhalten im E-Commerce. Es ermöglicht eine klare Produktdarstellung und verbessert SEO und Barrierefreiheit.
EINLEITUNG
HTML, die HyperText Markup Language, ist das Fundament jeder Webseite. Für Kaufleute im E-Commerce ist es wichtig, HTML zu verstehen, um Produktinformationen effektiv zu strukturieren und darzustellen. HTML verbessert die Auffindbarkeit und Zugänglichkeit von Inhalten im Web.
KERNPUNKTE
HTML ist keine Programmiersprache, sondern eine Auszeichnungssprache, die Inhalten Struktur verleiht. Tags, Elemente und Attribute sind die Bausteine von HTML. Ein Tag ist ein Schlüsselwort in spitzen Klammern, ein Element besteht aus einem Start-Tag, Inhalt und einem End-Tag. Attribute liefern zusätzliche Informationen. Semantisches HTML nutzt Tags, die den Inhalt beschreiben, was SEO und Barrierefreiheit fördert. Block-Elemente wie `<h1>` erzeugen Zeilenumbrüche, während Inline-Elemente wie `<a>` dies nicht tun.
PRAXISBEZUG
In einem Online-Shop wird HTML verwendet, um Produktseiten zu erstellen. Der Produktname steht in einem `<h1>`-Tag, Beschreibungen in `<p>`-Tags. Produktbilder werden mit `<img>` eingebunden, wobei das `alt`-Attribut wichtig für SEO ist. Listen `<ul>` oder `<ol>` strukturieren Merkmale, und `<table>`-Tags präsentieren technische Daten. Semantisches HTML hilft Suchmaschinen, den Inhalt besser zu verstehen.
FAZIT
HTML ist unverzichtbar für die Strukturierung von Online-Shop-Inhalten. Es sorgt für eine klare Darstellung, verbessert die User Experience und die Sichtbarkeit in Suchmaschinen. Ein tiefes Verständnis von HTML unterstützt die Kommunikation mit Webentwicklern und optimiert die Funktionalität des Online-Shops.
Ähnliche Wiki-Artikel
Fachinformatiker: XML in der Datenverarbeitung – einfach erklärt
XML (Extensible Markup Language) dient dazu, strukturierte Daten in einem menschenlesbaren und maschinenverarbeitbaren Format darzustellen. Es ist eine Metasprache, mit der du eigene Auszeichnungsspra
Fachinformatiker: Styleguide-Zweck für Softwareprojekte – einfach erklärt
Ein Styleguide ist eine zentrale Dokumentation, die Richtlinien und Standards für das Design, die Benutzeroberfläche (UI), die Benutzererfahrung (UX) und die Code-Struktur eines Softwareprojekts festl
Fachinformatiker: Adressatengerechte Präsentation Unternehmensstruktur – einfach erklärt
Eine adressatengerechte Präsentation der Unternehmensstruktur bedeutet, dass du deine Darstellung genau auf die Bedürfnisse, das Vorwissen und die Interessen deines Publikums abstimmst. Es geht darum,
Fachinformatiker: WCAG-Kriterien für barrierefreie Software – einfach erklärt
Die Web Content Accessibility Guidelines (WCAG) sind internationale Standards für barrierefreie Webinhalte, deren Prinzipien aber auch hervorragend auf Software übertragbar sind. Sie basieren auf vier
Lernthemen aus anderen Ausbildungen
Büromanagement: 3 Regeln für gelungene digitale Präsentationen – einfach erklärt
Eine gelungene digitale Präsentation zeichnet sich durch Klarheit, visuelle Attraktivität und Interaktion aus. Vermeide überladene Folien, nutze ansprechendes Design und beziehe dein Publikum aktiv ei
Fachinformatiker: Gängige Dateiformate für strukturierte Daten – einfach erklärt
Strukturierte Daten sind Informationen, die in einem festen Format oder Schema organisiert sind, sodass sie leicht von Computern verarbeitet und durchsucht werden können. Die drei gängigsten Dateiform
Dialogmarketing: Deutliche Artikulation Merkmale – einfach erklärt
Deutliche Artikulation bedeutet, dass du deine Worte klar und verständlich formulierst. Dies erreichst du durch präzise Lippen- und Zungenbewegungen sowie eine angemessene Sprechgeschwindigkeit. Zwei
Dialogmarketing: Fremdsprachen für internationale – einfach erklärt
Fremdsprachenkenntnisse sind bei der Angebotserstellung für internationale Kunden absolut entscheidend. Sie helfen dir, Missverständnisse zu vermeiden, Vertrauen aufzubauen und sowohl rechtliche als a
