Webdesign mit (X)HTML und CSS

Ein Kurs für Einsteiger

Allgemeine Attribute

id-Attribut

Das id-Attribut identifiziert ein Element eindeutig im Dokument. Es darf deshalb pro Dokument nur genau einmal vorkommen.

  1. <div id="inhalt">
  2. <h1>Überschrift erster Ordnung</h1>
  3. <p>Einleitender Textabsatz</p>
  4. [...]
  5. </div>

Der Wert des id-Attributs darf aus Zahlen, Buchstaben, Unterstrich und Bindestrich bestehen. Das erste Zeichen muss ein Buchstabe sein.

class-Attribut

Mit dem class-Attribut werden Elemente klassifiziert; Klassen dürfen im Dokument mehrfach verwendet werden.

  1. <p class="anmerkung">Textabsatz mit einer Anmerkung</p>
  2. <p>Normaler Textabsatz im Fließtext</p>
  3. <p class="anmerkung">weiterer Textabsatz mit einer Anmerkung</p>
  4. <p>Weiterer normaler Textabsatz im Fließtext</p>

Der Wert des class-Attributs kann aus Zahlen, Buchstaben, Unterstrich und Bindestrich bestehen. Auch bei Klassen sollte man als erstes Zeichen jeweils einen Buchstaben verwenden.

Einem Elemente können mehrere Klassen zugewiesen werden. Diese werden durch ein Leerzeichen getrennt notiert (class="klasse1 klasse2").

Durch class und id kann Bereichen eine weitere logische Bedeutung mitgegeben werden. div-Elemente, die Seitenbereiche zusammenfassen, erhalten üblicherweise eine id, die den Inhaltsbereich sinnvoll benennt (z.B. id="header", id="content", id="footer").

Elemente, die mit dem class- oder id-Attribut versehen sind, lassen sich per CSS gezielt ansprechen und gestalten. Die Werte für diese Attribute sollten nicht nach bestimmten Darstellungswünschen vergeben werden (z.B. class="rechtsaussen"), sondern immer nach der Bedeutung (z.B. class="anmerkung").

title-Attribut

Mit dem title-Attribute können einem Element ergänzende Informationen mitgegeben werden. Der Wert des title-Attributs wird in grafischen Browsern als »Tooltip« beim Überfahren mit der Maus angezeigt.

  1. <a href="http://www.google.de" title="Externer Link zur deutschen Website von google&quote;>Bekannte Suchmaschine</a>

Beispiel: Bekannte Suchmaschine