2. HTML – Hypertext Markup Language

Die Grundlage jeder HTML-Seite ist die Beschreibungssprache HTML – die HyperText Markup Language. Sie dient der Strukturierung der Seiten. In der aktuellen Version 5 ist außerdem der Zugriff auf das hierarchische Objektmodell der Seite geregelt, also die Zugriffe via JavaScript. CSS – Cascading Style Sheets – dienen der Gestaltung und grafischen Aufbereitung der Inhalte. CSS wird im nächsten Kapitel behandelt.

Beide Sprachen sind sehr alt und genügen heutigen Anforderungen nur unzureichend. HTML 5 ist deshalb zu einem Konvolut verschiedener Standards geworden, die alle Arten von Funktionen ergänzen. Eine Übersicht wird in diesem Kapitel beschrieben. Außerdem haben sich verschiedene Template-Systeme etabliert, die die Nachteile von HTML auszugleichen versuchen. So versucht Angular nach Intention der Entwickler so etwas wie eine dynamische Erweiterung zu sein, wie sie aussehen würde, wenn sie zusammen mit HTML erfunden worden wäre.

Auch CSS ist nicht mehr sehr neu. Hier stellen komplexere Style-Systeme hohe Anforderungen. Darauf gibt es zwei Antworten. Zum einen entwickeln sich Präprozessoren wie LESS oder SASS, die dynamisches CSS definieren und dann für den Browser aufbereitet werden.

2.1 Grundlagen HTML

In diesem Abschnitt geht es um die Grundlagen zu HTML und einen sehr kurzen geschichtlichen Überblick.

2.1.1 Geschichte

Der Standard HTML ist eine Kooperation von W3C (World Wide Web Consortium) und WHATWG (Web Hypertext Application Technology Working Group). Die Prinzipien der Arbeitsgruppen sind:

Abbildung: Das offizielle HTML 5 Logo
Abbildung: Das offizielle HTML 5 Logo
Tabelle: Geschichte der HTML-Versionen
Version Jahr
HTML 1991
HTML+ 1993
HTML 2 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 1.1 2001
WHATWG 2004
WHATWG und W3C Kooperation 2006
HTML 5 2012
XHTML 5 2013
HTML 5.2 2015 – 2016

2.2 XML – Grundlage für HTML

Auch wenn das Thema dieses Kapitels HTML ist, solltest du dir über den grundsätzlichen Aufbau eines XML-Dokuments im Klaren sein. Beide Standards gehen auf denselben Stamm zurück und sind sogenannte Markup-Sprachen – Markup Languages. Dieser Begriff ist für das “ML” in den Namen verantwortlich. Im Gegensatz zu Programmiersprachen dienen Markup-Sprachen dazu, Inhalte zu beschreiben. An dieser Stelle werden nur die notwendigsten Eigenschaften vermittelt.

2.2.1 Markup

Als Markup bezeichnet man alle Zeichengruppen, welche eine Struktur in XML definieren:

Alles andere ist Text. Dabei sind drei Sonderzeichen zu beachten, die das oben genannten Markup steuern:

Für Attributwerte, die Anführungszeichen enthalten, kommen noch zwei Entitäten hinzu:

Eine Besonderheit stellen CDATA-Bereiche dar. In diesen sind die üblichen Regeln außer Kraft gesetzt und eine Kodierung der speziellen Zeichen muss nicht stattfinden:

<![CDATA[ hier & hier ist "kein" <XML> ]]>

2.2.2 XML-Dokumente

XML-Dokumente gehorchen in ihrem Aufbau festen Regeln. Erst durch diese Regeln kann eine automatisierte Verarbeitung in derart umfassender Form stattfinden, wie sie erforderlich ist. Auf der anderen Seite sollte der Einsatz so universell wie möglich sein, wie der Name “eXtensible Markup Language” suggeriert.

2.2.3 Verarbeitung

Bei der Verarbeitung der Daten gibt es verschiedene Strategien. Eine davon bildet das Dokument als Objektmodell in einer Hierarchie ab. Falsch verschachtelte Tags lassen die Darstellung als Hierarchie nicht zu. Eine Hierarchie ist am einfachsten als Baum darstellbar.

