Priorität #1: Die wichtigsten Elemente, die immer definiert sein müssen.

1. Überschrift <h1>

2. Überschrift <h2>

3. Überschrift <h3>

4. Überschrift <h4>

5. Überschrift <h5>
6. Überschrift <h6>

7. Zwei Zeilen Text mit einem Zeilenumbruch <br /> in der Mitte.
Zwei Zeilen Text mit einem Zeilenumbruch <br /> in der Mitte.

8. Zwei Absätze mit Text im Paragraph <p>. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus mattis velit quis lacus varius nec pretium neque convallis. Pellentesque nec justo vel mi interdum feugiat sed viverra leo. In ultricies molestie elit ac vestibulum. Nam pellentesque ullamcorper urna sed adipiscing. Nulla eget nulla arcu, ut tempor lorem. Morbi mauris metus, pellentesque at eleifend non, fringilla et diam. Aliquam tincidunt elit a dolor lobortis at convallis nulla luctus. Nulla eu odio in velit hendrerit porta sed ac lorem. Aenean gravida dictum felis nec aliquet. Suspendisse sit amet ipsum sed est euismod dapibus.

Zwei Absätze mit Text im Paragraph <p>. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus mattis velit quis lacus varius nec pretium neque convallis. Pellentesque nec justo vel mi interdum feugiat sed viverra leo. In ultricies molestie elit ac vestibulum. Nam pellentesque ullamcorper urna sed adipiscing. Nulla eget nulla arcu, ut tempor lorem. Morbi mauris metus, pellentesque at eleifend non, fringilla et diam. Aliquam tincidunt elit a dolor lobortis at convallis nulla luctus. Nulla eu odio in velit hendrerit porta sed ac lorem. Aenean gravida dictum felis nec aliquet. Suspendisse sit amet ipsum sed est euismod dapibus.

9. Ein Link wie dieser: http://www.kigmbh.com/wordpress/web-standards-vorgaben-fur-internet-jobs/ hat die Pseudoklassen :link, :visited, :focus, :hover und :active, die die verschiedenen Zustände des Links beschreiben.

10. Bilder werden mit dem <img /> Tag erzeugt und haben viele Formatierungsmöglichkeiten.


Priorität #2: Die Elemente, die definiert sein sollten.

11. So sieht eine Tabelle <table> mit Zellen- <td> und Reihenelemente <tr> aus. Sie hat ausserdem einen Tabellenkopf <thead> und einen Tabellenfuß <tfoot>.

Header / Head Header / Cell 1 Header / Cell 2 Header / Cell 3
Footer / Head Footer / Cell 1 Footer / Cell 2 Footer / Cell 3
Row 1 / Head Row 1 / Cell 1 Row 1 / Cell 2 Row 1 / Cell 3
Row 2 / Head Row 2 / Cell 1 Row 2 / Cell 2 Row 2 / Cell 3
Row 3 / Head Row 3 / Cell 1 Row 3 / Cell 2 Row 3 / Cell 3

12. Es gibt die geordnete Liste <ol> mit Nummerierung der Listenelemente <li>:

  1. Listenelement 1
  2. Listenelement 2
  3. Listenelement 3

13. Es gibt die ungeordnete Liste <ul> ohne Nummerierung der Listenelemente <li>:

14. Es gibt die Definitions-Liste <dl> bestehend aus Term <dt> und der Definition <dd>:

Ein Term
Eine Definition
Ein Term
Eine Definition
Ein Term
Eine Definition

15. Formulare <form> haben verschiedene Elemente:

a) Das Fieldset <fieldset> umschliesst mehrere Elemente:

b) Ein einzeiliges Eingabefeld ist ein <input type="text">:

c) Ein mehrzeiliges Eingabefeld ist eine <textarea>:

d) Radio-Buttons sind <input type="radio"> und man kann nur eine Option wählen: Option 1 Option 2 Option 3

e) Check-Boxes sind <input type="checkbox"> und man kann mehrere Optionen wählen: Option 1 Option 2 Option 3

f) Es gibt Drop-Down-Listen als <select> und man kann nur eine Option wählen:

g) Es gibt die Mehrfach-Auswahl <select size="n"> und man kann mehrere Optionen wählen:

h) Zum Absenden des Formulars gibt es den Submit Button <input type="submit">:

i) Zum Zurücksetzen des Formulars gibt es den Reset Button <input type="reset">


Priorität #3: Elemente, die schon vordefiniert sind und nicht unbedingt gändert werden müssen.

Mit <em> betonter Text.

Mit <strong> stark betonter Text.

Mit <ins> eingefügter Text.

Mit <del> gelöschter Text.

Mit <bdo> umgekehrter (umgekehrter) Text.

Mit <b> gefetteter Text.

Mit <i> kursivierter Text.

Mit <u> unterstrichener Text.

Mit <strike> oder <s> durchgestrichener Text.

Mit <big> vergrößerter Text.

Mit <small> verkleinerter Text.

Mit <sup> hochgestellter Text.

Mit <sub> tiefergestellter Text.

Mit <pre> unformatierter Text.

Mit <code> als Quellcode formatierter Text.

Ein Blockelement ist ein <div>.

Ein inline-Bereich ist ein <span>.

Und zu guter letzt der Querbalken <hr />.


Tipp: Eine Referenz zu allen HTML-Elementen gibt es hier bei SELFHTML: http://de.selfhtml.org/html/referenz/elemente.htm.