Kurzanleitung HTML

• Alle Tags müssen klein geschrieben werden.
• Alle Tags müssen abgeschlossen sein.
  Wenn ein Tag geöffnet wurde, muss später ein abschließendes Tag folgen.
• Die Tags <img /> und <br /> sind selbstschließend, das abschließende / darf keinesfalls fehlen.
• Wenn mehrere Tags nacheinander geöffnet, aber nicht sofort geschlossen werden, muss beim Schließen unbedingt die umgekehrte Reihenfolge eingehalten werden.

Beispiel falsche Schachtelung:

	<strong>  <em> TEST </strong>  </em> 

	<strong>  <em> TEST </em>  </strong>  

• Ein Attribut besteht immer aus einem Schlüssel und einem Wert, voneinander getrennt durch das Gleichheitszeichen. Es darf keines davon weggelassen werden.
• Alle Attributnamen sind kleinzuschreiben.
• Alle Attributwerte müssen in Anführungszeichen eingeschlossen sein.
• Es hängt vom jeweiligen Tag ab, welche Attribut-Schlüssel erlaubt sind.
• Es hängt vom Attribut-Schlüssel ab, welche Attribut-Werte erlaubt sind.
• Je nach Tag sind nur bestimmte Attribut-Schlüssel erlaubt. Je nach Attribut-Schlüssel sind nur bestimmte Attribut-Werte dazu erlaubt. Bei manchen Attributen muss der Attribut-Wert aus einem festgelegten Wertebereich stammen, oder eine ganze Zahl darstellen, oder darf Freitext sein.
• Zu einem Attribut-Schlüssel muss immer ein Attribut-Wert angegeben werden. Es kann sich hierbei aber ggf. um den leeren Wert handeln: Zwei Anführungszeichen direkt nebeneinander. Beispiel: alt=""
• Ein Attributname darf je konkretem Tag nur einmal vorkommen.
  Verboten: <img alt="hilfe1" alt="hilfe2" …
• Wenn im Rahmen eines Freitextes im Attribut-Wert ein amerikanisches doppeltes Anführungszeichen ( " ) notwendig ist, muss es kodiert werden als ", Beispiel: title="Er sagte laut: "Hello again""

Häufig verwendete HTML-Tags

Häufig verwendete Attribute:

href

Nur beim a-Tag, gibt das Link-Ziel an. Beispiel: href="Seite2.html"

src

Nur beim img-Tag, gibt das anzuzeigende Bild an. Beispiel: src="Bild1.jpg"

alt

Nur beim img-Tag, gibt Erläuterungen zum Bild, z.B. für Blinde. Es sollte meist nicht der Bildinhalt erläutert werden, sondern eher der Zweck des Bildes. Beispiel: alt="zur nächsten Seite"

id

Eine eindeutige ID festlegen, keine id darf mehrfach auf einer Seite vorkommen.
Eine bestehende ID sollte niemals mehr geändert werden, da von extern darauf Bezug genommen werden könnte.
Beispiel: id="id1"

class

Eine oder mehrere Stil-Klassen zuordnen, Beispiel: class="hersteller"

style

Konkrete Stilangaben, Beispiel: style="color:red"

title

Alternativtext, wird in aller Regel als Bubble-Help angezeigt, Beispiel: title="Herstellername"

lang

Einen Text-Teil als anders-sprachig kennzeichnen. Browser für Blinde können hierdurch den Text z.B. korrekt aussprechen. Beispiel: lang="en"

hreflang

Gibt die Sprache des Hyperlink-Ziels an, nur für das a-Tag (Anchor, Hyperlink) relevant. Es braucht nur angegeben werden, wenn die Sprache des Ziels von der im Dokument verwendeten abweicht. Mit Hilfe dieses Attributs könnten z.B. alle Links auf englisch-sprachige Texte eine kleine Union-Jack-Fahne in der Darstellung erhalten, damit nicht-englisch-sprachige sich den Klick ersparen können.

Auch hier gilt: Andere Attribute als die hier aufgeführten sollten nur sehr bewusst eingesetzt werden.

Beispiel HTML-Quelltext:

	<a
		href="https://www.firma.xyz/"
		id="link"
		class="link"
		style="color:red"
		title="zur Homepage der Firma XYZ"
	>
		<img
			src="/s/Blog/vs08.jpg"
			alt="Logo der Firma XYZ"
			id="logo1"
			class="logo"
			style="border:none"
		/>
		Firma XYZ
	</a>

Selten verwendete Tags

Leider sind manche Tags in Vergessenheit geraten, weil manche rein optisch orientierten Tools diese nicht anbieten. Ihre Verwendung strukturiert den Text aber semantisch präziser, und kann von Suchmaschinen besonders honoriert werden.

acronym

Eine Abkürzung kennzeichnen, z.B. <acronym title="HyperText Markup Language">HTML<acronym>

blockquote

Einen Textbereich als Zitat kennzeichnen.

code

Einen Textbereich als Quelltext in einer Computersprache kennzeichnen, z.B. als HTML-Quelltext. Beispiel: <code>&lt;br /&gt;</code>

del

Einen Textbereich als logisch gelöscht kennzeichnen. In der letzendlichen Anzeige kann dieser Text durchgestrichen— oder auch gar nicht — angezeigt werden.

dfn

Eine Definition kennzeichnen.

ins

Einen Textbereich als neu hinzugefügt kennzeichnen.

dl, dt, dd

Definitions-Liste (dl), Defintions-Term (dt), Definitions-Beschreibung (dd)

samp

Bezeichnet ein Beispiel.

span

Einen Text im Fließtext kennzeichnen, um ihn z.B. per Attribut lang="en" als englisch-sprachig zu kennzeichen. Beispiel: Du bist ja <span lang="en">crazy</span>!

Weitere, seltener benutzte, aber gezielt gut verwendbare Tags

pre, ol, q, sub, sup, kbd, v, hr

Tags für Tabellen

table, thead, tbody, tfoot, tr, th, td, caption, colgroup, col

Tags, die nur für Eingabe-Formulare benötigt werden

fieldset, form, label, input, button, legend, select, optgroup, option, textarea

Folgende Tags dürfen nicht im Fließtext verwendet werden:

frameset, frame, noframes, html, head, meta, title, link, style, body

Spezialtags für Experten:

iframe, map, script, noscript, object, param

Zukünftige, neue Tags

Aktuellste Versionen einiger Browser erlauben schon die Nutzung mancher der neuen Tags der kommenden HTML5-Version [2 IBM]) die aber bisher nicht verabschiedet ist. Zu diesen neuen, vielen Browsern noch unbekannten Tags gehören:

