HTML 5 Mega-Spickzettel

Unten finden Sie eine komplette Liste mit allen HTML5 Tags / Elementen inklusive Beschreibung wofür sie verwendet werden

Neue HTML 5 - Tags

  • <article>

    Markiert einen eigenständigen Inhalt, der unhabhängig von anderen Inhalten sein kann

  • <aside>

    Markiert Abschnitte einer Seite, deren Inhalt nur in einem indirekten Zusammenhang mit dem umgebenden Inhalt steht

  • <audio>

    Definiert einen musikalischen Inhalt

  • <bdi>

    Markiert Text, der vom umgebenden Inhalt, wegen bidirektionaler Formatierung, isoliert werden soll

  • <canvas>

    Um visuelle Effekte, Animationen, Grafiken oder Bilder mit JavaScript dynamisch darzustellen

  • <command>

    Markiert aufrufbaren Befehl für den Benutzer

  • <datalist>

    Definiert eine Dropdown Liste

  • <datatemplate>

    Definiert eine Daten Vorlage

  • <datagrid>

    Definiert eine Daten-Tabelle

  • <details>

    Definiert Details eines Elements

  • <dialog>

    Definiert interaktiven Teil einer Applikation

  • <embed>

    Definiert eingebetteten Inhalt

  • <figcaption>

    Definiert die Beschriftung einer Abbildung

  • <figure>

    Definiert eine Gruppe von Medieninhalten

  • <footer>

    Markiert die Fußzeile für einen Abschnitt oder die komplette Seite

  • <header>

    Markiert die Kopfzeile für einen Abschnitt oder die komplette Seite

  • <hgroup>

    Markiert Gruppe von Überschriften für einen Abschnitt

  • <keygen>

    Generierter Schlüssel: Kontrollelement zur Erzeugung eines Paares aus öffentlichem und privaten Schlüssel

  • <main>

    Spezifiziert den Hauptinhaltsbereich eines HTML Dokuments

  • <menuitem>

    Spezifiziert den Inhalt, den der Besucher über ein Popup Menü öffnen kann

  • <mark>

    Markiert einen markierten Text

  • <meter>

    Markiert eine Messung im definierten Bereich

  • <nav>

    Definiert Navigations Links

  • <output>

    Repräsentiert die Ergebnisse einer Berechnung

  • <progress>

    Markiert ein Element zur Fortschrittsanzeige

  • <rb>

    Definiert Ruby Basistext

  • <rp>

    Umklammert den <ruby> Text, wenn der Browser keine Ruby-Annotationen unterstützt

  • <rt>

    Definiert den Text einer Ruby-Annotation

  • <rtc>

    Markiert einen Ruby Text Container

  • <ruby>

    Markiert Textabschnitt mit Ruby-Annotationen

  • <section>

    Markiert einen Abschnitt in einem Dokument

  • <source>

    Definiert Angabe für alternative Medienressourcen

  • <summary>

    Definiert eine Zusammenfassung

  • <template>

    Definiert HTML Fragmente, die kopiert und per Script in das HTML Dokument eingefügt werden können

  • <time>

    Markiert Datum und Uhrzeit

  • <track>

    Definiert zusätzliche Medienspuren

  • <video>

    Wird zum einbetten eines Videos verwendet

  • <wbr>

    Definiert möglichen Zeilenumbruch

