path: root/files/de/web/html/index.html

---
title: 'HTML: HyperText Markup Language'
slug: Web/HTML
tags:
  - Einführung
  - Web Programmierung
translation_of: Web/HTML
---
<div>{{HTMLSidebar}}</div><p class="summary"><span class="seoSummary"><strong>HTML</strong> (HyperText Markup Language) ist der grundlegendste Baustein des Webs. Es beschreibt und definiert den <em>Inhalt</em> einer Webseite zusammen mit dem grundlegenden Layout der Webseite. Neben HTML werden im Allgemeinen andere Technologien verwendet, um das Erscheinungsbild (<a href="/de/docs/Web/CSS">CSS</a>) oder die Funktionalität/Verhalten (<a href="/de/docs/Web/JavaScript">JavaScript</a>) einer Webseite zu beschreiben.</span></p>

<p>"HyperText" bezieht sich auf Links, die Webseiten miteinander verbinden, entweder innerhalb einer einzelnen Webseite oder zwischen mehreren Webseiten. Links sind ein grundlegender Bestandteil des Webs. Indem Sie Inhalte in das Internet hochladen und mit Seiten verlinken, die von anderen Personen erstellt wurden, werden Sie ein aktiver Teilnehmer im World Wide Web.</p>

<p>HTML verwendet "Markup", um Texte, Bilder und andere Inhalte für die Anzeige in einem Webbrowser zu kommentieren. HTML-Markup beinhaltet spezielle "Elemente" wie {{HTMLElement("head")}}, {{HTMLElement("title")}}, {{HTMLElement("body")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("p")}}, {{HTMLElement("div")}}, {{HTMLElement("span")}}, {{HTMLElement("img")}}, {{HTMLElement("aside")}}, {{HTMLElement("audio")}}, {{HTMLElement("canvas")}}, {{HTMLElement("datalist")}}, {{HTMLElement("details")}}, {{HTMLElement("embed")}}, {{HTMLElement("nav")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("video")}} und viele andere.</p>

<p>Die Tags in HTML sind case-insensitive. Das heißt, sie können in Groß- und Kleinbuchstaben oder in einer Mischung geschrieben werden. Beispiel <strong>&lt;title&gt; </strong>tag kann als <strong>&lt;Title&gt;</strong>,<strong>&lt;TITLE&gt;</strong> oder auf andere Weise geschrieben werden.</p>

<p>Die folgenden Artikel helfen Ihnen, mehr über HTML zu erfahren.</p>

<section class="cleared" id="sect1">
<ul class="card-grid">
 <li><span>HTML Einführung</span>

  <p>Wenn Sie neu in der Webentwicklung sind, lesen Sie unbedingt unseren <a href="/de/docs/Learn/Getting_started_with_the_web">HTML Grundlagen</a> Artikel, um zu erfahren, was HTML ist und wie man es verwendet.</p>
 </li>
 <li><span>HTML Tutorials</span>
  <p>Artikel über die Verwendung von HTML sowie Tutorials und vollständige Beispiele finden Sie in unserem <a href="/de/docs/Learn/HTML">HTML Lernbereich</a>.</p>
 </li>
 <li><span>HTML Referenz </span>
  <p>In unserem umfangreichen Abschnitt <a href="/de/docs/Web/HTML/Reference">HTML Referenz</a> finden Sie die Details zu jedem Element und Attribut in HTML.</p>
 </li>
</ul>

<div class="row topicpage-table">
<div class="section">
<h2 class="Tools" id="Tutorials_für_Anfänger">Tutorials für Anfänger</h2>

<p>Unser <a href="/de/docs/Learn/HTML">HTML Lernbereich</a> verfügt über mehrere Module, die HTML von Grund auf vermitteln - es sind keine Vorkenntnisse erforderlich.</p>

<dl>
 <dt><a href="/de/docs/Learn/HTML/Introduction_to_HTML">Einführung in HTML</a></dt>
 <dd>Dieses Modul schafft die Voraussetzungen, um Sie an wichtige Konzepte und Syntaxen zu gewöhnen, wie z.B. die Anwendung von HTML auf Text, die Erstellung von Hyperlinks und die Verwendung von HTML zur Strukturierung einer Webseite.</dd>
 <dt><a href="/de/docs/Learn/HTML/Multimedia_and_embedding">Einbettung von Multimedia Inhalten</a></dt>
 <dd>Dieses Modul erklärt, wie Sie HTML verwenden können, um Multimedia Inhalte in Ihre Webseite aufnehmen können, einschließlich der verschiedenen Möglichkeiten, wie Bilder eingebunden werden können, und wie Sie Video, Audio oder sogar ganze andere Webseiten einbetten können.</dd>
 <dt><a href="/de/docs/Learn/HTML/Tables">HTML Tabellen</a></dt>
 <dd>Die verständliche und einfache Darstellung von Tabellendaten auf einer Webseite kann eine Herausforderung sein. Dieses Modul behandelt grundlegende Tabellen sowie komplexere Funktionen wie die Implementierung von Beschriftungen und Zusammenfassungen.</dd>
 <dt><a href="/de/docs/Learn/HTML/Forms">HTML Formulare</a></dt>
 <dd>Formulare sind ein sehr wichtiger Teil des Webs - sie bieten viele Funktionen, die Sie für die Interaktion mit Websites benötigen, z.B. Registrierung und Anmeldung, Feedback, Kauf von Produkten und mehr. Dieses Modul ermöglicht Ihnen den Einstieg in die Erstellung der Client-seitigen/Frontend-Teile von Formularen.</dd>
 <dt><a href="/de/docs/Learn/HTML/Howto">Verwenden Sie HTML, um häufige Probleme zu lösen</a></dt>
 <dd>Enthält Links zu Inhaltsabschnitten, die erklären, wie man HTML verwendet, um sehr häufige Probleme beim Erstellen einer Webseite zu lösen: Umgang mit Titeln, Hinzufügen von Bildern oder Videos, Hervorheben von Inhalten, Erstellen einer Grundform usw.</dd>
