HTML/Tutorials/HTML5/Textstrukturierung

Aus SELFHTML-Wiki
< HTML‎ | Tutorials‎ | HTML5
Wechseln zu: Navigation, Suche

Text-Info

Lesedauer
20min
Schwierigkeitsgrad
einfach
Vorausgesetztes Wissen
Grundkenntnisse in
Einstieg in HTML


In diesem Kapitel lernen Sie, wie Sie Fließtext gruppieren und gliedern können. Nichts ist schlimmer als eine mit Text überfrachtete und dadurch schwer lesbare Bleiwüste.[1]

Schreib- und Gestaltungsregeln[Bearbeiten]

Information: Schreib- und Gestaltungsregeln nach DIN 5008

Die Norm DIN 5008 legt Schreib- und Gestaltungsregeln für die Textverarbeitung fest. Sie gehört zu den grundlegenden Normen für Arbeiten im Büro- und Verwaltungsbereich.

Die Festlegungen und Empfehlungen für die Textverarbeitung und das Maschinenschreiben legen

  • den typografisch korrekten Gebrauch von Satzzeichen,
  • Schriftzeichen für Wörter,
  • Rechenzeichen, Formeln und Zahlengliederungen

sowie

  • den Aufbau von Tabellen und
  • die Gliederung von Texten
fest, um eine Anleitung zu geben, Schriftstücke zweckmäßig und übersichtlich zu gestalten.


Es ist empfehlenswert, Texten eine moderne Seitenstruktur mit den neuen HTML5-Elementen wie article, aside und footer zu geben. Verwenden Sie jedoch diese Elemente und auch eigenschaftslose div-Elemente nur sparsam.

Jeder Textblock sollte seine eigene Überschrift haben. Durch die Verwendung der verschiedenen Überschriftenebenen können Sie dem Text eine auch für Screenreader und Suchmaschinen interpretierbare Struktur geben.

Abweichend von Textdokumenten haben sich im Webdesign einige Grundsätze herausgebildet.

Während DIN A4-Seiten oft im Blocksatz gestaltet sind, entstehen dadurch gerade auf kleineren Viewports zu große Lücken zwischen längeren Wörtern.

Empfehlung: Verwenden Sie im Webdesign Flattersatz und verzichten Sie auf text-align: justify;.


Absätze[Bearbeiten]

Absätze dienen der Gliederung eines Textes. Sie werden in HTML mit dem p-Element (engl: paragraph) ausgezeichnet.

  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
  • HTML 2.0
  • XHTML 1.0
  • HTML5
Beispiel ansehen …
<h1>Textabsätze definieren</h1> <p>Hier beginnt ein Absatz, und hier ist er zu Ende.</p> <p>Hier beginnt ein neuer Absatz, und hier ist er zu Ende.</p>

Das End-Tag </p> ist in HTML optional, d. h., es muss nicht zwingend angegeben werden. Es ist aber auch in HTML guter Stil das schließende </p>-Tag anzugeben. Das verdeutlicht zugleich auch die Bedeutung dieses Tags: Es umfasst einen Textblock – es steht nicht für den Zwischenraum zwischen zwei Absätzen.

Abstände und Trennlinien[Bearbeiten]

Beachten Sie, dass es beim Erstellen von HTML-Dateien nicht genügt, im Editor einen harten Zeilenumbruch einzufügen. Browser ignorieren solche Umbrüche (siehe auch Leerzeichen, Tabulatoren und Zeilenumbrüche).

Abstände zwischen Absätzen werden in HTML oft fälschlicherweise durch einen leeren Absatz oder durch eine Aneinanderreihung mehrerer Zeilenumbrüche ( br) realisiert.

<p>Ein Absatz mit Inhalt</p>
<p>&nbsp;</p>
<p>Ein Absatz mit Abstand</p>

<p>Ein Absatz mit Inhalt</p>
<br>
<br>
<p>Ein Absatz mit Abstand</p>

Definieren Sie stattdessen den gewünschten Abstand mithilfe der CSS-Eigenschaft margin.

<p style="margin-bottom:2em;">Ein Absatz mit Inhalt</p>
<p>Ein Absatz mit Abstand, der durch CSS festgelegt wurde.</p>

Thematischer Bruch mit hr[Bearbeiten]