Exisitierende HTML5 Tags

  • <!--..-->

    Definiert einen Kommentar

  • <!doctype>

    Definiert einen Dokumenttyp

  • <a>

    Markiert einen Hyperlink

  • <abbr>

    Definiert eine Abkürzung

  • <address>

    Markiert eine Adresse

  • <area>

    Definiert in Verbindung mit dem <map> Element eine Image-Map

  • <b>

    Markiert einen fettgedruckten Text

  • <base>

    Definiert Basis-URL für in der Seite verwendete relative URLs

  • <bdo>

    Wird verwendet um die Textrichtung zu steuern

  • <blockquote>

    Kennzeichnet ein langes Zitat

  • <body>

    Markiert den Hauptinhalt des HTML Dokuments

  • <br>

    Definiert einen einfachen Zeilenumbruch

  • <button>

    Definiert einen klickbaren Button

  • <caption>

    Definiert eine Tabellenüberschrift

  • <cite>

    Definiert einen Titel eines Zitats

  • <code>

    Definiert den Codetext

  • <col>

    Definiert die Attribute für Spalten

  • <colgroups>

    Definiert Attribute für Spaltengruppen

  • <dd>

    Definiert die Definition der Beschreibung

  • <del>

    Definiert einen gelöschten Text

  • <div>

    Definiert ein Container-Element ohne spezielle semantische Bedeutung

  • <dfn>

    Ddefinierende Instanz eines Begriffs

  • <dl>

    Definitionsliste

  • <dt>

    Definitions Begriff

  • <em>

    Markiert hervorgehobenen Text

  • <fieldset>

    Definiert das Kontrollelement in einem Formular

  • <form>

    Definiert ein Formular

  • <h1> to <h6>

    Definiert die Überschrift 1 - Überschrift 6

  • <head>

    Definiert die Kopfzeile: Informationen des Dokuments und Sammlung von Metadaten

  • <hr>

    Definiert den thematischen Bruch zwischen Absätzen eines Abschnitts

  • <html>

    Definiert ein HTML Dokument

  • <i>

    Markiert kursiven Text

  • <iframe>

    Wird zum Einbinden von Inline-Frames

  • <img>

    Definiert eine Bilddatei

  • <input>

    Definiert ein Eingabefeld

  • <ins>

    Definiert einen eingebundenen Text

  • <kbd>

    Definiert einen Keyboard Text

  • <label>

    Definiert Beschriftung für ein Formular-Kontrollelement

  • <legend>

    Definiert Beschriftung für ein <fieldset>-Element

  • <li>

    Definiert Listeneintrag

  • <link>

    Definiert einen Link zu einem externen Dokument

  • <map>

    Definiert eine Landkarte in Form eines Bildes

  • <menu>

    Definiert das Menü

  • <meta>

    Definiert die Meta Information

  • <noscript>

    Definiert alternative Inhalte, die angezeigt werden, wenn der Browser kein Skripting unterstützt

  • <object>

    Definiert ein eingebundenes Objekt

  • <ol>

    Definiert eine geordnete Liste

  • <optgroup>

    Definiert logisch gruppierte Auswahloptionen

  • <option>

    Definiert Optionen in einer Drop-Down Liste

  • <p>

    Definiert einen Paragraph

  • <param>

    Definiert ein Parameter für ein Objekt

  • <pre>

    Definiert ein vorformatiertes Objekt

  • <q>

    Definiert ein kurzes Zitat

  • <samp>

    Definiert einen Beispielcomputercode

  • <select>

    Definiert eine wählbare Liste

  • <small>

    Definiert einen kleinen Text

  • <span>

    Gruppiert Stile auf Inline-Elemente

  • <strong>

    Definiert wichtigen, hervorgehobenern Text

  • <style>

    Definition eines internen CSS-Stylesheets

  • <sub>

    Markiert tiefgestellten/hochgestellten Text

  • <sup>

    Markiert tiefgestellten/hochgestellten Text

  • <table>

    Definiert eine Tabelle

  • <tbody>

    Repräsentiert eine Gruppe von Tabellenzeilen, die Tabellendaten enthalten

  • <td>

    Definiert eine Tabellenzelle

  • <textarea>

    Definiert einen Textbereich

  • <tfoot>

    Definiert eine Tabelle im Footer

  • <th>

    Definiert eine Tabelle im Header

  • <thead>

    Markiert die Gruppe der Tabellenzeilen, die die Beschriftungen der Tabellenspalten enthalten

  • <title>

    Definiert den Titel des HTML Dokuments

  • <tr>

    Definiert eine Tabellenreihe

  • <ul>

    Definiert eine ungeordnete Liste

  • <var>

    Definiert Variable

Alte nicht unterstützte Tags

  • <acronym>

    Akronym

  • <applet>

    Applet

  • <basefont>

    Hauptschriftart

  • <bgsound>

    Hintergrund-Sound

  • <big>

    Großer Text

  • <center>

    Zentrierter Text

  • <fn>

    Fußnote

  • <font>

    Schriftart, Größe und Farbe

  • <frame>

    Rahmen

  • <frameset>

    Set von verschiedenen Rahmen

  • <isindex>

    Wird für die Abfrage eines Dokuments durch ein Textfeld verwendet

  • <dir>

    Verzeichnisliste

  • <noembed>

    Nicht eingebetteter Bereich

  • <noframes>

    Nicht eingerahmter Bereich

  • <s>

    Durchgestrichener Text

  • <tt>

    gibt Fernschreiber Text

  • <u>

    Unterstrichener Text

  • <xmp>

    Vorformatierter Text