2.2.4 Der Begriff “Markup”

HTML, XML und X(HT)ML sind alles Auszeichnungssprachen (Markup-Sprachen), die auf SGML basieren. SGML steht für “Standard Generalized Markup Language” und wurde bereits 1986 entwickelt. HTML und XML stammen direkt von SGML ab. XML ist restriktiver als SGML und dient als Grundlage für XHTML. XHTML ist identisch zu HTML, nur dass die Schreibweisen auf XML basieren.

Abbildung: Entwicklung der Basisstandards
Abbildung: Entwicklung der Basisstandards

Ein Merkmal, aber keine Notwendigkeit, sind leere Elemente.

2.2.4.1 Leere Elemente

Leere Elemente haben keinen Inhalt. Sie können eine Ausgabe erzeugen, haben ein Standardverhalten und sind in einigen Fällen gestaltbar.

Die bekanntesten sind:

1 <br>    // Zeilenumbruch (sichtbar)
2 <hr>    // Horizontale Linie (sichtbar)
3 <img>   // Bild (sichtbar)
4 <input> // Eingabefeld (kann sichtbar sein)
5 <link>  // Referenz einbinden (unsichtbar)
6 <meta>  // Dokumentinformationen (unsichtbar)

Seltener benutzt werden in HTML folgende Elemente:

 1 <area>
 2 <base> 
 3 <col> 
 4 <command> 
 5 <embed> 
 6 <keygen> 
 7 <param> 
 8 <source> 
 9 <track> 
10 <wbr>

So ist es nicht erlaubt <br></br> zu schreiben. Alternativ zum klassischen HTML – <br>– kann aber immer die XHTML-Variante mit sofortschließendem Tag benutzt werden: <br />. Soweit so gut. Aber warum ist dies möglich? Die Ursache liegt weit zurück – in SGML. Dort war es erlaubt, ein sogenanntes Null End Tag (NET) zu benutzen. Dies war eine Abkürzung, um das schließende Tag zu vermeiden. Mit NET kann man folgendes schreiben:

<quote/Quoted text/

Ohne NET würde es dagegen folgendermaßen aussehen:

<quote>Quoted text</quote>

Die kurze Version für Elemente ohne Inhalt lautet <quote// (SHORTTAG NETENABL IMMEDNET), was <quote></quote> entspricht.

In HTML wurde nun versucht, diese Besonderheit nicht zu übernehmen und Elemente wie in XML korrekt zu schließen. Das liegt daran, dass <br/ nach dieser Denkweise als <br> erkannt werden würde, ein <br/> aber als <br>>, was falsch ist. Der “richtige” Schrägstrich ist hier der Fehler. Bei der Implementierung haben die Browser-Hersteller dies beachtet und die SGML-typische Schreibweise nicht übernommen. Hier lehnt sich HTML stärker an XML an. In HTML 5 wurde die zuvor zumindest noch theoretisch erlaubte SGML-Schreibweise explizit verboten.

XML (und damit XHTML) dient dazu, die Probleme dieser Syntax gleich ganz zu vermeiden. Um dennoch leere Elemente zu ermöglichen, wird eine spezielle Schreibweise benutzt: <br•/>. Der Schrägstrich am Ende ist nun wieder da, er ist richtig herum und er steht innerhalb der Grenzzeichen < und >. Das Leerzeichen ist hier zwingend.

2.2.4.2 Gültigkeit

Die Gültigkeit von HTML ergibt sich nun aus der korrekten Konstruktion von Tags. Als Tag wird ein Element bezeichnet, welches bestimmten Regeln gehorcht:

2.2.4.3 Richtigkeit