Das Element hr kennzeichnet einen thematischen Bruch. Ursprünglich wurden solche Trenner als waagerechte Linien dargestellt, daher die Bezeichnung des Elements horizontal ruler, horizontales Lineal. In HTML5 bekommt das hr-Element die Bedeutung eines Themenwechsels auf Absatz-Ebene (paragraph-level thematic break).

  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
  • HTML 2.0
  • XHTML 1.0
  • HTML5

Sichtbare Trennlinien dienen auch visuell der Abgrenzung von nicht unmittelbar zusammengehörigen Textabschnitten.


hr-Elemente in HTML ansehen …
<p>Hier ist ein Abschnitt zu Ende.</p> <hr> <p>Und hier beginnt etwas Neues ohne eigene Überschrift.</p>
Beachten Sie: Ein hr-Element hat keinen Inhalt. Dies gilt für jede HTML-Variante.


Das hr-Element können Sie auch mit CSS gestalten:

Beispiel ansehen …
hr { 
    width: 95%; 
    height: 5px; 
    margin: 0 auto;
    color: blue;
    background: #dfac20;
}
<p>Hier ist ein Abschnitt zu Ende.</p>

<hr>

<p>Hier beginnt etwas Neues ohne eigene Überschrift.</p>
Das hr-Element erhält im Beispiel eine Breite von 95% und eine Höhe von 5 Pixeln.
Dabei nimmt die blaue Linie nur 1px ein, der Rest der festgelegten Höhe wird mit background: #dfac20; gelb gefärbt.

Trennlinien mit CSS[Bearbeiten]

Sie können zur grafischen Gliederung zwischen einzelnen Teilen einer Adresse Trennlinien einfügen, indem Sie einem Element mit border: 0 0 1px 0; oder border-bottom einen unteren Rand geben.[2]

Ein Rand lässt sich auch mit mehreren box-shadows setzen.

Beispiel ansehen …
box-shadow: 2em 0px #eed inset, -2em 0px #eed inset, 0 -3px 0px 0 red inset;
Es ergibt sich ein roter unterer Rand, der links und rechts jeweils von 2em breiten Rahmen in der Hintergrundfarbe des Elements überlagert wird.

Fehlerquellen[Bearbeiten]

Blockelemente in Absätzen[Bearbeiten]

Absatz-Elemente dürfen keine anderen blockerzeugenden Elemente wie z. B. Überschriften, Textabsätze oder Listen enthalten. Das bedeutet für HTML: Beim ersten Auftreten eines Tags, welches nicht mehr im aktuellen Textabsatz erlaubt ist (beispielsweise <ul> oder <table>), wird der Textabsatz vom Browser implizit (mit einem intern hinzugefügten </p>) geschlossen – ein eventuell später folgendes schließendes </p> steht dann ohne Start-Tag allein und ist ein Fehler. In XHTML muss das schließende </p> zwingend vor den anderen blockerzeugenden Elementen notiert werden.

Blockelemente in p-Elementen ansehen …
p {
  color: green;
}
div {
  color: red;
}
<p> 
  Dies ist ein Text 
  <div> mit einem div</div>
  und noch etwas Text.
</p>
Der Textabsatz wird unerklärlicherwiese in 3 Blöcken dargestellt. Die Farbzuweisung für p wird nur im ersten Teil ausgeführt, aber nicht im letzten.

Inhalte gruppieren[Bearbeiten]

Nicht immer reicht es aus Text in Absatzblöcken zu gliedern. So besteht dieser Textblock aus einer Liste und zwei Absätzen:

Textblock aus mehreren p-Elementen und einer ul
<p>For instance, this fantastic sentence has bullets relating to</p>
<ul>
 <li>wizards,
 <li>faster-than-light travel, and
 <li>telepathy,
</ul>
<p>and is further discussed below.</p>

Mit einem div-Element kann dieser Block umschlossen und dann einheitlich formatiert und positioniert werden.

div[Bearbeiten]

