Kurzanleitung HTML

© Christoph Wissing –

Immer mehr Menschen kommen in die Verlegenheit, Texte zur Publikation im Web bearbeiten zu müssen oder zu wollen. Meist dient hierzu eine eigenständige WYSIWYG -Anwendung, die den HTML -Quelltext verbirgt und stattdessen nur das Aussehen anzeigt. Dabei ist die direkte Pflege in HTML keine Geheimwissenschaft, der große Erfolg des WWW erklärt sich nicht zuletzt aus der einfachen Erlernbarkeit des Schreibens direkt in HTML.

Wer sich diese Mühe macht, wird belohnt mit einer einfacheren Erfassung: Man muss die Hand nicht mehr von der Tastatur nehmen, um einen Textbereich als Überschrift erster Ordnung zu markieren. Die Darstellung im Browser ist so viel feiner steuerbar. Suchmaschinen danken eine korrekte sinngemäße Auszeichnung mit besseren Trefferpositionen. Manche WYSIWYG-Editoren sind rein visuell orientiert, diese widersprechen der Idee eines semantischen Netzwerks und nehmen dadurch viele Möglichkeiten, wie z.B. die spätere leichte Beeinflussung des Aussehens, abhängig vom Inhalt.

Nicht zuletzt können dank semantisch korrektem HTML maschinelle Automatismen die Texte analysieren und die Ausgabe mediengerecht aufbereiten, was z.B. auch blinden Mitmenschen überhaupt erst eine bequeme Teilnahme am WWW ermöglicht, durch Vorlesen oder Brailleschrift-Ausgabegeräte.

Ein weiteres Beispiel ist das Tool wespiva, es kann eine komplette Website durchwandern und den reinen Textinhalt extrahieren, oder die Texte aller Hyperlinks in Form einer Liste darstellen.

(direkt zur Liste der Tags)

Kurze Einführung in die Pflege von HTML-Quelltexten.

HTML ist eine Sprache zur Auszeichnung von Texten, d.h. es werden Texte in logische Bestandteile zerlegt und deren jeweiliger Zweck beschrieben. Endziel dabei ist die spätere Darstellung in Web-Browsern oder e-books, aber auch die maschinelle Weiterverarbeitung der Inhalte.

Der Schwerpunkt der manchmal so genannten HTML-Sprache liegt dabei auf der semantischen, d.h. sinnentsprechenden, Kennzeichnung von Text-Teilen. Es kann damit ein Text-Teil als Überschrift ausgezeichnet werden, ein anderer Text-Teil als Fließtext, oder ein einzelnes Wort als stark betont / wichtig. Die HTML-Auszeichnungen legen nicht das spätere tatsächliche Aussehen fest, auch wenn in der Praxis natürlich die Auszeichnung das Aussehen mitbestimmt. Es kann aber die Darstellung von ein- und demselben HTML-Quelltext je nach Browser oder Einstellungen am Ausgabe-Rechner völlig verschieden dargestellt werden. Der HTML-Quelltext-Autor soll also nicht das Aussehen festlegen, sondern die Text-Struktur maschinell erkennbar machen.

Sonderzeichen in HTML

Folgende Zeichen genießen innerhalb von HTML eine Sonderbehandlung und dürfen daher niemals im Fließtext vorkommen:

  1. < (Kleiner-Zeichen)
  2. > (Größer-Zeichen)
  3. & (Ampersand, kaufmännisches und)

Wenn eines dieser Zeichen vorkommt, muss es kodiert angegeben werden, bzw. umschrieben werden. Kodierungen:

  1. < wird geschrieben als: &lt;
  2. > wird geschrieben als: &gt;
  3. & wird geschrieben als: &amp;

Werden diese nicht kodiert, kommt es bestenfalls zu leichten Darstellungsfehlern, schlimmstenfalls sieht der Nutzer nur noch Teile des Inhalts. Ein guter HTML-Editor lässt ein Speichern syntaktisch falscher HTML-Quelltexte nicht zu, sondern weist auf derartige Fehler hin, sofern diese automatisch erkennbar sind.
Es gibt weitere Kodierungen, aber nur diese drei sind die zwingend notwendigen innerhalb von Fließtexten.

HTML-Element, genannt Tag (englisch ausgesprochen: Täg)

Ein Tag ist ein bestimmter HTML-Code, der in Größer/Kleiner-Zeichen (<, >) eingefasst ist, und den darin eingeklammerten Text semantisch auszeichnet, z.B. als Überschrift oder als Fließtext. Das Wort innerhalb der <>-Zeichen ist dabei der Tag-Name und gibt den Zweck an.

Reihenfolge:

  1. Öffnendes Tag: Tagname, eingefasst zwischen < und >, Beispiel: <h1>
  2. Beliebiger Fließtext, der auch dem Endnutzer (meist) angezeigt wird, Beispiel: Fließtext mit Punkt. und Komma,
  3. Schließendes Tag: Tagname zwischen </ und > (man beachte das / nach dem Kleiner-Zeichen), Beispiel: </h1>

