HTML

Geschätzte Lektüre: 10 Minuten 516 Ansichten

HTML (HyperText Markup Language) ist die grundlegende Auszeichnungssprache, mit der Webseiten strukturiert und Inhalte im Internet dargestellt werden. Es handelt sich nicht um eine Programmiersprache, sondern um eine Auszeichnungssprache / Beschreibungssprache, die dem Browser mitteilt, wie Texte, Bilder, Links und andere Elemente angeordnet und formatiert werden sollen. HTML bildet das Grundgerüst jeder Website und wird durch CSS (für Design) und JavaScript (für Interaktivität) ergänzt.

Grundlagen von HTML

Aufbau eines HTML-Dokuments

Ein HTML-Dokument besteht aus einer hierarchischen Struktur von Tags (Markierungen), die in spitzen Klammern (< >) eingeschlossen sind. Jedes Dokument beginnt mit einer Dokumenttyp-Deklaration (<!DOCTYPE html>), gefolgt vom <html>-Element, das den gesamten Inhalt umschließt. Innerhalb von <html> gibt es zwei Hauptbereiche:
• <head>: Enthält Metadaten wie Titel, Zeichenkodierung und Verweise auf CSS/JS.
• <body>: Enthält den sichtbaren Inhalt der Webseite.

Beispiel: Grundgerüst einer HTML-Datei

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Meine erste Webseite</title>
</head>
<body>
    <h1>Willkommen auf meiner Seite!</h1>
    <p>Das ist ein Absatz.</p>
</body>
</html>

Wichtige HTML-Tags im Überblick

Überschriften: <h1> bis <h6> (von wichtigster bis unwichtigster Überschrift)

<h1>Hauptüberschrift</h1>
<h2>Unterüberschrift</h2>

Absätze: <p> für Textblöcke

<p>Dies ist ein Absatz.</p>

Links: <a> mit dem Attribut href

<a href="https://example.com">Besuche Example.com</a>

Bilder: <img> mit src (Pfad zum Bild) und alt (Alternativtext)

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

Listen:
Ungeordnete Liste (<ul> mit <li>-Elementen)

<ul>
  <li>Punkt 1</li>
  <li>Punkt 2</li>
</ul>

Geordnete Liste (<ol>)

<ol>
  <li>Erster Schritt</li>
  <li>Zweiter Schritt</li>
</ol>

Attribute in HTML

Attribute geben zusätzliche Informationen zu einem HTML-Element und werden innerhalb des Start-Tags angegeben. Einige wichtige Beispiele:

• class: Weist einem Element eine Klasse zu (für CSS/JS)

<p class="wichtig">Dieser Text ist hervorgehoben.</p>

• id: Eindeutige Identifikation eines Elements

<div id="header">Kopfbereich</div>

• style: Ermöglicht direkte CSS-Formatierung

<p style="color: blue;">Blauer Text</p>

Strukturelle HTML-Elemente

Moderne HTML-Versionen (HTML5) bieten semantische Elemente, die die Bedeutung von Bereichen einer Webseite klar definieren:
• <header>: Kopfbereich (oft mit Logo und Navigation)
• <nav>: Navigationsmenü
• <main>: Hauptinhalt der Seite
• <section>: Thematischer Abschnitt
• <article>: Eigenständiger Inhalt (z. B. Blog-Post)
• <aside>: Seitenleiste oder Zusatzinformationen
• <footer>: Fußbereich (Impressum, Kontakt)

Beispiel: Semantische Struktur einer Webseite

<body>
    <header>
        <h1>Mein Blog</h1>
        <nav>
            <a href="/">Startseite</a> |
            <a href="/about">Über mich</a>
        </nav>
    </header>
    <main>
        <article>
            <h2>Erster Blogeintrag</h2>
            <p>Inhalt des Artikels...</p>
        </article>
    </main>
    <footer>
        <p>© 2024 Mein Blog</p>
    </footer>
</body>

Tabellen und Formulare

Tabellen (<table>)

Tabellen werden mit <table>, <tr> (Zeile), <th> (Kopfzelle) und <td> (Datenzelle) erstellt.
Beispiel:

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

Formulare (<form>)

Formulare sammeln Benutzereingaben und senden sie an einen Server. Wichtige Elemente:

• <input>: Textfelder, Checkboxen, Radio-Buttons

<input type="text" placeholder="Name">
<input type="checkbox" id="agb"> <label for="agb">AGB akzeptieren</label>

• <textarea>: Mehrzeilige Texteingabe

<textarea rows="4" cols="50">Hier Text eingeben...</textarea>

• <button>: Schaltfläche zum Absenden

<button type="submit">Absenden</button>

Beispiel: Kontaktformular

<form action="/submit" method="post">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required>
    <br>
    <label for="email">E-Mail:</label>
    <input type="email" id="email" name="email" required>
    <br>
    <button type="submit">Senden</button>
</form>

Fortgeschrittene HTML-Konzepte

Einbinden von Medien

• Videos (<video>)

<video controls width="400">
    <source src="video.mp4" type="video/mp4">
    Ihr Browser unterstützt das Video-Tag nicht.
</video>

• Audio (<audio>)

<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
</audio>

Responsive Design mit <meta>-Tags

Für mobile Optimierung wird oft folgendes Meta-Tag im <head> verwendet:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

HTML-Validierung

Valides HTML folgt den Standards des W3C. Tools wie W3C Validator prüfen auf Fehler.

Skelett jeder Webseite

HTML ist das Skelett jeder Webseite – ohne sie gäbe es kein strukturiertes Web. Von einfachen Textstrukturen bis hin zu komplexen Formularen und semantischen Layouts bietet HTML alle notwendigen Werkzeuge, um Inhalte übersichtlich darzustellen. Durch die Kombination mit CSS und JavaScript entstehen moderne, interaktive Webanwendungen. Wer Webentwicklung lernen möchte, sollte daher mit HTML beginnen, da sie die unverzichtbare Grundlage bildet.

Dieses Dokument teilen

HTML

Oder Link kopieren

INHALT

Abonnieren

×
Cancel