<Globale Attribute>

Neue
HTML 5 Attribute

  • contenteditable

    Definiert ein Set von verschiedenen Rahmen

  • oncontextmenu

    Gibt an ob rechte Maustaste ein Kontextmenü anfordert

  • draggable

    Definiert ob der User ein Element verschieben kann

  • dropzone

    Definiert was passiert, wenn verschobenes Element fallen gelassen wird

  • hidden

    Definiert ein nicht relevantes Element

  • spellcheck

    Gibt an, wenn die Rechtschreibung eines Elements überprüft werden muss

Existierende
HTML 5 Attribute

  • accesskey

    Gibt eine Tastkombination an um auf ein Element zuzugreifen

  • class

    Definiert den Klassennamen des Elements (für Stylesheets)

  • dir

    Definiert die Textrichtung des Inhalts im Element

  • id

    Gibt eine eindeutige ID eines Elements an

  • lang

    Gibt einen Sprachcode für den Inhalt eines Elements an

  • style

    Definiert inline-Style für das Element

  • tabindex

    Gibt die Tab-Reihenfolge eines Elements an

  • title

    Definiert zusätzliche Informationen für das Element

Keyboard

  • onkeydown

    Bei gedrückter Taste

  • onkeypress

    Bei gedrückt gehaltener Taste

  • onkeyup

    Bei losgelassener Taste

Mouse

  • onwheel

    Wenn das Mausrad benutzt wird

  • ondrag

    Element wird gezogen

  • ondragend

    Ziehen wird beendet

  • ondragenter

    Ziel ist erreicht

  • ondragleave

    Ziel wurde verlassen

  • ondragstart

    Ziehen hat begonnen

  • ondrop

    Wenn Element abgelegt wird

  • onscroll

    Dokumentansicht wird entlang
    der x/y-Achsen verschoben

  • onmouseout

    Beim Verlassen des Elements

  • onmouseover

    Beim Überfahren des Elements

  • onmouseup

    Bei losgelassener Maustaste

  • onmousedown

    Bei gedrückter Maustaste

  • onmousemove

    Bei weiterbewegter Maus

  • onclick

    Bei Klick

  • ondblclick

    Bei Doppelklick

Fenster

  • onunload

    Wird ausgeführt, wenn der Benutzer das Dokument verlässt

  • onblur

    Wird ausgeführt, wenn das Fenster unscharf wird

  • onfocus

    Wird ausgeführt, wenn das
    Dokument fokusiert wird

  • onbeforeunload

    Wenn der Besucher die Seite verlassen möchte

  • onpageshow

    Wird ausgeführt, wenn das Fenster angezeigt wird

  • onmessage

    Eine Nachricht erhalten

  • onafterprint

    Wird ausgeführt, nachdem das Dokument gedruckt wurde

  • onbeforeprint

    Wird ausgeführt, bevor das Dokument gedruckt wird

  • onoffline

    Wird ausgeführt, wenn das Dokument offline ist

  • ononline

    Wird ausgeführt, wenn das Dokument online ist

  • onhaschchange

    Wird ausgeführt, wenn sich das Dokument verändert hat

  • onpagehide

    Wird ausgeführt, wenn das Fenster versteckt ist

  • onredo

    Wird ausgeführt, wenn das Dokument eine Wiederholung ausführt

  • onundo

    Wenn der Benutzer eine Transaktion rückgängig gemacht hat

  • onpopstate

    Wenn der Benutzer auf "Zurück" klickt

  • onload

    Wird ausgeführt, wenn das Dokument geladen wird

  • onunload

    Wird ausgeführt, wenn das Fenster unscharf wird

  • onfocus

    Wird ausgeführt, wenn das Dokument fokusiert wird

  • onload

    Wird ausgeführt, wenn das Dokument geladen wird

guy with computer