video, audio, article, aside, bb, canvas, datagrid, datalist, details, dialog, eventsource, figure, footer, header, mark, menu, meter, nav, output, progress, section, time

Tabu-Tags

Folgende Tags sollten nicht mehr benutzt werden, weil sie veraltet oder obsolet sind:

applet, area, b, base, basefont, bdo, big, center, dir, embed,font, i, isindex, layer, menu, s, strike, small, u, tt

Referenzen zu HTML-Tags, Attributen und Zeichen

Zwar nicht mehr ganz taufrisch, aber immer noch die Referenz schlechthin im deutschsprachigen Raum ist SELFHTML, hier die wichtigsten Direktlinks dorthin:

• HTML-Elementreferenz
• HTML-Attribut-Referenz
• HTML-Zeichenreferenz

Fazit

In der Praxis reichen 20% der Tags für 80% aller Texte. Es schadet aber nicht, auch weniger bekannte Tags zu kennen und vor allem auch einzusetzen. Syntaktisch und semantisch möglichst perfekte HTML-Inhalte haben bessere Chancen auf die oberen Plätze in den Suchmaschinen, doch oft werden gerade diese beiden Punkte eher stiefmütterlich behandelt. Dabei ist es relativ leicht und mit wenig Aufwand verbunden, es hier gleich richtig zu machen.

Automatische Tools wie wespiva können helfen, Webseiten mit veralteten Konstrukten zu finden, um diese auf modernen Stand zu bringen. Nur syntaktisch einwandfreie Sites können automatisch auf Fehler überprüft werden und sind einer automatischen Verarbeitung besser zugänglich. Korrekte HTML-Quelltexte können ohne Änderung der Texte selbst auf unterschiedlichste Weise ausgegeben werden. Ein Re-Design einer Site kann hierdurch im besten Fall ohne jegliche Änderung der Text-Inhalte über die Bühne gehen, was Zeit und Kosten spart.

Es fehlen allerdings weitere Tags und Attribute, die die Inhalte noch besser kennzeichnen. Ein Datumswert könnte z. B. in einem Datums-Tag notiert werden, ein entsprechendes Attribut würde sprachunabhängig die maschinelle Auswertung erlauben:

Es fehlen Tags für Preise, Warengruppen, Ortsbezeichnungen, Maßeinheiten, usw. Diese noch zu spezifizierenden Tags würden eine tiefergehende maschinelle Analyse und damit auch bessere Suchmaschinen und intelligentere Aggregationsdienste ermöglichen.

Ein semantisches Web ist zugänglicher und nützlicher als ein rein darstellungsorientiertes Web, bestehend aus Flash und für ewig fixierten PDF-Dateien.