Wenn du nun daran denkst, dass XHTML eigentlich der “bessere” Weg sein möge – mehr Regeln, mehr Prüfung – und damit der Schreibweise <br /> den Vorzug geben (im Sinne von “besser”), dann ist leider festzustellen, dass dem nicht so ist. HTML 5 definiert leere Elemente klar als solche, die nicht mit einem Schrägstrich geschlossen werden. Auch mit dieser Schreibweise wird daraus kein gültiges XHTML, weil dazu noch mehr gehört (XML-Kopffelder, Attribute usw.). Es ist also vollkommen sinnlos und erschwert den Blick auf das Dokument. Betrachtet man einen Ausschnitt, könnte der Eindruck entstehen, dass es sich um XHTML handelt. Das ist aber dann nicht der Fall und so beginnt eine unglückliche Fehlerkette. Entwickler, die HTML nicht kennen, werden auf der anderen Seite möglicherweise irritiert durch Tags, die nicht geschlossen erscheinen, sich aber dennoch so verhalten. Hier muss aber auch gesagt werden, dass Personen, die sich mit dem Quellcode von HTML geschäftigen, eher diese Grundlagen lernen sollten als durch krude Maßnahmen beschützt zu werden.

In früheren Zeiten wurde XML auch deshalb benutzt, weil Editoren damit besser umgehen konnten. Aktuelle Entwicklungsumgebungen wie Visual Studio Code sind ziemlich gut in ihren HTML-Kenntnissen und benötigen hier keine Nachhilfe mehr.

2.2.4.4 Spezialfälle

Eigentlich gibt es nur einen richtigen Spezialfall: <script></script>. Alle anderen sind bestenfalls ärgerlich.

Das Script-Tag kann leer sein, wenn nur auf eine Skript-Datei verwiesen wird. Es darf auch dann allerdings nicht verkürzt werden. Folgendes ist also korrekt:

1 <script src="my-script.js"></script>

Die Kurzschreibweise wird dagegen von allen Browsern am Markt konsequent ignoriert:

1 <script src="my-script.js" />

Der Grund ist die XHTML-Spezifikation. Hier wird im Schema festgelegt, dass das Element nicht leer ist. Das ist logisch, denn du könnest Skript-Code direkt ins Tag schreiben:

1 <script>
2 function ShowMe(v){
3   alert(v);
4 }
5 </script>

Nun würde HTML theoretisch auch ohne diese Regel funktionieren, aber dies erschwert erheblich die Lesbarkeit, denn es widerspricht ebenso der Regel “kann Inhalt haben”. Die Implementierung scheitert letztlich an der erforderlichen Rückwärtskompatibilität mit älteren Seiten – entweder immer offen oder immer geschlossen. Man hat sich für immer offen entschieden.

2.3 Seitenaufbau

Zuerst ein Grundgerüst einer vollständigen HTML-Seite:

Listing: Grundgerüst einer HTML-Seite (HTML 5)
 1 <!DOCTYPE html>
 2 
 3 <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
 4   <head>
 5     <meta charset="utf-8" />
 6     <title>Name</title>
 7   </head>
 8   <body>
 9     Inhalt
10   </body>
11 </html>

Das <body>-Tag bildet den Inhaltsbereich, Das <head>-Tag den Steuerbereich. Die HTML-Seite wird technisch durch das Document Object Model (DOM) beschrieben.

Im Browser steht das DOM über eine JavaScript-API (Programmierschnittstelle) zur Verfügung. Der Inhaltsbereich, also das <body>-Tag, steht als document-Objekt bereit.

2.3.0.1 Der Dokumenttyp (Doctype)

Jedes Dokument muss mit einer Angabe zum Dokumenttyp beginnen. Der Browser erkennt an der Doctype-Deklaration, welcher Art das folgende HTML-Dokument ist.

1 <!doctype html>

Das <head>-Element (deutsch: Kopf) ist ein Pflicht-Element und enthält Informationen über das im HTML-Körper folgende Dokument.

Listing: Kopfbereich einer HTML-Seite
 1 <!doctype html>
 2 <head>
 3   <meta charset="utf-8">
 4   <meta name="viewport" 
 5         content="width=device-width, initial-scale=1.0">
 6   <meta name="keywords" 
 7         content="Diese Angaben können weggelassen werden">
 8   <link rel="stylesheet" href="style.css">
 9   <style>
10     <!--- Platz für CSS -->
11   </style>
12   <title>Meine erste HTML5-Seite</title>
13 </head>
2.3.0.2 Kodierungen

Du solltest immer die Zeichencodierung explizit festlegen. UTF-8 ist der wichtigste Standard dabei, da er alle Sonderzeichen, Umlaute und asiatischen Schriftzeichen enthält.

