Englisch
Französisch
Arabisch
Deutsch
Español
Português
Italiano
Nederlands
Русский
日本語
中文
한국어
Grundlagen von HTML
Von der Struktur zur Routine
Sie können bereits eine einfache Seite bauen. Lernen wir nun die Elemente kennen, die Sie täglich verwenden — und wie man sie richtig einsetzt.
Die am häufigsten verwendeten Elemente
| Element | Zweck | Beispiel |
|---|---|---|
<h1>–<h6> | Überschriften, wichtigste bis unwichtigste | <h1>Titel</h1> |
<p> | Ein Textabsatz | <p>Hallo</p> |
<a> | Ein Link zu einer anderen Seite | <a href="...">Link</a> |
<img> | Ein Bild | <img src="..." alt="..."> |
<ul>/<li> | Eine Aufzählungsliste | <li>Eintrag</li> |
Attribute: zusätzliche Informationen
Attribute stehen im öffnenden Tag und konfigurieren ein Element. Am häufigsten nutzen Sie href (das Ziel eines Links) und src/alt (ein Bild und seine Textbeschreibung).
<a href="https://devosoft.com">Devosoft besuchen</a>
<img src="logo.png" alt="Devosoft-Logo">Immer alt-Text angeben
Das Attribut alt beschreibt ein Bild für Screenreader-Nutzer und wird angezeigt, wenn das Bild nicht lädt. Lassen Sie es niemals weg.
Semantisches HTML
Statt alles in anonyme <div> zu packen, verwenden Sie Tags, die ihre Rolle beschreiben. Semantisches Markup ist leichter lesbar, besser für SEO und deutlich barrierefreier.
<header>...Kopfbereich...</header>
<nav>...Menue...</nav>
<main>
<article>...der Hauptinhalt...</article>
</main>
<footer>...Fussbereich...</footer>Vermeiden Sie die „div-Suppe“
Eine Seite, die nur aus <div> besteht, sagt dem Browser nichts über die Bedeutung. Bevorzugen Sie <header>, <nav>, <main>, <section> und <footer>, wann immer es passt.
Ein erstes Formular
Formulare erfassen Eingaben des Nutzers. Jedes Feld sollte mit einem <label> verknüpft sein — für Klarheit und Barrierefreiheit.
<form>
<label for="email">E-Mail</label>
<input id="email" type="email" name="email">
<button type="submit">Anmelden</button>
</form>Was ist der Unterschied zwischen <section> und <div>?
<section> gruppiert zusammengehörige Inhalte mit Bedeutung; <div> ist ein neutraler Container, vor allem für die Gestaltung.Darf ich mehrere <h1> auf einer Seite haben?
<h1> pro Seite, danach <h2>–<h6> für eine klare Hierarchie.