HTML & Text

HTML bietet Elemente um Text wie Überschriften, Absätze, Listen und Sonderzeichen in die Web-Seite zu schreiben. Auch das Erstellen von Abschnitten (Container) wird hier vorgestellt. HTML unterscheidet dabei Elemente, die eine neue Zeile erzeugen (sogenannte block-Elemente) und Elemente, die einfach Text formatieren (inline-Elemente).

Container zur Seitenstrukturierung

Für die Seitenstrukturierung stellt HTML folgende Elemente (Tags) zur Verfügung:

div header nav aside main section article footer address

Container sind Abschnitte eines Dokuments und dienen in erster Linie der Seitenstrukturierung. Während in altem HTML bzw. XHTML nur der div-Tag zur Verfügung stand, bietet uns HTML5 viele neue Container-Elemente. Diese Elemente sind Block-Elemente und machen gar nichts, außer einer neuen Zeile (Absatz) im Dokument. Container-Elemente können verschachtelt werden das heißt ein Container-Element kann weitere Container-Elemente aufnehmen. HTML5-Elemente dienen in erster Linie der Semantic eines Dokuments wobei das main-Element allerdings nur einmal vorkommen darf.

Container-Elemente

Sie finden hier eine Liste der Container-Elemente mit einer kurzen Beschreibung. Container-Elemente dienen in erster Linie der Semantic eines Dokuments mit der Ausnahme des guten, alten div-Tags, welcher universal einsetzbar ist und keine semantischen Inhalte beschreibt.

  • div: keine semantische Bedeutung
  • header: definiert den Kopfbereich
  • nav: für Navigationsleiste
  • aside: für Inhalt mit indirekten Zusammenhang (z.B. Sidebar)
  • main: der Hauptteil des Dokuments
  • section: Abschnitt
  • article: Artikel im Abschnitt
  • footer: für Fußzeile
  • address: z.B. Inhalt über den Autor

Container-Elemente kennen außer Universalattribute keine weiteren Eigenschaften.

Semantic

Eine von den wichtigen Neuerungen in HTML5 sind Elemente die der Semantik dienen. Konkret heißt es, dass man in HTML5 die verschiedenen logische Teile einer Webseite jetzt auch mit HTML-Tags definieren kann.

Ein einfaches Beispiel

<body>
<header>
<section></section>
<nav></nav>
</header>

<section>
<article></article>
<article></article>
</section>

<footer>
<section></section>
<address></address>
</footer>
</body>

w3schools.com

Semantic

Überschriften

Für Überschriften stellt HTML folgende Elemente (Tags) zur Verfügung:

h1 h2 h3 h4 h5 h6

Wie in jedem Textprogramm werden auch in HTML Inhalte mit Überschriften und Absätzen strukturiert.

h1, h2, h3, h4, h5, h6-Elemente

HTML bietet uns 6 Überschrifthirachien an. Eine Überschrift der Ebene 1 notieren sie mit <h1>...</h1>.

Ein einfaches Beispiel

<body>
<h1>Das ist eine Überschrift h1</h1>
<p>Lore Ipsum</p>
<h2>Das ist eine Überschrift h2</h2>
<p>Lore Ipsum</p>
<h2>Das ist noch eine Überschrift h2</h2>
<p>Lore Ipsum</p>
</body>

Ein einfaches Beispiel strukturiert

<body>
<section>
<h1>Das ist eine Überschrift h1</h1>
<p>Lore Ipsum</p>

<article>
<h2>Das ist eine Überschrift h2</h2>
<p>Lore Ipsum</p>
<p>Lore Ipsum</p>
</article>

<article>
<h2>Das ist noch eine Überschrift h2</h2>
<p>Lore Ipsum</p>
<p>Lore Ipsum</p>
</article>

<section>
</body>

Absätze & Textstrukturierung

p pre blockquote br hr

