HTML/Tutorials/Schreib- und Gestaltungsregeln für Webseiten

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

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.

In diesem Artikel sollen Besonderheiten beim Erstellen von Webseiten behandelt werden.

Inhaltsseiten[Bearbeiten]

Gliederung von Texten[Bearbeiten]

Es ist empfehlenswert, Texten eine moderne Seitenstruktur mit den neuen HTML5-Elementen wie article, aside und footer zu geben. Verwenden Sie 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.

Textabsätze werden in HTML durch das p-Element ausgezeichnet.

Leerzeilen zwischen Absätzen und nach Überschriften werden in HTML oft durch einen leeren Absatz ( <p>&nbsp;</p>) realisiert.
Diesen Effekt erzielen Sie mit margin-bottom: 1em; eleganter und einfacher.

Hervorhebungen[Bearbeiten]

Innerhalb einer Textpassage lassen sich besonders wichtige Informationen hervorheben - zum Beispiel durch Zentrieren, Einrücken, unterschiedliche Schriftgrößen und -farben oder Schriftschnitte in kursiv und bold.

Da Webseiten nicht nur am Bildschirm gelesen, sondern auch von Screenreadern und Suchmaschinen ausgewertet werden, empfiehlt es sich Hervorhebungen semantisch passend auszuzeichnen:

Kontaktseite[Bearbeiten]

Besonderer Wert sollte auf gut lesbare und zugängliche Kontaktdaten gelegt werden. Im Forum wurde dazu von MrMurphy1 ein Beispiel veröffentlicht, dass als Grundlage für dieses Kapitel dient.[1]

Zu einer benutzerfreundlichen Übersicht gehört, keine Abkürzungen zu verwenden. Außerdem sollten entweder jeder oder gar kein Block mit Überschriften versehen werden.

Adressen sollten immer vollständig angegeben werden, auch wenn sich einzelne Zeilen doppeln. So können sie jeweils in einem Rutsch markiert und zum Beispiel in eine Textverarbeitung übernommen werden. Es ist nicht benutzerfreundlich, wenn Daten zwar über die Zwischenablage übernommen werden können, dazu jedoch mehrmals hin- und hergeklickt werden muss.

klickbare Telefonnummer[Bearbeiten]

Telefonnummern müssen kein Text sein. Wenn Sie sie als Link auszeichnen, können Benutzer auf mobilen Geräten mit einem Klick den Wählvorgang einleiten.

Beispiel: Telefonnummer
  <address>
    <dl>
      <dt>Tel.</dt>
      <dd><a href="tel:+49-89-00000000">089 0000 0000</a></dd>
Beachten Sie: Fügen Sie immer das Pluszeichen und die internationale Vorwahl hinzu, vergessen Sie nicht, die führende Null der Ortsvorwahl zu entfernen.

Nach DIN 5008 sollen die Telefonnummern zwar außer nach der Vorwahl keine Leerstellen enthalten. Bei der Telefonnummer im Linktext können aber zur besseren Lesbarkeit trotzdem zusätzliche Leerzeichen eingefügt werden.

Fax-Nummern werden im allgemeinen nur abgelesen oder kopiert, deshalb sollten sie nur als Text ausgezeichnet werden.

Email-Adresse[Bearbeiten]

Früher war es üblich Links auf eine Email-Adresse mit mailto einzuleiten. Bei einem Klick auf den Link wird dann das Standard-Mailprgramm des Nutzers geöffnet.

Beispiel: Kontaktadressen
<p>
  Kontaktieren Sie uns per <a href="mailto:kontakt@example.com">Mail an kontakt@example.com</a> 
  oder mit nachfolgendem Formular:
</p>
<form >

Eine Alternative wäre ein Kontaktformular.

Trennlinien[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.

Wenn Sie die Länge des Rands unabhängig von der Breite des Elements setzen wollen, sodass noch ein Abstand zu den Seiten bleibt, könnten Sie auch mit hr einen thematischen Bruch einfügen und beliebig mit CSS formatieren.[2]

Sie sollten allerdings nur dann einen thematischen Bruch einfügen, wenn es sich wirklich um einen solchen handelt. 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.

Das fertige Ergebnis[Bearbeiten]

Beispiel: Kontaktadressen
  <h2>Kontakt</h2>
  <address>
    <dl>
      <dt>Tel.</dt>
      <dd><a href="tel:+49-89-00000000">089 0000 0000</a></dd>

      <dt>Fax</dt>
      <dd>089 0000 0001</dd>

      <dt>Öffnungszeiten</dt>
      <dd><span>Mo–Fr:</span> <span>7:00–21:00 Uhr</span></dd>			
      <dd><span>Sa:</span> <span>9:00–15:00 Uhr</span></dd>

      <dt>E-Mail Adresse</dt>
      <dd><a href="mailto:kontakt@example.com">kontakt@example.com</a></dd>

      <dt>Geschäftsadresse</dt>
      <dd>Fiktives Unternehmen<br/>
        Musterstraße 93<br/>
        80331 München
      </dd>

      <dt>Rücksendungen an</dt>
      <dd>Fiktives Unternehmen<br/>
        Musterstraße 93<br/>
        80331 München
      </dd>
    </dl>
  </address>

Bei den Öffnungszeiten gehört vor und hinter die Bindestriche kein Leerzeichen.

Beispiel im Grid Layout[Bearbeiten]

Mit dem neuen Grid Layout ist auch die Positionierung der dl kein Problem mehr:

Beispiel: Kontaktadressen ansehen …
dl.grid { 
  display: grid; 
  grid-template-columns: 1fr 100%; 
}
dd { 
  margin: 0; 
  padding-left: 1em; 
}
dl.grid dd {
  margin-bottom: 1em;
}

a[href^="tel"] { white-space: nowrap; }
Die Beschreibungsliste mit den Kontaktdaten wird mit display: grid zum Raster, das mit grid-template-columns zwei Spalten pro Reihe erhält. Auf eine feste Breitenangabe wird verzichtet, die zweite Spalte soll 100% des Inhalts betragen.
Über den Attributselektor a[href^="tel"] werden alle Links, die auf eine Telefonnummer verweisen, mit white-space: nowrap an einem Umbruch gehindert. So werden die Nummern immer in einer Zeile dargestellt.

Quellen[Bearbeiten]

  1. Self-Forum: Seiten-Element gestaltet von MrMurphy1 vom 20.11.2015
  2. Selfhtml-Forum: ist es möglich einem "border" eine Länge mitzugeben? vom 20.11.2015

Weblinks[Bearbeiten]