Das div-Element (engl. division, etwa Abteilung oder Bereich) ist dazu gedacht, mehrere Elemente wie Text, Grafiken, Tabellen usw., in einen gemeinsamen Bereich einzuschließen. Dieses allgemeine Element bewirkt nichts weiter als dass es in einer neuen Zeile des Fließtextes beginnt. Ansonsten hat es keine Eigenschaften..

  • HTML 2.0
  • XHTML 1.0
  • HTML5
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari
Beispiel ansehen …
<h1>Allgemeines Blockelement</h1> <div> <p>For instance, this fantastic sentence has bullets relating to</p> <h2>Listenüberschrift</h2> <ul> <li>Listenpunkt 1</li> <li>Listenpunkt 2</li> <li>Listenpunkt 3</li> </ul> </div>

Div-Suppe mit wrapper und container[Bearbeiten]

Häufig werden div-Elemente als wrapper (englisch für Verpackung) oder Container-Element verwendet. Dabei wird die semantische Struktur um weitere, semantisch leere Elemente ergänzt, deren einziger Zweck beispielsweise die Zentrierung oder die Formatierung mit einer Randlinie ist.

<body>
    <div class="wrapper">
        <div class="container">
            <div class="content">
            </div>
        </div>
    </div>
</body>
Empfehlung:
  • Verwenden Sie das div-Element nur dann, wenn es keinen sinnvollen Ersatz für die Aufgabe gibt.
  • inline-Elemente, die die passende semantische Bedeutung hätten, lassen sich ggf. per CSS wie Block-Elemente darstellen.
  • Verzichten Sie weitgehend auf Verschachtelungen von div-Elementen und den Einsatz von Wrapper- und Container-Elementen (so genannte Div-Suppe)!
    So wird Ihr HTML-Markup einfacher und übersichtlicher!
Hauptartikel: Guter HTML-Stil

figure[Bearbeiten]

Das HTML5-Element figure dient als semantisches Elternelement für zum Seiteninhalt gehörende Grafiken wie Bilder und Diagramme, aber auch für auch andere mediale Inhalte wie Videos, Programmcode oder Textstellen wie Zitate oder tabellarische Übersichten.

Beispiel
<h1>Unser Logo</h1> <figure role="group"> <img src="Selfhtml-Logo-Neu.png" alt="SelfHTML-Logo"> <figcaption> Das neue SelfHTML-Logo von 2012 (<a href="#">weitere Informationen</a>) </figcaption> </figure>


Das <figure>-Element kann auch geschachtelt werden, um mehrere Abbildungen zu präsentieren. Auch in diesem Fall sollten alle figure-Elemente die ARIA-Rolle group bekommen und die Beschreibung der Gruppe als erstes Element verwendet werden.[3]


Beispiel
<h1>unser Logo</h1> <figure role="group"> <figcaption> Die Entwicklung des SelfHTML-Logos </figcaption> <figure role="group"> <img src="Selfhtml-logo.gif" alt="SelfHTML-Logo"> <figcaption> Das erste SelfHTML-Logo von 1999 (<a href="#">weitere Informationen</a>) </figcaption> </figure> <figure role="group"> <img src="Selfhtml-Logo-Neu.png" alt="SelfHTML-Logo"> <figcaption> Das neue SelfHTML-Logo von 2012 (<a href="#">weitere Informationen</a>) </figcaption> </figure> </figure>


und das optionale Element figcaption, das den Untertitel umschließt. Falls das figure-Element ein figcaption-Element enthält, sollte es zur Unterstützung assistiver Technologien die ARIA-Rolle group bekommen.

figcaption[Bearbeiten]

Das optionale figcaption dient der Beschriftung des Inhaltes oder stellt eine Legende dar. Es kann sowohl vor als auch nach der Abbildung positioniert werden, es darf allerdings in einem figure-Element nur ein figcaption-Element geben.

Falls es sich um Bilder (img-Elemente) handelt, dürfen Sie dennoch nicht auf das alt-Attribut verzichten, denn das alt-Attribut ist als Ersatz gedacht, wenn die Grafik nicht geladen oder gesehen werden kann oder soll. Die Bildunterschrift figcaption kann auch ergänzende Informationen, etwa Links auf weiterführende Seiten enthalten.



Quellen[Bearbeiten]

  1. Wikipedia: Bleiwüste
  2. Selfhtml-Forum: Ist es möglich einem "border" eine Länge mitzugeben? vom 20.11.2015
  3. html5accessibility.com: figures-nested

Siehe auch[Bearbeiten]

CSS/Tutorials


Quellen[Bearbeiten]


Weblinks[Bearbeiten]