Um zu verhindern, dass Mobilgeräte die gesamte Web-Seite in einer sehr kleinen Ansicht darstellen, kann man mit <meta name="viewport" ...> ein Skalieren verhindern und erreichen, dass die Seite sich an den Viewport (sichtbarer Bereich der Seite auf dem Bildschirm) anpasst. Diese Darstellungssteuerung und damit verbundene Dokumenteigenschaften werde ausführlich im Kapitel “CSS” erläutert.

Der Titel zeigt den Namen der Datei oben im Browser oder den Karteireitern (Tabs) an und sollte daher aussagekräftig sein. Beachte bei Single Page-Applikationen, wie sie mit Angular erstellt werden können, dass sich diese Angaben beim Seitenwechsel nicht zwingend ändern. Mehr zu diesen Techniken findest du weiter hinten im Buch.

2.3.0.3 HTML5-Seitenstruktur

Eine komplette Seite mit Strukturelementen zeigt das folgende Listing:

Listing: Typische HTML 5-Seite
 1 <!doctype html>
 2 <html>
 3 <head>
 4   <meta charset="utf-8">
 5   <title>HTML5-Seite mit Grundstruktur</title>
 6 </head>
 7 
 8 <body>
 9   <header>
10     <img src="logo.png" alt="logo">
11     <h1>Meine Firma</h1>
12   </header>
13 
14   <footer>
15      <a href="contact.html">Kontakt</a>
16      <p>&copy; 2016 by Joerg Krause</p>
17   </footer>
18 </body>
19 </html>

Der <body> ist der sichtbare Bereich der Webseite. Die meisten Webpräsenzen haben oben einen Seitenkopf, den sogenannten Header, der Logo, Titel und die Navigationselemente enthält.

Weiterhin gibt es das Element <footer>, das Kontakt, Impressum, Copyright und evtl. die Sitemap enthält. Während allein schon der Name eine Position unterhalb des Inhalts suggeriert, ist dies nicht zwingend erforderlich. Es handelt sich um ein semantisches Element, dass eine Nutzung impliziert, nicht eine Gestaltungsvorschrift.

Listing: Navigation einer einfachen HTML-Seite
 1 <body>
 2   <header>
 3     <img src="logo.gif" alt="logo">
 4     <h1>Überschrift</h1>
 5     <nav>
 6       <ul>
 7         <li><a href="#link_1.html">Wiki</a></li>
 8         <li><a href="#link_2.html">Blog</a></li>
 9         <li><a href="#link_3.html">Forum</a></li>
10       </ul>
11     </nav>
12   </header>

Die Navigation wird vom <nav>-Element umschlossen, das aber auch für Unter-Navigationen verwendet werden kann.

Bei einer Platzierung vor dem Dokumentinhalt kannst du den Inhalt mit <main role="main"> markieren, um Screenreader direkt zum Inhalt springen zu lassen.

Listing: Struktur einer HTML-Seite mit Seitenleiste
 1 <!doctype html>
 2 <html>
 3 <head>
 4   <meta charset="utf-8">
 5   <title>HTML5-Seite mit Grundstruktur</title>
 6 </head>
 7 
 8 <body>
 9   <header>
10     <img src="logo.gif" alt="logo">
11     <h1>Titel</h1>
12   </header>
13   
14   <main role="main">
15     <h1>Überschrift</h1>
16     <p>Dies ist meine erste HTML5-Seite1</p>
17     ... mehr Inhalt
18   </main>
19 
20   <aside>
21     <h2>Weiterführende Links</h2>
22     <ul>
23       <li><a href="link_1.html">Wiki</a></li>
24       <li><a href="link_2.html">Blog</a></li>
25       <li><a href="link_3.html">Forum</a></li>
26     </ul>
27   </aside>
28 
29   <footer>
30   </footer>
31 </body>
32 </html>

Seitenleisten oder Randnotizen werden in HTML5 mit dem <aside>-Element dargestellt. Dabei ist es egal, ob diese Seitenleiste an der (rechten oder linken) Seite oder gar unten platziert ist, da dies später durch die CSS-Eigenschaften bestimmt wird. Der <aside>-Block enthält Informationen zum Inhalt der Webseite, die aber nicht Teil des Hauptinhalts sind, sondern Zusatzinformationen enthalten. Dies ist also ein semantisches (bedeutungsgebendes) Element.

