HTML Codes, Befehle und Tags

Von /

Hier findest du die wichtigsten und meistgenutzten HTML Codes und Tags. Diese kannst du ganz einfach aus der Tabelle kopieren. Ich habe dir jeweils eine kurze Erklärung beigefügt. Darunter habe ich jeweils ein Codebeispiel eingefügt. Dieses kannst du ganz einfach in eine leere Datei kopieren (beispielsweise mit dem Editor erstellt oder Notepad++) und index.html genannt. Dann kannst du den Code sofort im Browser testen.

Übersicht der meistgenutzten HTML Befehle

KategorieTagErklärung
Struktur und Dokumentaufbau<!DOCTYPE html>Definiert den Dokumenttyp und die HTML-Version.
<html>Root-Element eines HTML-Dokuments.
<head>Enthält Meta-Informationen, Link zu Stylesheets usw.
<body>Enthält den sichtbaren Inhalt der Webseite.
Textformatierung<h1>...<h6>Überschriften verschiedener Ebenen.
<p>Absatz.
<strong>Zeigt den Text fett an.
<em>Zeigt den Text kursiv an.
Hyperlinks<a>Verankerungs- oder Hyperlink-Tag.
Listen<ul>Erstellt eine ungeordnete Liste.
<ol>Erstellt eine geordnete Liste.
<li>Ein Element in einer Liste.
Grafiken und Multimedia<img>Bindet ein Bild in die Webseite ein.
<audio>Für die Integration von Audiodateien.
<video>Zum Einbetten von Videodateien.
Formulare<form>Definiert ein HTML-Formular.
<input>Allgemeines Eingabeelement.
<label>Bezeichnung für ein <input>-Element.
<textarea>Mehrzeiliges Eingabefeld für Text.
<button>Schaltfläche für Aktionen.
Tabellen<table>Definiert eine Tabelle.
<tr>Definiert eine Tabellenzeile.
<td>Definiert eine Tabellenzelle.
<th>Definiert eine Überschriftenzelle.

Codebeispiele zum Kopieren findest du unten

1. Struktur und Dokumentaufbau von HTML Code

Diese Kategorie beschäftigt sich mit den grundlegenden HTML-Tags, die für den Aufbau eines jeden HTML-Dokuments notwendig sind. Diese Tags legen den generellen Rahmen und die Struktur einer Webseite fest.

TagErklärungHinweise
<!DOCTYPE html>Definiert den Dokumenttyp und die HTML-Version.Muss immer als erstes im Dokument stehen.
<html>Root-Element eines HTML-Dokuments.Umschließt das gesamte HTML-Dokument.
<head>Enthält Meta-Informationen, Link zu Stylesheets usw.Steht vor dem <body>-Tag.
<body>Enthält den sichtbaren Inhalt der Webseite.Kommt nach dem <head>-Tag.

Codebeispiel:

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Beispiel Webseite</title>
</head>
<body>
    <h1>Willkommen auf meiner Webseite!</h1>
    <p>Dies ist ein einfaches Beispiel für eine Webseite.</p>
</body>
</html>

Erklärung zum Codebeispiel:

  • <!DOCTYPE html>: Dieser Tag informiert den Webbrowser darüber, dass es sich um ein Dokument des Typs HTML5 handelt.
  • <html lang="de">: Das Root-Element des Dokuments. Das Attribut lang="de" gibt an, dass die primäre Sprache des Inhalts Deutsch ist.
  • <head>: In diesem Bereich des Dokuments werden verschiedene Metainformationen und Ressourcenlinks platziert, die für die Darstellung und Funktionalität der Webseite notwendig sind.
  • <meta charset="UTF-8">: Gibt den Zeichensatz für das Dokument an.
  • <meta name="viewport" ...>: Ein Hinweis für mobile Browser, wie die Seite angezeigt werden soll.
  • <title>: Der Titel des Dokuments, der in der Registerkarte des Browsers angezeigt wird.
  • <body>: Hier wird der eigentliche, sichtbare Inhalt der Webseite platziert. In diesem Beispiel besteht der Inhalt aus einer Überschrift und einem Absatz.

Mehr zum Thema: HTML Grundgerüst

2. Textformatierung HTML Codes

Die Kategorie „Textformatierung“ bezieht sich auf HTML-Tags, die verwendet werden, um Text auf Webseiten zu strukturieren und hervorzuheben. Hierzu gehören Überschriften, Absätze und Tags zur Betonung von Text.

TagErklärungHinweise
<h1>...<h6>Überschriften verschiedener Ebenen.<h1> hat die höchste Priorität, <h6> die niedrigste.
<p>Absatz.
<strong>Zeigt den Text fett an.Oft zur Betonung verwendet.
<em>Zeigt den Text kursiv an.Oft zur Hervorhebung verwendet.

Codebeispiel:

<h1>Das ist eine Überschrift</h1>
<p>Dies ist ein <strong>fett gedruckter</strong> Absatz. Hier ist ein weiterer <em>kursiver</em> Text.</p>

3. Hyperlinks

Hyperlinks sind Verbindungen zu anderen Webseiten, Dokumenten oder Ressourcen. Mit dem <a>-Tag kann man solche Links erstellen, um Benutzern die Navigation zu ermöglichen.

TagErklärungHinweise
<a>Verankerungs- oder Hyperlink-Tag.Das href-Attribut gibt die URL des verlinkten Dokuments an.