In XHTML ist es nicht erlaubt, Text in das body-Element zu schreiben, ohne ein Element zur Textstrukturierung. In HTML5 ist das möglich, gehört aber nicht zum guten Stil. Auf dieser Seite findet ihr grundlegende Elemente zur Textstrukturierung.

p-Element

Absätze werden innerhalb von <p></p> notiert. Wichtig ist noch, dass ein p-Tag keine weiteren Block-Elemente beinhalten darf.

p-Elemente kennen außer Universalattribute keine weiteren Eigenschaften.

pre-Element

Mit dem pre-Element schreiben sie präformatierten Text. Das heißt der Text wird so im Browser dargestellt, wie er im Quellcode geschrieben wird. Inklusive Zeilenumbrüche und Leerzeichen <pre></pre>. Wichtig ist noch, dass ein pre-Tag keine weiteren Block-Elemente beinhalten darf.

pre-Elemente kennen außer Universalattribute keine weiteren Eigenschaften.

blockquote-Element

Zitate können innerhalb von <blockquote></blockquote> notiert werden. In den Strict-Varianten von (X)HTML müssen sie innerhalb von <blockquote></blockquote> ein weiteres Block-Element notieren z.B. <blockquote><p></p></blockquote>. Standardmäßig wird der Text eingerückt dargestellt.

Folgende Attribute stehen zur Verfügung

  • Universalattribute
  • cite: Zitat-Quellangabe

Das cite-Attribut sollten Sie verwenden, wenn die Originalquelle, von der das Zitat stammt, unter einer URL-Adresse im Internet zu finden ist. 

<blockquote cite="http://www.adiprinz.at">
Zitat-Inhalt
</blockquote>

br-Element

HTML-Browser erkennen den Zeilenumbruch automatisch. Der Text passt sich in der Regel immer an die Fenstergröße an. Sie können jedoch den Zeilenumbruch manuell bestimmen (harter Zeilenumbruch). Mit dem br-Tag bestimmen sie einen Zeilenumbruch <br>. Das br-Tag ist Inhaltsleer (Standalone) und muss in XHTML so geschrieben werden <br />. In HTML5 wiederum sind beide Varianten erlaubt. 

<!-- In HTML -->
<br>
<!-- In XHTML -->
<br />

br-Elemente kennen außer Universalattribute keine weiteren Eigenschaften.

hr-Element

Das hr-Element erzeugt eine vertikale Linie im Dokument. Das hr-Tag ist ein Block-Element und ist Inhaltsleer (Standalone-Tag). 

<!-- In HTML -->
<hr>
<!-- In XHTML -->
<hr />

hr-Elemente kennen außer Universalattribute keine weiteren Eigenschaften.

Beispiel Textstrukturierung

<body>
<h1>Das ist eine Überschrift1</h1>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
sed diam nonumy eirmod tempor invidunt ut labore et 
dolore magna aliquyam erat, sed diam voluptua.
</p>
<h2>Das ist eine Überschrift2</h2>
<pre>
Max und Moritz machten beide,
Als sie lebten, keine Freude:
Bildlich siehst du jetzt die Possen,
Die in Wirklichkeit verdrossen.
</pre>
<blockquote>
<p>
Zwei Dinge sind unendlich: das Universum und die menschliche 
Dummheit; aber beim Universum bin ich mir immer noch
nicht ganz sicher.
</p>
</blockquote>
<body>

Textauszeichnung

Für die Textauszeichnung stellt HTML folgende Elemente (Tags) zur Verfügung:

b i u s small sup sub em strong code samp kbd var cite dfn abbr q mark time ruby rt rp bdi bdo br wbr del ins span

Fetter-, kursiver-, unterstrichener-, hochgestellter- usw. Text wird als Textauszeichnung bezeichnet. Textauszeichnungen sind Inline-Elemente und werden in zwei Gruppen unterteilt.

Physische Textauszeichnungen

Physische Textauszeichnungen haben Bedeutungen wie fett (<b>...</b>) oder kursiv (<b>...</b>), stellen also direkte Angaben zur gewünschten Schriftformatierung dar. Bei physischen Elementen sollte der Web-Browser eine Möglichkeit finden, den so ausgezeichneten Text entsprechend darzustellen.