Listing: Inhaltsbereich einer HTML-Seite mit Artikeln
 1 <!doctype html>
 2 <html>
 3 <head>
 4   <meta charset="utf-8">
 5   <title>HTML5-Seite mit Artikeln</title>
 6 </head>
 7 
 8 <body>
 9   <header>
10     <img src="logo.gif" alt="logo">
11     <h1>Titel</h1>
12   </header>
13   
14   <article>
15     <h1>Überschrift</h1>
16     <p>Dies ist meine erste HTML5-Seite1</p>
17     ... mehr Inhalt
18   </article>
19 
20   <aside>
21     <section>
22       <h2>Kontakt</h2>
23       <ul>
24         <li><a href="link_1.html">Wiki</a></li>
25         <li><a href="link_2.html">Blog</a></li>
26         <li><a href="link_3.html">Forum</a></li>
27       </ul>
28     </section>
29 
30     <section>
31     <h2>Weiterführende Links</h2>
32     <ul>
33       <li><a href="link_1.html">Wiki</a></li>
34       <li><a href="link_2.html">Blog</a></li>
35       <li><a href="link_3.html">Forum</a></li>
36     </ul>
37     </section>
38   </aside>  
39 
40   <footer>
41   </footer>
42 </body>
43 </html>

Für die Auszeichnung des Inhaltsbereiches gibt es drei Elemente:

Verwende <article>, wenn der Inhalt in sich abgeschlossen ist. Verwende <section>, wenn es mehrere ähnliche Blöcke gibt.

2.4 Elemente der Seite

Der Inhalt einer HTML-Seite besteht aus Text, Text-Elementen und externen Ressourcen wie Bilder oder Videos.

2.4.1 Textelemente

Unter Textstrukturierung sind all die Elemente zusammengefasst, die die Struktur des Textes einer Internetseite widerspiegeln, beispielsweise Überschriften oder Textabsätze.

Alle diese Elemente sind Blockelemente und stehen ohne weitere Maßnahmen alleine auf einer Zeile. Nachfolgende Elemente fallen auf den freien Bereich darunter.

2.4.1.1 h1 … h6

Die Überschriften (h = heading) sind immer fett und unterscheiden sich nur in der Größe.

Abbildung: Überschriften
Abbildung: Überschriften
1 <h1>Hier geht es los</h1>
2 <h2>Überschriften sind nicht verschachtelt</h2>
2.4.1.2 p

Textabsätze (p = paragraph) sind Blöcke mit Text.

1 <p>Ein Absatz.</p>
2.4.1.3 pre

Normalerweise entfernt der Renderer beim Anzeigen Gruppen von Leerzeichen (es wird nur eins angezeigt) und ignoriert alle anderen Leerstellen und Zeilenumbrüche. Werden diese dennoch benötigt, nutze das vorformatierte (pre = preformatted) Tag.

2.4.1.4 blockquote

Zitatblöcke sind eingerückt und als Block formtiert.

2.4.1.5 figure und figcaption

Dies ist eine allgemeine Form der Abbildung. Diese wird für grafische Ergänzungen, etwa Diagramme, Code-Beispiele, Fotos usw. genutzt. <figcaption> dient der Beschreibung des Inhalts eines <figure>-Elements.

1 <figure>
2    <img src="joerg.jpg" alt="Joerg Is A Geek" 
3         width="100" height="200">
4    <figcaption>Der Autor</figcaption>
5 </figure>
2.4.1.6 hr

Dies ist ein thematischer Bruch, eine horizontale Linie.

2.4.1.7 ol und li

Hiermit werden geordnete Listen (ol = ordered list, mit Zahlen / Buchstaben) erstellt. Jedes Element der Liste basiert auf <li> (list item). Listen können verschachtelt werden.

2.4.1.8 ul und li

Hiermit werden ungeordnete Listen (ul = unordered list, mit Aufzählungszeichen) erstellt. Jedes Element der Liste basiert auf <li> (list item). Listen können verschachtelt werden.

