Folgend sehen Sie eine Liste von HTML 5 Befehlen und Tags, welche Sie zum Bearbeiten von HTML Dokumenten verwenden können.
| HTML5-Grundgerüst | |
|---|---|
| HTML-Befehle | Beschreibung |
| <!DOCTYPE html> | HTML5-Doctype, erste Zeile der HTML-Datei |
| <html> | Umschließt den kompletten Inhalt und es wird im Inhalt als Sprache Deutsch verwendet |
| <head> | Head-Bereich, der Metainformationen über die Webseite enthält (werden nicht im Browserfenster angezeigt) |
| <meta charset="UTF-8" /> | Verwendete Codierung – mit UTF-8 können Sonderzeichen direkt genutzt werden (im Deutschen z.B. Umlaute öäü) |
| <title>HTML5-Grundgerüst</title> | Wichtig! Titel der Seite – hat mehrere wichtige Funktionen:
(engl. title=Titel) |
| </head> | Beendet den Head-Bereich |
| <body> | Umschließt den Inhalt, der im Browserfenster angezeigt wird |
| INHALT | Hier kommen nun der Inhalt (und alle weiteren HTML-Befehle, die den Inhalt strukturieren) |
| </body> | Beendet den Inhaltsbereich |
| </html> | Ende der HTML-Seite |
| Bereiche einteilen über HTML5 | |
|---|---|
| HTML5-Befehle | Beschreibung |
| <header> | Bereich für Kopf (nicht verwechseln mit <head>!) |
| <nav> | Bereich Navigation (Steuerung) |
| <section> | Gruppiert Elemente |
| <article> | Bereich für Inhalt |
| <aside> | Bereich für Zusatzinformationen zum Inhalt |
| <footer> | Bereich für Fuß |
| Text strukturieren | |
|---|---|
| HTML-Befehle | Beschreibung |
| <h1> … </h1> | Hauptüberschrift (engl. h = headline = Überschrift) |
| <h2> … </h2> bis <h6> … </h6> |
Unterüberschriften – sollten in der logischen Reihenfolge verwendet werden. Nach <h2> kommt <h3> |
| <p> … </p> | Absatz – nach dem Absatz wird automatisch Platz gehalten (engl. p = paragraph = Absatz) |
| <br /> | erzwungener Zeilenumbruch (Zeilenende) (engl. br = break = Umbruch) |
| <hr /> | Trennlinie – soll 2 unterschiedliche Inhalte trennen (engl. hr = horizontal ruler = horizontale Linie) |
| Textstellen hervorheben | |
|---|---|
| HTML-Befehle (HTML-TAG) | Beschreibung |
| <b> … </b> | Schrift wird fett angezeigt (engl. b = bold = fett) |
| <strong> … </strong> | wichtiger Bereich, Schrift wird fett angezeigt (engl. strong = kräftig, überzeugend) |
| <i> … </i> | Schrift wird kursiv angezeigt (engl. i = italic = kursiv, schräg) |
| <em> … </em> | hervorgehobener Bereich, Schrift wird kursiv dargestellt (engl. em = emphasis = betont, Hervorhebung) |
| <sup> … </sup> | hochgestellte Schrift, z.B. Fußnote2 (engl. sup = superscript, zu Deutsch hochstellen) |
| <sub> … </sub> | tiefgestellte Schrift, z.B. H2O (engl. sub = subscript, zu Deutsch tiefstellen) |
| <del> … </del> | durchstrichener Text, sprich Inhalt gilt nicht mehr (engl. del = deleted = gelöscht) |
| <ins> … </ins> | neuer Inhalt im Text (gut um Änderungen hervorzuheben) (engl. ins = inserted = neu eingefügt) |
| <small> … </small> | für das "Kleingedruckte" im Text (engl. small = klein) |
| Links, Verweise | |
|---|---|
| HTML-Befehle (HTML-TAG) | Beschreibung |
| <a href="URL">BESCHREIBUNG</a> | für interne & externe Linkes. "Beschreibung" wird später im Browser als Link angezeigt und kann angeklickt werden. Die URL innerhalb des Attributs href wird aufgerufen |
| <a href="index.htm">STARTSEITE</a> | interner Link |
| <a href="http://www.abc.de/"> … | externer Link |
| <a href="http://www.abc.de/" target="_blank"> … | neues (leeres) Browserfenster wird beim Anklicken geöffnet (engl. target = Ziel, blank = leer |
| <a href="#marker"> … | Sprungmarke (wird durch # gekennzeichnet) zu einem bestimmten Punkt, hier "marker". Der Punkt muss über das Attribut id definiert sein |
| <a href="mailto:info@abc.de">info@abc.de</a> | So kann eine E-Mail-Adresse eingegeben werden. Durch Anklicken öffnet sich ein E-Mail-Programm (sofern installiert) und die E-Mail-Adresse ist bereits eingegeben. (e: mailto = maile nach) |
| Aufzählungen | |
|---|---|
| HTML-Befehle (HTML-TAG) | Beschreibung |
| <li>AUFZÄHLUNGSPUNKT</li> | Bei allen Aufzählungen (nächste 2 Punkte) müssen die Einzelpunkte durch diesen Tag gekennzeichnet sein. (engl. li = list item = Listeneintrag ) |
| <ul> … </ul> | Art der Auflistung. Umschließt alle einzelnen <li> Wird für Aufbau der Seitennavigation benötigt und andere Aufzählungen (engl. ul = unordered list = unsortierte Liste) |
| <ol> … </ol> | Art der Auflistung. Umschließt alle einzelnen <li> Die einzelnen Listenpunkte bekommen dann entsprechende Nummerierung 1., 2., 3. usw. (engl. ol = ordered list = nummerierte Liste) |
| Bereiche definieren | |
|---|---|
| HTML-Befehle (HTML-TAG) | Beschreibung |
| <div id="NAME">BEREICH</div> |
Über DIV wird ein Bereich im HTML definiert. Diesen Bereich kann man über CSS dann das Design "überstülpen". Angesprochen wird der Bereich über seinen ID-Namen. Bei DIV handelt es sich um ein Blockelement – das Blockelement nutzt die komplette Bildschirmbreite. |
| <div class="NAME">BEREICH</div> | Der DIV-Bereich kann auch per CSS über seinen Klassen-Namen angesprochen werden. (engl. class = Klasse) |
| <span id="NAME">BEREICH</span> | Mit SPAN können Textstellen markiert werden und diese dann über CSS mit Design versehen werden. Das SPAN-Element ist ein Inline-Element, was den Unterschied zum DIV-Element ausmacht. (engl. span = Abgrenzung, Bereich) |
| <span class="NAME">BEREICH</span> | Kann über den Klassennamen und CSS mit Design versehen werden. |
| Kommentieren, Auskommentieren | |
|---|---|
| HTML-Befehle (HTML-TAG) | Beschreibung |
| <!– KOMMENTAR –>
<!– |
Über diese Anweisung können Kommentare im HTML-Code gemacht werden bzw. Teile des HTML-Codes auskommentiert werden. Somit sind diese Teile für einen Browser nicht existent. Das ist z.B. gut zum Testen von HTML-Befehlen. |