Logische Textauszeichnungen

Logische Textauszeichnungen haben Bedeutungen wie betont (<strong>...</strong>) oder emphatisch (<em>...</em>). Bei logischen Elementen entscheidet der Web-Browser, wie ein solcher Text hervorgehoben wird (z.B. fett, kursiv oder andersfarbig). In Verbindung mit Stylesheets können Sie logische Textauszeichnungen allerdings nach Wunsch formatieren.

HTML5 Textauszeichnungen

Nach der HTML5-Spezifikation sollte der b-Tag nur eingesetzt werden, wenn kein anderer Tag besser geeignet ist. Die HTML5-Spezifikation besagt, dass Überschriften mit dem h1 bis h6-Tags bezeichnet werden, hervorgehobenen Text sollte mit dem em-Tag geschrieben werden. Wichtiger Text sollte mit dem strong-Tag bezeichnet werden und für markierten Text soll man das mark-Tag verwenden.

Kurzbeschreibung der Tags

Häufig benutzte HTML-Elemente.

  • em: emphatisch (kursiv)
  • strong: bedeutend (fett)
  • sup: tiefgestellter Text
  • sub: hochgestellter Text
  • code: zeichnet Quelltext aus
  • cite: Titel eines Werkes (Bild, Film, Musik u.a
  • q: Zitat
  • mark: Hervorhebung (highlights)
  • br: Harter Zeilenumbruch
  • wbr: markiert explizit weitere Stellen, an denen ein Browser den Text umbrechen darf (auch mitten im Wort).
  • span: keine Bedeutung, nur für CSS-Anweisungen

Wenig benutzte HTML-Elemente.

  • b: fetter Text
  • i: kusrsiver Text
  • u: stilistisch anders als normaler Text (unterstrichen)
  • s: Text ist nicht länger relevant
  • small: Text ist weniger bedeutend
  • samp: Text als beispielhafte Ausgabe
  • kbd: Keyboard, Text des Benutzers durch Eingabe
  • var: Text als Variable
  • dfn: Definition für Inhalte
  • abbr: Abkürzung oder Akronym

Nicht benutzte HTML-Elemente.

  • time: Zeit und/oder Datum
  • ruby: Anmerkungen zu ostasiatischen Schriftzeichen
  • rt: Ergänzung füt ruby
  • rp: Ergänzung füt ruby
  • bdi: isoliert Text mit anderer Schreibrichtung
  • bdo: Schreibrichtung (Attribut dir)
  • del: ungültiger Text (Attribut cite datetime)
  • ins: ungültiger- und neuer gültiger Text(Attribut cite datetime)

Textauszeichnungen kennen mit wenigen Ausnahmen, (bdo, del) außer Universalattribute keine weiteren Eigenschaften.

Kleines Beispiel

<body>
<p>
<b>Das ist fetter Text</b> 
<strong>Das ist stark hervorgehobener Text</strong> 
<i>Das ist kursiver Text</i> 
<em>Das ist hervorgehobener Text</em>
</p>
<body>

Nach den Regeln von (X)HTML dürfen Textauszeichnungen, in den Varianten Strict, nur innerhalb eines Block-Elements vorkommen. In HTML5 spielt das keine Rolle.

Wohlgeformt

Wenn sie mehrere Elemente gleichzeit schließen wollen, müssen sie die Reihenfolge beachten. Im folgenden Beispiel werden drei Elemente geschlossen, die Reihenfolge ist allerdings falsch. 

<body>
<p>Das ist normaler Text
<b>Das ist fetter Text
<i>Dieser Text ist fett und kursiv
</p></i></b>
<body>

Wohlgeformtheit beschreibt die Reihenfolge, mit der Elemente zu schließen sind. Als Faustregel gilt, dass ein Element, dass zuletzt geöffnet wurde, als erstes zu schließen ist. Folgendes Beispiel ist korrekt (wohlgeformt). 

<body>
<p>Das ist normaler Text
<b>Das ist fetter Text
<i>Dieser Text ist fett und kursiv
</i></b></p>
<body>

Ob die Aussage über Wohlgeformtheit noch stimmt will ich hier gar nicht diskutieren. Theoretisch können mit HTML5 die Endtags auch komplett wegfallen. An soetwas wollen wir in diesem Script nicht einmal denken!!!

Listen

Für Listen stellt HTML folgende Elemente (Tags) zur Verfügung:

ol ul dl li dt dd

Aufzählungen, Nummerierungen und mehrere Ebenen werden in HTML als Listen-Elemente bezeichnet. Listen-Elemente zählen wir zu den Block-Elementen, in HTML unterscheiden wir drei Listentypen.

Unsortierte Listen mit ul und li-Element

Mit dem ul-Tag umschliessen wir eine unsortirete Liste (Aufzählungstext). Mit dem li-Tag definieren wir Listenpunkte.

<body>
<ul>
<li>Erster Aufzählungspunkt</li>
<li>Zweiter Aufzählungspunkt</li>
</ul>
<body>

Unsortierte Listen kennen außer Universalattribute keine weiteren Eigenschaften.

Sortierte Listen mit ol und li-Element

Mit dem ol-Tag umschliessen wir eine sortierte Liste (Nummerierung). Mit dem li-Tag definieren wir Listenpunkte.

<body>
<ol>
<li>Erste Nummerierung</li>
<li value="4">Zweite Nummerierung</li>
<li>Dritte Nummerierung</li>
</ol>
<body>

Das ol-Element kennen außer Universalattribute keine weiteren Eigenschaften.
Das li-Element kann ein value-Attribut haben. Darin definieren sie den Nummerierungswert der Liste. 

  <li value="4">Zweite Nummerierung</li>

Beschreibungslisten (Definitionslisten) mit dl dt und dd-Element

Mit dem dl-Tag umschliessen wir eine Beschreibungsliste. Mit dem dt-Tag definieren wir die Beschreibung. Mit dem dd-Tag definieren wir Listenpunkte.

<body>
<dl>
<dt>Erste Definition</dt>
<dd>Erster Aufzählungspunkt</dd>
<dd>Zweiter Aufzählungspunkt</dd>
<dt>Zweite Definition</dt>
<dd>Erster Aufzählungspunkt</dd>
<dd>Zweiter Aufzählungspunkt</dd>
</dl>
<body>

Beschreibungslisten kennen außer Universalattribute keine weiteren Eigenschaften.

Verweise (Hyperlinks)

a

Die Funktion von Verweise beschränkt sich im Wesentlichen auf die Navigation zwischen Dokumenten und Dateien. Verweise sind ein mächtiges Instrument. Nach dem Anklicken eines Verweises wird der Nutzer auf eine andere Stelle im gleichen Dokument, auf eine andere HTML-Datei innerhalb des Projekts oder zu anderen Projekten im WWW verwiesen. Ein Verweis kann eine URL,URI, Email Bild oder Querverweis sein. Auch zum Download von Nicht-HTML Seiten kann ein Verweis verwendet werden. In jedem Fall brauchen sie:

a-Element

Mit dem a-Element schreiben sie einen Verweis in ihrem Dokument. Ein Verweis (Link oder Hyperlink) ist ein anklickbarer Bereich mit dem sie dem Benutzer u.a. Navigationsmöglichkeiten anbieten. Der anklickbare bzw. sichtbare Bereich kann Text oder z.B. ein Bild sein. In jedem Fall wird dieser Bereich zwischen öffnendem und schließendem a-Tag geschrieben. 

<body>
<p>
<a href="http://www.adiprinz.at>Homepage von Adi Prinz</a><br />
<a href="mailto:mail@adiprinz.at>Email an Adi Prinz</a><br />
<a href="dokument.docx">Dokument download</a>
</p>
<body>

Folgende Attribute stehen zur Verfügung

  • Universalattribute
  • download: Link zum Download
  • href: Link Ziel-URL
  • hreflang: Sprache des verlinkten Dokuments (en de)
  • media: Ausgabemedium(print screen aural u.a.)
  • rel: Beziehung zwischen aktuellem un verlinkten Dokument (author bookmark u.a.)
  • target: Zielfenster (_blank _parent _self _top framename)
  • type: Media Type (text/html)

Ziel-URL kann sie auf zwei unterschiedliche Arten definieren.

  • Absolut
  • Relativ

Absolute Ziel-URL

Geben sie einfach die Ziel-URL an:

<a href="http://www.adiprinz.at/Ordnername/datei.html">Ziel</a>

Relative Ziel-URL

Geben sie einfach Ordner- und Dateiname (Pfad) der Ziel-URL an. Der Pfad wird relativ zum ausgehenden Dokument geschrieben.

<!-- Verweisziel liegt im selben Ordner -->
<a href="datei1.html">Ziel1</a>
<!-- Verweisziel liegt im Ordner  Ordnername-->
<a href="Ordnername/datei2.html">Ziel2</a>
<!-- Verweisziel liegt einen Ordner nach oben-->
<a href="../datei3.html">Ziel3</a>

Querverweise (Anker)

Querverweise sind Verweise auf eine Position innerhalb eines Dokuments. Dazu brauchen wir ein Attribut mit dem Namen id. Das id-Attribut gehört zu den Universalattributen und darf in jedem Element innerhalb von Body vorkommen. Wie es bei ID's üblich ist, darf ein Attributwert nur einmal notiert sein. 

<p id="Ankerpunkt">

Querverweis zu einer ID derselben Seite. Achten sie auf das Raute-Zeichen. Der Link verweist auf ein Element mit der ID Ankerpunkt. 

<a href="#Ankerpunkt">Gehe zu Ankerpunkt</a>

Querverweis zu einer ID auf der Seite datei.html.

<a href="datei.html#Ankerpunkt">Siehe Irgendwas</a>

Beispiel

Wenn sie dieses Beispiel testen wollen, müssen sie vielleicht das Browserfenster verkleinern.

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>EDV mit Adi Prinz</title>
</head>
<body id="oben">
<h1>Das ist eine Überschrift1</h1>
<p><a href="#zitat">zum Zitat</a></p>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
sed diam nonumy eirmod tempor invidunt ut labore et 
dolore magna aliquyam erat, sed diam voluptua.
</p>
<h2>Das ist eine Überschrift2</h2>
<pre>
Max und Moritz machten beide,
Als sie lebten, keine Freude:
Bildlich siehst du jetzt die Possen,
Die in Wirklichkeit verdrossen.
</pre>
<hr /><hr /><hr /><hr /><hr /><hr />
<hr /><hr /><hr /><hr /><hr /><hr />
<blockquote id="zitat">
<p>
Zwei Dinge sind unendlich: das Universum und die menschliche 
Dummheit; aber beim Universum bin ich mir immer noch
nicht ganz sicher.
</p>
</blockquote>
<p><a href="#oben">nach Oben</a></p>
<body>
</html>

Block- und Inlinelemente

In HTML wird in erster Linie zwischen Block- und Inline-Elementen unterschieden. Aus Textverarbeitungsprogrammen (z.B. MS Word) sind Ihnen möglicherweise Begriffe wie Absatz- und Zeichenformate geläufig. Diese Begriffe können zumindest als Verständnishilfe dienen: Block-Elemente entsprechen Absatzformaten und Inline-Elemente entsprechen Zeichenformaten. Ein Absatz in HTML wird mit dem p-Tag geschrieben (<p>...</p>). Ein Absatz erzeugt immer eine neue Zeile im Dokument und zählt somit zu den Blockelementen. Elemente zur Textauszeichnung sind durchwegs Inlinelemente und entsprechen den Zeichenformatierungen von Textverarbeitungsprogrammen.