1 <ul>
2   <li>HTML</li>
3   <li>CSS</li>
4   <li>JavaScript</li>
5 </ul>
2.4.1.9 dl, dt, dd

Beschreibungslisten (dl = definition list) enthalten zwei Elemente. Der Ausdruck (dt = definition term), welcher in einer Beschreibungsliste erläutert wird sowie eine nähere Darstellung (dd = definition data).

2.4.1.10 div

Dies ist ein gruppierendes Element ohne semantische Bedeutung.

2.4.2 Fließtextauszeichnung

Elemente im Fließtext stehen wie Buchstaben in Zeilen und verdrängen nachfolgende Elemente nur aus dem selbst okupierten Raum.

2.4.3 Verweise

 1 <img src="planets.gif" width="145" height="126" alt="Planets"
 2  usemap="#planetmap">
 3 
 4 <map name="planetmap">
 5    <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
 6    <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Merc\
 7 ury">
 8    <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venu\
 9 s">
10 </map>

2.4.4 Tabellen

 1 <table>
 2    <thead>
 3    <tr>
 4       <th>Monat</th>
 5       <th>Umsatz</th>
 6    </tr>
 7    </thead>
 8    <tfoot>
 9    <tr>
10        <td>Gesamt</td>
11        <td>€ 180</td>
12    </tr>
13    </tfoot>
14    <tbody>
15    <tr>
16       <td>Januar</td>
17       <td>€ 100</td>
18    </tr>
19    <tr>
20       <td>Februar</td>
21       <td>€ 210</td>
22    </tr>
23    </tbody>
24 </table>

2.4.5 Multimedia und Grafiken

1 <canvas id="myCanvas"></canvas>
2 
3 <script>
4  var canvas = document.getElementById("myCanvas");
5  var ctx = canvas.getContext("2d");
6  ctx.fillStyle = "#FF0000";
7  ctx.fillRect(0, 0, 80, 80);
8 </script>

2.4.6 Formulare

 1 <input list="countries">
 2 
 3 <datalist id="countries">
 4    <option value="Germany">
 5    <option value="Netherland">
 6    <option value="France">
 7    <option value="Danmark">
 8    <option value="Austria">
 9      ...
10 </datalist>
Abbildung: Combo-Box mit datalist
Abbildung: Combo-Box mit datalist

2.4.7 Skripte

2.4.8 Interaktive Elemente

Die Elemente <menu>, <menuitem>, <command> sind inzwischen mangels Unterstützung der Browser wieder tot und sollten durch <nav> ersetzt werden. Dieses Element jedoch dient lediglich der semantischen Kennzeichnung – die Funktionalität muss zwingend durch JavaScript und CSS erzeugt werden. Es gibt mittlerweile Hunderte dafür geeignete Bibliotheken.

2.5 Allgemeine und universelle Attribute

Universalattribute haben in allen Elementen, in denen sie vorkommen dürfen, eine feste Bedeutung. Es gibt jedoch Abweichungen bezüglich der Elemente, in denen die Universalattribute vorkommen dürfen. Universalattribute dürfen innerhalb des <body>-Elements in den meisten dort erlaubten Elementen vorkommen. Die tatsächliche Benutzbarkeit für das betreffende Element kannst du einer HTML-Referenz entnehmen.

Folgende Universalattribute gibt es:

2.5.1 id

Das id-Attribut identifiziert ein Element innerhalb eines Dokuments. Es dient vorwiegend als Ziel eines Links innerhalb der Seite, als Identifikator innerhalb des CSS-Selektors oder als Identifikator für JavaScript. Der Inhalt des id-Attributs muss innerhalb des Dokuments einzig sein.

1 <div id="footnote-collection">

Der Name für Id soll mit einem Buchstaben beginnen und enthält danach beliebig vielen Zeichen aus [A-Za-z0-9_:.-]. Es ist erlaubt in allen Elementen außer: base, head, html, meta, script, style, title. Diese Elemente sind entweder nicht adressierbar, weil sie nicht Teil des DOM werden können oder ohnehin nur einmal existieren.

2.5.2 class