</dl>

<h2 id="Fortgeschrittene_Themen">Fortgeschrittene Themen</h2>

<dl>
 <dt class="landingPageList"><a href="/de/docs/Web/HTML/CORS_enabled_image">CORS fähiges Bild</a></dt>
 <dd class="landingPageList">Das Attribut <code><a href="/de/docs/Web/HTML/Element/img#attr-crossorigin">crossorigin</a></code>, in Kombination mit einem entsprechenden <a class="glossaryLink" href="/de/docs/Glossar/CORS">CORS</a> header, ermöglicht es, Bilder, die durch das Element {{HTMLElement("img")}} definiert sind, aus fremden Quellen zu laden und in einem {{HTMLElement("canvas")}} Element zu verwenden, als würden sie aus dem aktuellen Ursprung geladen.</dd>
 <dt class="landingPageList"><a href="/de/docs/Web/HTML/CORS_settings_attributes">Attribute der CORS Einstellungen</a></dt>
 <dd class="landingPageList">Einige HTML-Elemente, die Unterstützung für <a href="/de/docs/HTTP/Access_control_CORS">CORS</a> bieten, wie {{HTMLElement("img")}} oder {{HTMLElement("video")}}, haben ein <code>crossorigin</code> Attribut (<code>crossOrigin</code> Eigenschaft), mit dem Sie die CORS-Anfragen für die abgerufenen Daten des Elements konfigurieren können.</dd>
 <dt class="landingPageList"><a href="/de/docs/Web/HTML/Focus_management_in_HTML">Fokusverwaltung in HTML</a></dt>
 <dd class="landingPageList">Die <code><a href="/de/docs/Web/API/Document/activeElement">activeElement</a></code> DOM-Attribut und das <code><a href="/de/docs/Web/API/Document/hasFocus">hasFocus()</a></code> DOM-Methode helfen Ihnen, die Interaktionen eines Benutzers mit Elementen auf einer Webseite zu verfolgen und zu steuern.</dd>
 <dt class="landingPageList"><a href="/de/docs/Web/HTML/Using_the_application_cache">Verwendung des Anwendungs Cache</a></dt>
 <dd class="landingPageList">Durch den Anwendungs Cache können webbasierte Anwendungen offline ausgeführt werden. Sie können die Schnittstelle <strong>Application Cache</strong> (<em>AppCache</em>) verwenden, um Ressourcen anzugeben, die der Browser zwischenspeichern und für Offline-Benutzer verfügbar machen soll. Anwendungen, die im Cache gespeichert sind, laden und funktionieren korrekt, auch wenn Benutzer auf die Schaltfläche Aktualisieren klicken, wenn sie offline sind.</dd>
 <dt class="landingPageList"><a href="https://developer.mozilla.org/de/docs/Web/HTML/Preloading_content">Vorladen von Inhalten mit rel="preload".</a></dt>
 <dd class="landingPageList">Das Attribut {{htmlattrxref("rel", "link")}} des {{htmlelement("link")}} Elements ermöglicht es Ihnen, deklarative Fetch-Anfragen in Ihr HTML {{htmlelement("head")}} zu schreiben, wobei Sie Ressourcen angeben, die Ihre Seiten sehr bald nach dem Laden benötigen, die Sie daher früh im Lebenszyklus einer Seitenladung vorab laden möchten, bevor die Haupt-Rendering-Maschine des Browsers einsetzt. Dadurch wird sichergestellt, dass sie früher verfügbar sind und weniger wahrscheinlich das erste Rendering der Seite blockieren, was zu Leistungssteigerungen führt. Dieser Artikel bietet eine grundlegende Anleitung, wie <code>preload</code> funktioniert.</dd>
</dl>
</div>

<div class="section">
<h2 class="Documentation" id="Referenzen">Referenzen</h2>

<dl>
 <dt class="landingPageList"><a href="/de/docs/Web/HTML/Reference">HTML Referenz</a></dt>
 <dd class="landingPageList">HTML besteht aus <strong>Elementen</strong>, von denen jedes durch eine Anzahl von <strong>Attributen</strong> modifiziert werden kann. HTML Dokumente werden über <a href="/de/docs/Web/HTML/Link_types">links</a> miteinander verbunden.</dd>
 <dt class="landingPageList"><a href="/de/docs/Web/HTML/Element">HTML Element Referenz</a></dt>
 <dd class="landingPageList">Durchsuchen Sie eine Liste aller <a class="glossaryLink" href="/de/docs/Glossar/HTML">HTML</a> <a class="glossaryLink" href="/de/docs/Glossar/Element">Elemente</a>.</dd>
 <dt class="landingPageList"><a href="/de/docs/Web/HTML/Attributes">HTML Attribut Referenz</a></dt>
 <dd class="landingPageList">Elemente in HTML haben <strong>Attribute</strong>. Dies sind zusätzliche Werte, die die Elemente konfigurieren oder ihr Verhalten auf verschiedene Weise anpassen.</dd>
 <dt class="landingPageList"><a href="/de/docs/Web/HTML/Global_attributes">Globale Attribute</a></dt>
 <dd class="landingPageList">Globale Attribute können für alle <a href="/de/docs/Web/HTML/Element">HTML-Elemente</a>, <em>auch für diejenigen, die nicht im Standard</em> angegeben sind, angegeben werden. Das bedeutet, dass alle nicht standardmäßigen Elemente diese Attribute weiterhin zulassen müssen, auch wenn diese Elemente das Dokument nicht HTML5 kompatibel machen.</dd>
 <dt class="landingPageList"><a href="/de/docs/Web/HTML/Inline_elements">Inline Elemente</a> und <a href="/de/docs/Web/HTML/Block-level_elements">Block Level Elemente</a></dt>
 <dd class="landingPageList">HTML Elemente sind in der Regel "inline" oder "block-level" Elemente. Ein Inline-Element belegt nur den Raum, der durch die Tags begrenzt ist, die es definieren. Ein Element auf Blockebene nimmt den gesamten Platz seines übergeordneten Elements (Containers) ein und erzeugt so einen "Block".</dd>
 <dt class="landingPageList"><a href="/de/docs/Web/HTML/Link_types">Link Typen</a></dt>
 <dd class="landingPageList">In HTML können verschiedene Link-Typen verwendet werden, um die Verknüpfung zwischen zwei Dokumenten herzustellen und zu definieren. Zu den Link Elementen die verwendet werden können gehören <a href="/de/docs/Web/HTML/Element/a"><code>&lt;a&gt;</code></a>, <a href="/de/docs/Web/HTML/Element/area"><code>&lt;area&gt;</code></a> und <a href="/de/docs/Web/HTML/Element/link"><code>&lt;link&gt;</code></a>.</dd>
 <dt class="landingPageList"><a href="/de/docs/Web/HTML/Supported_media_formats">Medienformate die von HTML unterstützt werden sind Audio und Video Elemnte</a></dt>
 <dd class="landingPageList">The <a href="/de/docs/Web/HTML/Element/audio"><code>&lt;audio&gt;</code></a> und <a href="/de/docs/Web/HTML/Element/video"><code>&lt;video&gt;</code></a> Elemente ermöglichen die Wiedergabe von Audio- und Videomedien. Diese Elemente bieten eine Browser-native Alternative zu Adobe Flash und anderen Plug-Ins.</dd>
 <dt class="landingPageList"><a href="/de/docs/Web/HTML/Kinds_of_HTML_content">Arten von HTML Inhalten</a></dt>
 <dd class="landingPageList">HTML umfasst verschiedene Arten von Elementen, von denen jeder in bestimmten Kontexten verwendet werden darf und in anderen nicht zulässig ist. Ebenso hat jede eine Reihe von Inhalten, die sie enthalten kann und Elemente die darin nicht verwendet werden können. Dies ist ein Leitfaden für diese Kategorien.</dd>
 <dt class="landingPageList"><a href="/de/docs/Web/HTML/Quirks_Mode_and_Standards_Mode">Eigenarten und Normen</a></dt>
 <dd class="landingPageList">Historische Informationen über Eigenarten und Normen.</dd>
</dl>

<h2 class="landingPageList" id="Verwandte_Themen">Verwandte Themen</h2>

<dl>
 <dt><a href="/de/docs/Web/HTML/Applying_color">Hinzufügen von Farben mit CSS auf HTML Elemente</a></dt>
 <dd>Dieser Artikel beschreibt die meisten der Möglichkeiten, wie Sie CSS verwenden, um HTML Elementen Farben hinzuzufügen, und listet auf, welche Teile von HTML-Dokumenten farbig dargestellt werden können und welche CSS-Eigenschaften dabei zu verwenden sind. Enthält Beispiele, Links zu Tools zur Farb Palettenerstellung und vieles mehr.</dd>
</dl>
</div>
</div>
<span class="alllinks"><a href="/de/docs/tag/HTML">Alles anzeigen...</a></span></section>