Beispiel:

<h1> Ich bin eine Überschrift.</h1>

Dem Endnutzer angezeigt wird der Fließtext, aber niemals der Tagname.
Aussehen im Browser für das obige Beispiel:

Ich bin eine Überschrift.

Selbstschließende Tags

Es gibt zwei wichtige Tags, nämlich das br-Tag (Zeilenumbruch erzwingen) und das img-Tag (Bild anzeigen), in denen kein Text zwischen dem öffnenden und schließenden Tag stehen darf, weil dieser ignoriert würde. Diese Tags werden als selbstschließend bezeichnet. Sie werden verkürzt notiert, indem der Schrägstrich direkt dem ersten Tagnamen folgt und das schließende Tag dafür weggelassen wird..

Anstelle von <br></br> schreibt man also z.B. <br />

Durch diese Notation kann man ein zusätzliches schließendes Tag einsparen. Manche betagten Browser können sogar nur diese verkürzte Form für die betroffenen Tags korrekt interpretieren. Für diese uralten Browser sollte vor dem Schrägstrich immer noch ein Leerzeichen stehen, sonst könnte das Tag ignoriert werden.

Attribute

Ein Tag kann mehrere Attribute aufweisen, die die Eigenschaften und das Aussehen näher festlegen. Die Attribute stehen mit innerhalb des Tags, durch Leerzeichen oder Zeilenumbruch voneinander getrennt.

Beispiel:

	<a href="NeueSeite.html" target='_blank'>
		Achtung
	</a>

oder auch

	<a
		href='NeueSeite.html'
		target="_blank"
	>
		Achtung
	</a>

Ein Attribut besteht aus dem Attribut-Schlüssel und dem Attribut-Wert. Diese beiden sind durch ein Gleichheitszeichen voneinander getrennt. Der Attribut-Wert wird immer in Anführungszeichen eingefasst. Einfache oder doppelte Anführungszeichen sind dabei möglich ( " oder ' ), aber immer paarweise. Achtung: Die deutschen Anführungszeichen sind nicht erlaubt, weder das „führende“ unten ( „ ) noch das schließende „oben“ ( “ ), sondern nur die „amerikanischen“ doppelten oder einfachen ( " oder ' ) Anführungszeichen.

Regeln für Tags

  • 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> 
Beispiel richtige Schachtelung:
	<strong>  <em> TEST </em>  </strong>  

Regeln für Attribute

  • 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 &quot;, Beispiel: title="Er sagte laut: &quot;Hello again&quot;"

Häufig verwendete HTML-Tags

h1, h2, h3
Überschrift der Stufe 1, 2 oder 3 — ist hervorgehoben und hat oben und unten Abstand. Eine Überschrift mit h1 ist in aller Regel schon vom Template vorgegeben.
Beispiel:
	<h1>
		Hunderassen
	</h1>
	<h2>
		Jack-Russel-Terrier
	</h2>
p
Absatz, in aller Regel mit einer halben Zeile Abstand zur vorherigen
Beispiel:
	<p>
		Ein Absatz.
	</p>
	<p>
		Noch ein Absatz.
	</p>
br
Zeilenumbruch
Beispiel:
	Eine Textzeile<br />
	Eine weitere Textzeile.
div
Sinnabschnitt, in aller Regel aber ohne vertikalen Abstand, aber mit neuer Zeile
Beispiel:
	<h2>
		Abschnitt 1
	</h2>
	<div>
		<p>
			Ein Absatz.
		</p>
		<p>
			Noch ein Absatz.
		</p>
	</div>
	<h2>
		Abschnitt 2
	</h2>
	<div>
		<p>
			Ein Absatz.<br />
			Und eine neue Zeile im Absatz.
		</p>
	</div>
strong
Hervorhebung als wichtig, in aller Regel durch Fettdruck
Beispiel:
	<strong>Hervorhebung</strong>
em
hervorgehoben, in aller Regel kursiv dargestellt
Beispiel:
	<em>Betont</em>
sup
Hochstellung eines Textes
Beispiel:
	2<sup>4</sup> = 16
ul, li
Darstellung von Listen
Beispiel:
	<ul>
		<li>
			Punkt 1
		</li>
		<li>
			Punkt 2
		</li>
	</ul>
a
Verlinkung auf andere Seiten
Beispiel:
	<a 
		href="https://www.wissing.com/"
	>
		Christoph Wissing - Homepage
	</a>
img
Verweis per src auf ein Bild, immer auch das alt-Attribut mit angeben, notfalls das alt-Attribut leer lassen.
Beispiel:
	<img
		src="/s/Blog/vs08.jpg"
		alt="Anreise"
	/>

Es gibt einige weitere Tags, die man gezielt einsetzen kann und sollte. Die obigen 20% aller Tags reichen aber für 80% aller einfachen Texte.

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:

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:

Am <date iso="2009-12-31">31. Dezember 2009</date> wird Silvester gefeiert.

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.