Semantik

Die Inhalte korrekt zu formatieren, ist die wichtigste Grundregel. Ein Titel wird als Titel, eine Adresse als Adresse formatiert. Man spricht von semantisch korrektem Formatieren. Die Formatierung orientiert sich also am Sinn des Inhaltes.
Man unterscheidet Block- und Inline-Elemente:

  • Block-Elemente bilden immer eine rechteckige Box und das folgende Element erscheint auf einer neuen Zeile.
  • Inline-Elemente sind im normalen Textfluss integriert und nebeneinander angeordnet. Sie erzeugen keine neue Zeile, d.h. keine eigene Box.

Block-Elemente
Grundstruktur <header>...</header>
<nav>...</nav>
<section>...</section>
<footer>...</footer>		 Der Kopfbereich, die Navigation, der Inhalt und der Fussbereich wird mit den ensprechenden Tags <header>, <nav>, <section> bzw. <footer> umschlossen.
Artikel <article>...</article> Abgeschlossene Abschnitte wie z.B. ein Newseintrag kann mit <article> gekennzeichnet werden.
Überschriften

6 Gliederungsebenen h1 bis h6:

  • <h1>...</h1>
  • ...
  • <h6>...</h6>
 Jeder Titel muss als Titel der entsprechenden Ebene gekennzeichnet werden. Dies ist für die Suchroboter der Suchmaschinen wichtig.
Tipp: Verwenden Sie <h1> genau einmal pro Webseite. Die Überschrift 1 soll möglichst dem Titel der Webseite entsprechen und kann - falls erwünscht - farblich unsichtbar dargestellt werden.
Absätze <p>...</p> Normaler Text wird mit <p> umschlsosen, sonst laufen Formatvorlagen ins Leere.
Adressen 
<address>
  Peter Muster<br />
  8989 Beispielhausen
</address>
 Eine Adresse wird als Ganzes mit <address> ausgezeichnet. Zeilenvorschübe innerhalb der Adresse werden mit <br /> realisiert
Zitatblock <blockqoute>...</blockqoute> Für Zitate, die einen ganzen Absatz umfassen.
Aufzählungen 
<ul>
  <li>...</li>
  <li>...</li>
  ...
</ul>

<ol>
  <li>...</li>
  ...
</ol>
Sämtliche Aufzählungen sollen mit <ul> oder <ol> realisiert werden.
Typische Anwendung ist die Navigation. Sie ist eigentlich eine Aufzählung und als Liste abzubilden. In diesem Fall wird das Aufzählungszeichen per CSS list-style-type: none;einfach ausgeblendet und eventuell die Darstellung per CSS display: inline; zugewiesen, damit alle Punkte auf einer Zeile erscheinen.
Definitionslisten 
<dl>
  <dt>Begriff oder Bild</dt>
  <dd>Definition oder Legende</dd>
  ...
  <dt>Begriff oder Bild</dt>
  <dd>Definition oder Legende</dd>
</dl>
Paarungen lassen sich als Definitionsliste abbilden. Typische Anwendungen sind Glossar und Bildgalerie mit Legenden. Hier bilden Bild und zugehörige Legende ein Paar. Das Bild wird mit <dt> und die entsprechende Legende mit <dd> gekennzeichnet.

Inline-Elemente
Bilder <img src="meinBild.jpg" /> Bilder werden standardmässig inline dargestellt. Mit der Eigenschaft align="right" wird das Bild z.B. rechts ausgerichtet und der Text umfliesst das Bild links.
Betonung <em>...</em> Betonte Textstellen werden kursiv dargestellt. Das alte Tag <i> soll nicht mehr angewendet werden.
starke
Betonung		 <strong>...</strong> Stark betonte Textstellen werden fett dargestellt. Das ehemalige Tag <b> soll nicht mehr angewendet werden.
Zitat im Text <q>...</q> Kurze Zitate innerhalb eines Absatzes werden mit <q> gekennzeichnet. Die Quelle kann als Eigenschaft mitgegeben werden: <q cite="Quelle">...</q>
Quellenangabe zu Zitat <cite>...</cite> Die Quelle eines Zitates wird mit <cite> ausgezeichnet.
Quelltext <code>...</code> Quellcode aus Software oder von Webseiten
Variablen <var>...</var>  
Beispiele <samp>...</samp>  
Akronym <acronym>...</acronym> Akronyme sind Abkürzungen, die von einem Screenreader - einer "Vorlesesoftware" - buchstabiert gelesen werden müssen. Z.B. USA.
Abkürzungen <abbr>...</abbr> Abkürzungen sind z.B. u.a. – "unter anderem" und müssen von einem Screenreader, einer "Vorlesesoftware" entsprechend erkannt und gelesen werden können. Dies funktioniert aber nicht in allen Browsern.