Übersicht HTML5-Befehle
HTML-Befehle Übersicht
Die HTML5-Kurzreferenz listet alle wichtigen HTML-Befehle auf. Dabei wurden die Befehle thematisch gruppiert. Die aufgelisteten HTML-Befehle sind die wichtigen!
In der Übersicht sind nur noch gültige HTML5-Befehle zu finden. Auch wenn die Liste kurz erscheint: Es sind alle wichtigen HTML-Befehle enthalten (außer für Formulare). HTML ist für die Struktur zuständig - für Design wird CSS genutzt! Für CSS gibt es eine extra Auflistung der CSS-Anweisungen. Alle veralteten HTML TAGs, die für Design zuständig waren, werden hier nicht aufgelistet.
Als Download gibt es die Befehlsübersicht als HTML5 und CSS Referenz im PDF-Format unter https://www.html-seminar.de/downloads/html5-css-referenz.pdf. Dort finden Sie alle wichtigen HTML Tags und CSS-Anweisungen im Überblick (und zum schnellen Nachschlagen).
| HTML5-Grundgerüst | |
|---|---|
| HTML-Befehle | Beschreibung |
| <!DOCTYPE html> | HTML5-Doctype, erste Zeile der HTML-Datei |
| <html lang="de"> | 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:
|
| </head> | |
| <body> | Umschließt den Inhalt, der im Browserfenster angezeigt wird |
| INHALT | Hier kommt nun der Inhalt (und alle weiteren HTML-Befehle, die den Inhalt strukturieren) |
| </body> | |
| </html> | Ende der HTML-Seite |
| Bereiche einteilen über HTML5 | |
|---|---|
| HTML5-Befehle | Beschreibung |
| <header> ... </header> | Bereich für Kopf (nicht verwechseln mit <head>!) |
| <nav> ... </nav> | Bereich Navigation (Steuerung) |
| <section> ... </section> | Gruppiert Elemente |
| <article> ... </article> | Bereich für Inhalt |
| <aside> ... </aside> | Bereich für Zusatzinformationen zum Inhalt |
| <footer> ... </footer> | Bereich für Fuß |
| Text strukturieren | |
|---|---|
| HTML-Befehle | Beschreibung |
| <h1> … </h1> | Hauptüberschrift - wichtig, sollte einmal auf jeder einzelnen Seite kommen (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 - trennt unterschiedliche Inhalte (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) |
| <blockquote> … </blockquote> | um Zitate zu kennzeichnen (engl. blockquote = Blockzitat) |
| Links, Verweise | |
|---|---|
| HTML-Befehle (HTML-TAG) | Beschreibung |
| <a href="URL">BESCHREIBUNG</a> | für interne und externe Links. "Beschreibung" wird später im Browser als Link (blau unterstrichen) angezeigt und kann angeklickt werden. Die URL innerhalb des Attributs href wird aufgerufen (engl. a = anchor = Anker) (engl. href = hyper reference = Hypertext-Referenz) |
| <a href="index.htm">STARTSEITE</a> <a href="index.html">STARTSEITE</a> |
interner Link (als Endung kann sowohl .html wie auch .htm genutzt werden) |
| <a href="https://www.php-kurs.com/"> …</a> | externer Link |
| <a href="https://www.php-kurs.com/" target="_blank"> … </a> | neues (leeres) Browserfenster wird beim Anklicken geöffnet (engl. target = Ziel, blank = leer) |
| <a href="#xy"> … </a> | Sprungmarke (wird durch # gekennzeichnet) zu einem bestimmten Punkt gesprungen, hier "xy". Der Punkt muss über das Attribut id definiert sein |
| <a href="mailto:axl@uxl.de">axl@uxl.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. (engl. mailto = sende E-Mail an) |
| Aufzählungen | |
|---|---|
| HTML-Befehle (HTML-TAG) | Beschreibung |
| <li>AUFZÄHLUNGSPUNKT</li> | Jeder einzelne Punkt bei einer Aufzählung muss von diesem HTML-Befehl umschlossen werden. (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 definiert. Diesen Bereich kann man über CSS dann ein 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. (engl. div = division = Bereich, Gruppierung von Elementen) |
| <div class="NAME">BEREICH</div> | Der DIV-Bereich kann 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 --> <!-- QUELLCODE ohne Wirkung --> |
Ü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. |
| Farben in HTML | |
|---|---|
| HTML-Befehle (HTML-TAG) | Beschreibung |
| - | Farben werden über CSS genutzt! Früher wurden auch mit Attributen bei HTML-TAGs Farben festgelegt, was aber im Sinne der Trennung von Inhalt und Design heutzutage keinen Sinn mehr macht! Daher gehören Farben (Design) in den CSS-Bereich (zur Übersicht von CSS-Anweisungen)! |
Weiterempfehlen • Social Bookmarks • Vielen Dank
Bitte unterstützen Sie dieses Projekt
Sie können dieses Projekt in verschiedenen Formen unterstützen - wir würden uns freuen und es würde uns für weitere Inhalte motivieren :).
Spenden
Sie können uns eine Spende über PayPal zukommen lassen.
Weiterempfehlungen
Empfehlen Sie es weiter - wir freuen uns immer über Links und Facebook-Empfehlungen.
Bücher über Amazon
Bestellen Sie Bücher über folgende Links bei Amazon:
Vielen Dank für Ihre Hilfe
-
E-Books zum Kurs
von HTML-Seminar.deE-Books mit rund 930 Seiten Umfang als PDF. Alle 3 zu einem Preis.
Mehr Details
-