Formular

  • onformchange

    Wird ausgeführt, wenn sich Formularinhalte ändern

  • onsubmit

    Wird ausgeführt, wenn ein Formular abgegeben wird

  • onforminput

    Wird ausgeführt, wenn das Formular Benutzereingaben erhält

  • oninput

    Bei Eingabe

  • oninvalid

    Bei ungültiger Eingabe

  • onchange

    Wird ausgeführt, wenn sich das Dokument verändert

  • onselect

    Wird ausgeführt, wenn ein Element ausgewählt wird

  • onblur

    Wird ausgeführt, wenn das Fenster unscharf wird

  • onfocus

    Wird ausgeführt, wenn das Dokument fokusiert wird

  • onchange

    Wird ausgeführt, wenn sich das Dokument verändert

  • onselect

    Wird ausgeführt, wenn ein Element ausgewählt wird

  • onsubmit

    Wird ausgeführt, wenn ein Formular abgegeben wird

Media

  • onpause

    Pausiert

  • onplay

    Abspielen nach Pause

  • onplaying

    Abspielen nach Pause

  • oncanplay

    Bereit zum Abspielen

  • oncanplaythrough

    Bereit zum Abspielen bis zum Ende

  • onloaddata

    Wenn Mediadaten geladen werden

  • onloadmetadata

    Wenn Medieninhalte geladen worden sind

  • onloadstart

    Laden der Daten begonnen

  • onprogress

    Download läuft

  • onratechange

    Änderung der Abspielgeschwindigkeit

  • onseeked

    Wenn Nutzer andere Stelle ausgesucht hat

  • onseeking

    Wenn Nutzer zu anderer Stelle geht

  • ondurationchange

    Bei Änderung der Dauer

  • onemptied

    Medien-Datei nicht verfügbar

  • onended

    Ende der Medien-Datei erreicht

  • onerror

    Element nicht richtig geladen o. Skript läuft fehlerhaft

  • onstalled

    Laden des Mediums nicht erfolgt

  • onstorage

    Speicher-Ereignis

  • onsuspend

    Ende des Ladens

  • ontimeupdate

    Änderung der playback Position

  • onvolumechange

    bei Lautstärkeänderung

  • onreadystatechange

    Gibt an, wenn sich der Bereitschaftszustand ändert

  • onabort

    Ereignis abbrechen

  • onbeforeunload

    Vor dem Upload von Dateien

  • ongesturechange

    Beim Bewegen des Fingers auf dem Display

  • ongestureend

    Wenn die Bewegung endet

  • ongesturestart

    Wenn die Bewegung startet

  • onmove

    Bei weiterbewegter Maus

  • onorientationchange

    Beim Drehen des Geräts (Tablet oder Smartphone)

  • onpaste

    Aus Zwischenablage eingefügt

  • onresize

    Beim Verändern der Fenstergröße

  • ontouchcancel

    Bei Abbruch der Berührung

  • ontouchend

    Bei Ende der Berührung

  • ontouchmove

    Beim Wischen

  • ontouchstart

    Bei Beginn der Berührung

Alte nicht unterstützte HTML 4 + 5 Tags

  • onreset

    wird ausgeführt, wenn ein Formular zurückgesetzt wird
    (nicht HTML5 kompatibel)

HTML 5 Canvas (Leinwand)

Das HTML <canvas> Element wird verwendet, um Grafiken durch Skripte (meist JavaScript) direkt zu zeichnen. Das <canvas>-Element ist nur ein Container für Grafiken. Sie müssen ein Skript verwenden, um die Grafiken tatsächlich zu zeichnen.

Der Canvas hat zahlreiche Methoden um Boxen, Kreise, Pfade, Text und Images hinzuzufügen.

Canvas Element

Attribute
NameTypDefault
width unsigned long 300
height unsigned long 150
Methoden
AusgabeName
string toDataURL(
[Optional] string type, [Variadic] any args)
object getContext9 string contextId)

2D Kontext

Attribute
NameTyp
canvas HTMLCanvasObject [readonly]
Methoden
AusgabeName
void save()
void restore()

Umwandlung

Methoden
AusgabeName
void scale(float x, float y)
void rotate(flaot x, float y)
void transform(
float m11, float m12, float m21,
float m22, float dx, float dy)
void setTransform(
float m11, float m12, float m21,
float m22, float dx, float dy)

Bild Zeichnung

Methoden
AusgabeName
void drawImage(
Object image, float dx, float dy
[Optional] float dw, float dh)

Farben, Stile und Schatten

Attribute
NameTypeDefault
strokeStyle any black
fillStyle any black
shadowOffsetX float 0.0
shadowOffsetY float 0.0
shadowBlur float 0.0
shadowColor string transparent
black
Methoden
AusgabeName
CanvasGradient createLinearGradient(
float x0, float y0, float r0,
float x1, float y1, float r1)
CanvasGradient createPattern(
object image, string repetition)