Codebeispiel:

<p>Besuchen Sie die <a href="https://www.html-einfach.de/">HTML lernen Webseite</a> für weitere Informationen.</p>

Erklärung zum Codebeispiel:

  • Im obigen Beispiel führt der Link „HTML lernen Webseite“ den Benutzer zur html-einfach.de, wenn darauf geklickt wird.

Mehr zum Thema: HTML Links erstellen

4. Listen

Erklärung: Listen helfen dir dabei, Informationen geordnet oder ungeordnet zu präsentieren. Sie sind nützlich, um Inhalte wie Aufzählungspunkte, Anweisungen oder Definitionen übersichtlich darzustellen.

TagErklärungHinweise
<ul>Erstellt eine ungeordnete Liste.Die Listenelemente werden mit Bullet Points dargestellt.
<ol>Erstellt eine geordnete Liste.Die Listenelemente werden nummeriert dargestellt.
<li>Ein Element in einer Liste.Muss immer innerhalb eines <ul> oder <ol> stehen.

Codebeispiel:

<ul>
    <li>Apfel</li>
    <li>Banane</li>
    <li>Cherry</li>
</ul>

5. Grafiken und Multimedia

Mit diesen Tags kannst du verschiedene Medienelemente, wie Bilder, Videos und Audiodateien, in deine Webseite einbinden, um sie ansprechender und interaktiver zu gestalten.

TagErklärungHinweise
<img>Bindet ein Bild in die Webseite ein.Das src-Attribut gibt den Pfad zur Bilddatei an.
<audio>Für die Integration von Audiodateien.Kann mit dem controls-Attribut gesteuert werden.
<video>Zum Einbetten von Videodateien.Verwende das controls-Attribut, um Steuerelemente anzuzeigen.

Codebeispiel:

<img src="bildpfad.jpg" alt="Eine Beschreibung des Bildes">

<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    Dein Browser unterstützt das Audioelement nicht.
</audio>

<video controls>
    <source src="video.mp4" type="video/mp4">
    Dein Browser unterstützt das Videoelement nicht.
</video>

Erklärungen zu den Codebeispielen:

  • Bei <img> gibt das alt-Attribut eine alternative Beschreibung für das Bild an, die angezeigt wird, falls das Bild nicht geladen werden kann oder für Screenreader.
  • Mit <audio> und <video> kannst du Medieninhalte einbinden. Das controls-Attribut zeigt Steuerelemente wie Play, Pause und Lautstärke an. Innerhalb dieser Tags kannst du das <source>-Element verwenden, um auf die Mediadatei zu verweisen. Der angegebene Text (z. B. „Dein Browser unterstützt…“) wird angezeigt, wenn der Browser das Audio- oder Videoelement nicht unterstützt.

Mehr zum Thema: HTML Bild einfügen

6. Formulare

Formulare ermöglichen es dir, Benutzereingaben zu sammeln, wie z.B. Anmeldeinformationen, Feedback oder andere Daten. Sie bestehen aus verschiedenen Eingabeelementen und können Daten an einen Server senden.

TagErklärungHinweise
<form>Definiert ein HTML-Formular.Verwendet das action-Attribut, um Daten an einen Server zu senden.
<input>Allgemeines Eingabeelement.Das type-Attribut bestimmt die Art der Eingabe, z.B. Text, Passwort, Checkbox.
<label>Bezeichnung für ein <input>-Element.Verknüpft mit einem Eingabeelement durch das for-Attribut.
<textarea>Mehrzeiliges Eingabefeld für Text.
<button>Schaltfläche für Aktionen.Kann zum Senden von Formulardaten verwendet werden.

Codebeispiel:

<form action="/url-wo-daten-gesendet-werden" method="post">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">
    
    <label for="nachricht">Nachricht:</label>
    <textarea id="nachricht" name="nachricht"></textarea>
    
    <button type="submit">Senden</button>
</form>

Mehr zum Thema: Formulare in HTML erstellen

7. Tabellen

Tabellen helfen dir, Daten in einem strukturierten Format zu präsentieren, wobei Zeilen, Spalten und Zellen verwendet werden. Obwohl sie hauptsächlich für tabellarische Daten vorgesehen sind, wurden sie in der Vergangenheit oft für das Layout von Webseiten missbraucht.

TagErklärungHinweise
<table>Definiert eine Tabelle.
<tr>Definiert eine Tabellenzeile.Innerhalb eines <table>-Elements.
<td>Definiert eine Tabellenzelle.Innerhalb eines <tr>.
<th>Definiert eine Überschriftenzelle.Unterscheidet sich von <td> durch Fettdruck und Zentrierung.

Codebeispiel:

<table border="1">
    <tr>
        <th>Name</th>
        <th>Alter</th>
    </tr>
    <tr>
        <td>Anna</td>
        <td>25</td>
    </tr>
    <tr>
        <td>Bert</td>
        <td>30</td>
    </tr>
</table>

Erklärung zum Codebeispiel:

  • Die Tabelle hat zwei Spalten: „Name“ und „Alter“. Die Überschriftenzellen (<th>) definieren die Spaltentitel und die normalen Zellen (<td>) enthalten die eigentlichen Daten.

Mehr zum Thema: HTML Tabellen / HTML Table

Nach oben scrollen