Zum Inhalt springen
BeispielWerk
English

HTML Beispiele: Formulare, Tabellen und Meta-Tags

HTML ist die Auszeichnungssprache für Webseiten. Die Snippets zeigen Formulare mit Browser-Validierung und autocomplete, barrierefreie Felder mit Fehlermeldung, Tabellen, ein semantisches Seitengerüst, Meta-Angaben, Bilder, Zeichenverweise und eingebettete Medien. Zwei Beispiele sind absichtlich fehlerhaft, etwa mit ungeschlossenen Tags oder nicht maskierten spitzen Klammern.

15 Varianten auf einer Seite, jede mit eigenem Kopier- oder Download-Knopf. Darunter: 2× Absichtlich ungültig.

  • HTML: Formular mit allen Eingabetypen

    <form action="/absenden" method="post">
  <label>Text <input type="text" name="text" value="Beispiel"></label>
  <label>Passwort <input type="password" name="passwort"></label> …

  • HTML: barrierefreies Formularfeld mit Fehlermeldung

    <div class="feld">
  <label for="email">E-Mail-Adresse <span aria-hidden="true">*</span></label>
  <input type="email" id="email" name="email" required aria-required="true" aria-invalid="true" aria-describedby="email-hilfe email-fehler" aut …

  • HTML: Optionsgruppe mit fieldset und legend

    <fieldset>
  <legend>Zahlungsart</legend>
  <label><input type="radio" name="zahlung" value="rechnung" checked> Rechnung</label> …

  • HTML: Formular mit Browser-Validierung

    <form>
  <input name="plz" pattern="[0-9]{5}" title="Fünf Ziffern" required inputmode="numeric" autocomplete="postal-code">
  <input name="alter" type="number" min="18" max="120" required> …

  • HTML: Adressformular mit autocomplete-Attributen

    <form>
  <input name="vorname" autocomplete="given-name">
  <input name="nachname" autocomplete="family-name"> …

  • HTML: Tabelle mit Kopf, Fuß und Beschriftung

    <table>
  <caption>Bestellung B-2026-000101</caption>
  <thead> …

  • HTML: semantisches Seitengerüst

    <!doctype html>
<html lang="de">
<head> …

  • HTML: Meta-Angaben für Suchmaschinen und soziale Netze

    <link rel="canonical" href="https://example.com/seite">
<meta name="robots" content="index, follow">
<meta property="og:type" content="website"> …

  • HTML: Listen, details und Zitat

    <ul><li>Eins</li><li>Zwei</li></ul>
<ol><li>Erster</li><li>Zweiter</li></ol>
<dl><dt>Begriff</dt><dd>Erklärung</dd></dl> …

  • HTML: Bild mit Alternativtext und picture

    <img src="https://example.com/bild.jpg" alt="Beschreibung des Bildes" width="800" height="450" loading="lazy">
<picture>
  <source srcset="https://example.com/bild.avif" type="image/avif"> …

  • HTML: Zeichenverweise (Entities)

    &amp; &lt; &gt; &quot; &apos; &nbsp; &copy; &euro; &auml;&ouml;&uuml;&szlig; &#8364; &#x1F600; &shy; &hellip;

  • HTML: Video und eingebetteter Inhalt

    <video controls width="640" poster="https://example.com/vorschau.jpg">
  <source src="https://example.com/video.mp4" type="video/mp4">
  <track kind="captions" src="https://example.com/untertitel.vtt" srclang="de" label="Deutsch"> …

  • Fehlerhaftes HTML: ungeschlossene und falsch verschachtelte TagsAbsichtlich ungültig

    <div><p>Absatz ohne Ende
<b><i>falsch</b> verschachtelt</i>
<ul><li>Eins<li>Zwei</ul> …

    Browser reparieren so etwas stillschweigend; Validatoren melden Fehler.

  • HTML: Text mit spitzen Klammern ohne MaskierungAbsichtlich ungültig

    <p>5 < 7 und 7 > 5 und Tom & Jerry</p>

    Browser lesen es, doch strenge Validatoren verlangen &lt; &gt; &amp;.

Weitere Themen in Datenformate & Snippets