Das Attribut class ist eine nicht leere Zeichenkette ohne Leerzeichen. Es ist erlaubt in allen Elementen außer: base, head, html, meta, script, style, title. Das class-Attribut ordnet ein Element einer oder mehreren Klassen zu. Klassen dienen dazu, gleichartige Elemente im Markup zu kennzeichnen mit dem Ziel, diese gemeinsame auswählen zu können. Dabei müssen es nicht unbedingt gleichartige Elemente sein.

Klassen werden in der Regel für CSS oder als Selektor für JavaScript verwendet. Andere Prozesse können solche Elemente ebenfalls anhand der Klasse erkennen.

Das folgende Beispiel zeigt, wie Klassen angewendet werden. Zu Details über CSS schaue im Kapitel CSS nach.

Listing: Seite mit Stilen
 1 <style>
 2 
 3   .warnung {
 4     color: red;
 5   }
 6   p.warnung {
 7     border: 1px solid red;
 8     background-color: peachpuff;
 9   }
10 
11 </style>
12 <body>
13   <h1 class="warnung">Warnung</h1>
14  
15   <p class="warnung">Bitte mehr Bücher lesen!</p>
16  
17   <p><strong class="warnung">Achtung:</strong> Lerne jetzt HTML!</p>
18 </body>

Das Beispiel klassifiziert alle Elemente mit der Textfarbe “rot”. Der Absatz mit der Klasse .warnung wird zusätzlich mit einem rotem Rand und einem hautfarbenen Hintergrund versehen.

2.5.3 accesskey

Mit accesskey kannst du ein Zeichen auf der Tastatur bestimmen, das der Anwender drücken kann, um Elemente direkt anzuspringen (accesskey = Zugriffstaste). Die Implementierung im Browser ist sehr unterschiedlich (Alt-, Command-, Steuerungs-Taste + Buchstabe). Ebenso kann es passieren, dass Shortcuts durch Browsermenüs bereits belegt sind.

Das accesskey-Attribut hat weitere Nachteile. Diese beginnen beim Konzept der Tastaturbedienung von Webinhalten bis hin zu fehlenden Standards für die Belegung von Links und sonstigen Funktionen. Es gibt keine allgemeingültige Konvention, welche Tastaturkürzel für welche Links oder Funktionen auf einer Webseite eingesetzt werden sollen. Solche “Standards” werden immer wieder diskutiert und Konsens unter Fachleuten ist, dass das Konzept des accesskey-Attributs in HTML nicht praktikabel ist. Dennoch wird das Konzept des Shortcuts in zukünftigen HTML-Spezifikationen berücksichtigt werden müssen.

2.5.4 contenteditable

Das contenteditable-Attribut legt fest, ob der Nutzer den Inhalt eines Elements editieren (verändern) darf. Mögliche Werte sind true oder false (letzteres ist der Standard). 

1 <section contenteditable="true">
2   <h2>Diese Überschrift kann verändert werden.</h2>
3   <p>Dieser Absatz kann verändert werden.</p>
4 </section>

Das section-Element hat das Universalattribut contenteditable mit dem Wert true. Da für die Elemente <h2> und <p> kein Attribut gesetzt wurde, vererbt sich die Editierfähigkeit.

Soll die Änderung gespeichert werden, so muss weiterer Code mit JavaScript und einer serverseitigen Unterstützung geschrieben werden. HTML alleine kann dies nicht.

2.5.5 contextmenu

Das contextmenu-Attribut legt fest, ob der Nutzer mit der rechten Maustaste ein Kontextmenü öffnen darf.

 1 <body contextmenu="info">
 2   <menu type="context" id="info">
 3     <menu label="info">
 4       <menuitem label="Joerg" 
 5                 onclick="window.open('http://www.joergkrause.de');">
 6       </menuitem>
 7       <menuitem label="IT-Visions" 
 8                 onclick="window.open('http://www-it-visions.de');">
 9       </menuitem>
10     </menu>
11   </menu>
12 </body>

2.5.6 dir

Das dir-Attribut definiert die Schreibrichtung innerhalb des Dokuments. Sprachen wie Hebräisch oder Arabisch schreiben sich von rechts nach links. Im Unicode System steht jedoch bereits die Information zur Schreibrichtung. Verwende dieses Element dann, wenn die Schreibrichtung kontrolliert werden muss. CSS verfügt über zusätzliche Möglichkeiten zur Kontrolle der Schreibrichtung.