Der Befehl "image" kann als Typ HTMLImageElement, HTMLCanvasElement oder HTMLVideoElement sein. "repetition" unterstützt die folgenden Werte: [repeat (default, repeat-x, repeat-y, no-repeat]

Canvasgradient Interface
AusgabeName
void addColorStop(float offset, string color)

Pfade

Methoden
AusgabeName
void beginPath()
void closePath()
void fill()
void stroke()
void clip()
void moveTo(float x, float y)
void lineTo(float x, float y)
void quadraticCurveTo(
float cpx, float cpy,
float x, float y)
void bezierCurveTo(
float cp1x, float cp1y,
float cp2x, float cp2y,
float x, float y)
void arcTo(
float x1, float y1,
float x2, float y2, float radius)
void arc(
float x1, float y1, float radius,
float startAngle, float endAngle,
boolean anticlockwise)
void rect(float x, float w, float h)
isPointInPath(float x, float y)

Pixel Manipulation

Methoden
AusgabeName
ImageData createImageData(float sw, float sh)
CanvasGradient createImageData( ImageData
Imagedata) ImageData Void getImageData(
ImageData imagedata,
float dx, float dy, [Optional] float dirtyX,
float dirtyY,
float dirtyWidth, float dirtyHeight)
ImageData Schnittstelle
width unsigned long [readonly]
height unsigned long [readonly]
data CanvasPixelArray [readonly]

Canvas Element

Attribute
NameTypDefault
globalAlpha float 1
globalCompositeOperation string source-over
Unterstützt alle folgenden Werte
  •  

    source-over

  •  

    source-in

  •  

    source-atop

  •  

    source-out

  •  

    destination-atop

  •  

    destination-in

  •  

    destination-out


     

  •  

    destination-atop


     

  •  

    lighter

  •  

    XOR

  •  

    copy

  •  

    darker

Linien Stile

Attribute
NameTypDefault
lineWidth float 1
lineCap string Butt
Unterstützt alle folgenden Werte
  • butt

    lineJoin
  • rounded

    String
  • square

    miter
Unterstützt alle folgenden Werte
  • round

    miterLimit
  • bevel

    float
  • miter

    10

Text

Attribute
NameTypDefault
font string 10px sans-serif
TextAlign string start

Unterstützt alle folgenden Werte: [start, end, left, right, center]

textBaselin string alphabetic

Unterstützt alle folgenden Werte: [top, hanging, middle, alphabetic, ideographic, bottom]

Methoden
AusgabeName
void fillText(
string text, float x, float y,
[Optional] float maxWidtd)
void strokeText(
string text, float x, float y,
[Optional] float maxWidtd)
TextMetrics measureText(string text)
TextMetrics Schnittstelle
width float [readonly]

Rechtecke

Methoden
AusgabeName
void clearRect(float x, float y, float w, float h)
void fillRect(float x, float y, float w, float h)
TextMetrics strokeRect(float x, float y, float w, float h)
Teilen Sie dieses Bild auf Ihrer Seite

Die abgebildtete Grafik darf unverändert und unter Angabe und Verlinkung der Quelle https://www.drela.de/html5-befehle.html verwendet werden!

Diese HTML5 Übersicht und weitere nützliche Freebies findet Ihr auch bei t3n.de

Drela GmbH - zu finden auf:

  • Webdesign Agentur T3n
  • Webdesignagentur FR
  • Webdesign Frankfurt Fokus
  • Webdesigner Marktplatz
  • Webdesigner Marktplatz

Kundenstimmen auf Google

"Die Firma Drela GmbH hat uns insbesondere durch die sehr professionelle Beratung und der anschließenden Umsetzung unseres neuen Webauftrittes überzeugt. Nicht nur die Erstellung des neuen Layout, sondern auch die SEO-Strategie haben uns beeindruckt. Auch bestätigt die derzeitig wachsende Kontaktaufnahme über unseren Webauftritt, dass wir endlich den richtigen Partner gefunden haben, der uns einen messbaren Erfolg eingebracht hat. Wir können die Firma Drela GmbH nur empfehlen."

Michael Ernst - SVS Gutachten GmbH

Kontakt


Drela GmbH
Webdesign Frankfurt | Internetagentur
Theodor-Heuss-Allee 112
60486 Frankfurt am Main
Tel: 069 667741188
Email: Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein!