Formatierung und Strukturierung

Kategorisierung der Elemente

HTML5 kategorisiert die HTML-Elemente

  • Metadata: Metadaten des Dokuments (z. B. <base>, <title>)
  • Flow: Inhalt des Dokuments (z. B. <p>, <img>)
  • Sectioning: Einteilung des Dokuments in Abschnitte (neu) (z. B. <section>, <nav>)
  • Heading: Überschriften (z. B. <h1>, <h2>, <hgroup>)
  • Phrasing: Auszeichnung auf der Textebene (z. B. <span>)
  • Embedded: Einbinden von Inhalten (z. B. <iframe>, <video>)
  • Interactive: Elemente für die Nutzerinteraktion (z. B. <a>, <input>)

Tags zur Strukturierung

  • <section>: unterteilt das Dokument in Sinnabschnitte
    • kann beliebig ineinander verschachtelt werden
    • in jedem Abschnitt können Überschriften-Tags neu verwendet werden
  • <header>: markiert einführende Inhalte
  • <footer>: markiert den Fußbereich von Abschnitten
  • <nav>: Darstellung von Navigationselementen
  • <aside>: Ergänzungen zu dem umgebenden Element (z. B. Seitenleiste, Kästen etc.)
  • <article>: Abgeschlossene Inhaltsabschnitte (z. B. Blogposts)
  • <details>: Zusatzinformationen
  • <summary>: Zusammenfassung zum <details>-Element
  • <figure>: Abbildung
  • <figcaption>: Bildbeschreibung
  • <main>: Hauptinhalt der Seite
  • <h1>: Überschrift der höchsten Gliederungsebene
  • <h6>: Überschrift der niedrigsten Gliederungsebene
  • <p>: Textabsatz
  • <div>: allgemeiner Block (für CSS)
  • <span>: Inline-Element für CSS (definiert keinen Block)

Beispiel: <section> 

<h1>Hauptüberschrift</h1>

<section>
  <h1>Kapitel 1</h1>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
  <p>Nulla consequat massa quis enim. Donec pede justo.</p>
</section>

<section>
  <h1>Kapitel 2</h1>
  <p>Nullam dictum felis pede mollis pretium. Integer tincidunt.</p>
  <p>Cras dapibus. Vivamus elementum semper nisi.</p>
</section>

<section>
  <h1>Hauptüberschrift</h1>

  <section>
    <h1>Kapitel 1</h1>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
    <p>Nulla consequat massa quis enim. Donec pede justo.</p>
  </section>

  <section>
    <h1>Kapitel 2</h1>
    <p>Nullam dictum felis eu pede mollis pretium.</p>
    <p>Cras dapibus. Vivamus elementum semper nisi.</p>
  </section>
</section>

<header>
  <h1>Willkommen</h1>
  <p>Willkommen in der Vorlesung Webbasierte Systeme WEB</p>
</header>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  Nulla consequat massa quis enim. Donec pede justo.</p>

<p>Nullam dictum felis eu pede mollis pretium.</p>

<footer>
  (c) 2022 Thomas Smits
</footer>

Beispiel: Strukturierung (HTML 4.0) 

<h1>Überschrift 1</h1> <!-- 1. -->
<h2>Überschrift 2</h2> <!-- 1.1 -->
<h3>Überschrift 3</h3> <!-- 1.1.1 -->
<h2>Überschrift 4</h2> <!-- 1.2 -->
<h3>Überschrift 5</h3> <!-- 1.2.1 -->

1. Überschrift 1
 1. Überschrift 2
    1. Überschrift 3
 2. Überschrift 4
    1. Überschrift 5

Beispiel: Strukturierung (HTML5) 

<h1>Überschrift 1</h1> <!-- 1. -->
<section>
  <h1>Überschrift 2</h1> <!-- 1.1 -->
  <section>
    <h1>Überschrift 3</h1> <!-- 1.1.1 -->
  </section>
</section>
<section>
  <h1>Überschrift 4</h1> <!-- 1.2 -->
  <h2>Überschrift 5</h2> <!-- 1.2.1 -->
</section>

1. Überschrift 1
 1. Überschrift 2
    1. Überschrift 3
 2. Überschrift 4
    1. Überschrift 5

Zeilenumbrüche

Zeilenumbruch erzwingen und verhindern

  • <br> expliziter Zeilenumbruch
  •   geschütztes Leerzeichen (verhindert Zeilenumbruch)
  • ­ Bindestrich bei Bedarf (soft hyphen)
Text&nbsp;mit<br>Umb&shy;ruch

Logische (semantische) Formatierung

  • markiert Bedeutung von Abschnitten
  • macht keine Aussage über das Erscheinungsbild
    • visuelle Darstellung wird über CSS definiert
    • akustische Wiedergabe bei Sprachausgabe
  • Beispiele
    • <em>: betont (emphasis)
    • <strong>: stark betont
    • <dfn>: Definition
  • Weitere Beispiele
    • <cite>: Zitat innerhalb einer Zeile
    • <blockquote>: Zitat als Block gesetzt
    • <mark>: Markierter Text
    • <time>: Zeit oder Datum maschinenlesbar
    • <del>: Gelöscht
    • <progress>: Fortschrittsbalken
Dies ist <em>betont</em> oder <strong>besonders betont</strong>.
<dfn>Definition</dfn>. <cite>Sein oder Nichtsein</cite>
oder <del>gelöscht</del>
<blockquote>
  Wichtig, wichtig
</blockquote>

<p>Am <time datetime="1789-07-14">14. Juli 1789</time> wurde die
Bastille gestürmt.</p>

<p><mark>WEB</mark> - Webanwendungen (<mark>WEB</mark>) behandelt die
Entwicklung moderner Webanwendungen. Die Vorlesung <mark>WEB</mark> ist für ...</p>

<p>Sir Karl Raimund Popper ...
<figure>
  <img src="img/html5-portrait.jpg" alt="Karl Popper" width="100px">
  <figcaption>Sir Karl Popper, der große Philosoph</figcaption>
</figure>
</p>
<p>Fortschritt: <progress max="100" value="33">33% fertig</progress></p>

Physischen Formatierung

  • Definieren das physische Erscheinungsbild
  • Sollten vermieden werden
  • Beispiele
    • <b>: fette Schrift (bold)
    • <i>: kursive Schrift (italic)
    • <big>: Schrift größer als normal
    • <small>: Schrift kleiner als normal
    • <sup>: Schrift hochgestellt
    • <sub>: Schrift tiefgestellt
    • <pre>: vorformatierter Text
<b>fette Schrift (bold)</b><br>
<i>kursive Schrift (italic)</i><br>
<tt>nichtproportionale Schrift (teletype)</tt><br>
Schrift <big>größer</big> oder <small>kleiner</small> als normal<br>
Schrift<sup>hochgestellt</sup><br>
Schrift <sub>tiefgestellt</sub>
<pre>vorformatierter Text</pre>

Visuelle Gestaltung

Tags zur visuellen Gestaltung sollten nicht mehr benutzt werden, sondern stattdessen CSS

  • Farbangaben: background, bgcolor, text, link, alink, vlink
  • Schrift: <font>, <basefont>, compact, strike, s, u
  • Ausrichtung: align, nowrap, <center>
  • Größe: size, width, height
  • Rand: hspace, vspace, border
HTML5 strict verbietet diese Tags und Attribute

Aufzählungen

  • <ol>: Nummerierte Aufzählung
  • <ul>: Aufzählung ohne Numerierung
  • <li>: Element einer Aufzählung (<ol> oder <ul>)
<ol>
  <li>Erstens</li><li>Zweitens</li>
</ol>
<br>
<ul>
  <li>Erstens</li><li>Zweitens</li>
</ul>

Tabellen

Definition von Tabellen in HTML

  • <table>: definiert Tabelle
  • <tr>: eine Zeile der Tabelle (table row)
  • <th>: eine Zelle mit Tabellenüberschrift (table header)
  • <td>: eine Zelle mit Tabellen-Daten (table data)
  • colspan=...: Spalten verbinden
  • rowspan=...: Zeilen verbinden
  • width=...: Breite einer Spalte oder der Tabelle angeben

Sollten nicht für Layoutzwecke missbraucht werden

Beispiel für einfache Tabellen 

<table>
  <tr>
    <th>Kopfzelle: 1Z1S</th>
    <th>Kopfzelle: 1Z2S</th>
  </tr>
  <tr>
    <td>Datenzelle: 2Z1S</td>
    <td>Datenzelle: 2Z2S</td>
  </tr>
  <tr>
    <td>Datenzelle: 3Z1S</td>
    <td>Datenzelle: 3Z1S</td>
  </tr>
</table>

Beispiel für komplexe Tabellen 

<table width="20%">
  <tr>
    <th width="60%">K1</th>
    <th width="20%">K2</th>
    <th width="20%">K3</th>
  </tr>
  <tr>
    <td colspan="2" >A</td>
    <td>B</td>
  </tr>
</table>

<table width="20%">
  <tr>
     <td>C</td>
     <td>D</td>
     <td rowspan="2">E</td>
  </tr>
  <tr>
    <td>F</td>
    <td>G</td>
  </tr>
</table>

Meta-Tags

Meta-Tags liefern Daten, die nicht angezeigt werden

  • Anweisungen für Server
  • Anweisungen für Browser
  • Anweisungen für Suchmaschinen

Beispiele 

<meta name="description" content="Web-Anwendungen"/>
<meta name="author" content="T. Smits"/>
<meta name="keywords" content="HTML, JavaScript, PHP"/>
<meta name="robots" content="noindex" />
<meta name="date" content="2022-09-26" />
<meta name="language" content="de" />

Einsatzmöglichkeiten für Hyperlinks

  • Querverweis (siehe …)
  • Blättern (nächste Seite / vorige Seite)
  • Inhaltsverzeichnis
  • Stichwortverzeichnis
  • freie Navigation durch die Dokumentstruktur
  • Download einer Datei
  • …
  • Hyperlinks werden über das <a>-Tag realisiert
    • Format: <a href="URL">Text</a>
    • URL: protokoll://server:port/verzeichnis/datei#anker
  • Absolute Verweise
    • <a href="http://www.web.de/php/doc.htm">Dokumentation</a>
    • enthalten vollständige URL (inklusive Server)
    • können auch auf externe Server zeigen
  • Relative Verweise
    • sind relativ zur aktuellen URL
      <a href="php/documentation.html">Dokumentation</a>
    • sind relativ zum aktuellen Server
      <a href="/php/documentation.html">Dokumentation</a>
<a href="index.html">Startseite</a>
<a href="php/documentation.html">In einem Unterverzeichnis</a>
<a href="../index.html">Übergeordnetes Verzeichnis</a>
<a href="http://www.php.net/downloads.php">Download PHP</a>
<a href="mailto:t.smits@hs-mannheim.de">Mail an Thomas Smits</a>
<a href="ftp://ftp.uni-stuttgart.de/setup.zip">Download per FTP</a>
<a href="file:///Users/thomas/Work/web/tabelle.html">lokale Datei</a>

Beispiel für Verweise in derselben Datei 

<a href="#bach">Bach</a><br/>
<a href="#interpunkt">Interpunkt</a><br/>
<a href="#interpunkt">Oxmox</a><br/>
<a href="#huegel">Hügel</a>

<p id="bergen">Weit hinten, hinter den Wortbergen, fern der Länder Vokalien
und Konsonantien leben die Blindtexte.</p>

<p id="bach">Ein kleines Bächlein namens Duden fließt durch ihren Ort und versorgt sie mit den nötigen Regelialien.</p>

<p id="interpunkt">Nicht einmal von der allmächtigen Interpunktion werden die Blindtexte beherrscht: ein geradezu unorthographisches Leben.</p>

<p id="huegel">Als es die ersten Hügel des Kursivgebirges erklommen hatte, warf es einen letzten Blick zurück auf die Skyline seiner Heimatstadt Buchstabhausen, die Headline von Alphabetdorf.</p>

Copyright © 2025 Thomas Smits