Der Wert ist entweder die Zeichenfolge “ltr” oder “rtl” (left to right, right to left).

Es ist erlaubt in allen Elementen außer: applet, base, basefont, br, frame, frameset, hr, iframe, param, script.

2.5.7 draggable

Das draggable-Attribut zeigt an, ob das Element mit der Drag & Drop API gezogen (gedraggt) werden kann.

2.5.8 dropzone

Das dropzone-Attribut sollte festlegen, ob ein Element beim Ziehen mit Drag & Drop bewegt, kopiert oder verlinkt wird.

2.5.9 hidden

Das hidden-Attribut zeigt an, dass ein Element nicht länger relevant ist und deshalb ausgeblendet wird. Du darfst das hidden-Attribut keinesfalls dafür verwenden, um Inhalte zu verstecken, damit sie für den Benutzer nicht mehr erreichbar sind.

2.5.10 lang

Das lang-Attribut legt eine den IANA-Sprachdefinitionen folgende Sprache des Elementinhalts fest. Das Attribut sollte auch bei einsprachigen Dokumenten im Wurzelelement (html) definiert werden und für mehrsprachige Dokumente in jedem Element, ab welchem ein Wechsel der Sprache stattfindet.

1 <html lang="de">

Der Inhalt ist genau ein IANA-Sprachkürzel. Es ist erlaubt in allen Elementen außer: applet, base, basefont, br, frame, frameset, hr, iframe, meta, param, script.

Verwende immer das Sprachattribut im <html>-Tag, um die Sprache des Textes auf der Seite anzugeben. Für Seiten, die als XML ausgeliefert werden, verwende bitte das xml:lang-Attribut.

2.5.11 spellcheck

Das spellcheck-Attribut legt fest, ob die browserinterne Rechtschreibprüfung aktiviert werden soll. Der Wert kann true oder false sein. Dieses Attribut kannst du in folgenden Elementen verwenden: input, textarea.

2.5.12 style

Das style-Attribut hat als Inhalt CSS-Code. Normalerweise notierst du CSS in eigenen Stildateien. Für manche Zwecke ist es jedoch sinnvoll, Stilregeln direkt im Element zu notieren, zum Beispiel, wenn viele Bilder auf einer Karte platziert werden und die Positionen direkt bestimmt werden sollen. Dies nennt man Inline-Styles. Sie haben einige Beschränkungen im Vergleich zu den global notierten Varianten. So sind Definitionen von Pseudoattributen und ein Medientyp-Kontext nicht möglich. Du solltest style-Attribute also nur in begründeten Ausnahmen verwenden.

1 <img src="" style="left:247px; top:83px">

Erlaubt ist das Attribut allen Elementen außer: base, basefont, head, html, meta, param, script, style, title.

2.5.13 tabindex

Das tabindex-Attribut ermöglicht mit Hilfe der Tabulator-Taste beliebige Elemente einer HTML-Datei anzuspringen. Die Bedienung mit der Tastatur komplementiert das Attribut accesskey, ist jedoch weitaus robuster und praktisch überall unterstützt, wo eine Tastatur vorhanden ist.

2.5.14 title

Das title-Attribut betitelt oder beschreibt ein Element. Browser blenden den Text ein, wenn der Anwender mit der Maus draufzeigt. Dies wird auch als Tooltip bezeichnet. Typisch ist das Kommentieren von Links, das Liefern von Zusatzinformationen zu Bildern oder die Erklärung von Abkürzungen. Das Betiteln sollte auf übergeordneten Elementen nur sparsam ausgeführt werden.

1 <a href="http://example.org" title="external link">

Zusatzinformation, die aus dem href-Attribut nicht sofort ersichtlich ist, wird im title-Attribut angezeigt.

1 <abbr title="International Panel for Climate Change">IPCC</abbr>

Abkürzungen werden mit dem title-Attribut erläutert.

Erlaubt ist das Attribut in allen Elementen außer: base, basefont, head, html, meta, param, script, style, title.