<?xml version="1.0" encoding="utf-8"?>

Styleguide

Dieses Dokument ist der Styleguide für diese Website.

Überschriften

Die Hauptüberschrift dieses Styleguides1 in eine h1. Jede Überschrift kann auch Links enthalten.

Die 2. Überschrift oben ist eine h2, die benutzt werden kann um Hauptsektionen auf Seitenebene zu markieren. Davon kann mehr als eine Überschrift pro Seite verwendet werden.

Überschrift der dritten Ordnung

Die Überschrift oben ist eine h3, die benutzt werden kann für jede Überschrift die in der Hierarchie unter der h2 ist.

Überschrift der vierten Ordnung

Die Überschrift oben ist eine h4, die benutzt werden kann für jede Überschrift die in der Hierarchie unter der h3 ist.

Überschrift der fünften Ordnung

Die Überschrift oben ist eine h5, die benutzt werden kann für jede Überschrift die in der Hierarchie unter der h4 ist.

Überschrift der sechsten Ordnung

Die Überschrift oben ist eine h6, die benutzt werden kann für jede Überschrift die in der Hierarchie unter der h5 ist.

Absätze

Alle Absätze werden in p gewrappt. Zusätzlich können p auch in blockquote gewrappt werden.

Absätze sind in der Textgestaltung einen aus einem oder mehreren Sätzen bestehenden Abschnitt eines fortlaufenden Textes. Ein Absatz ist ein Sinnzusammenhang oder ein eigenes kleines Thema. Ist dieser Gedanke ausgeführt, folgt ein neuer Absatz.

Optimale Zeilenlänge

Die Zeilen des Textes sollten immer eine optimale Länge haben. Sie dürfen nicht zu kurz sein, weil das für die Augen anstrengend ist so oft die Zeile zu wechseln. Aber sie dürfen auch nicht zu lang sein, da man sonst Probleme hat mit dem Auge in die nächste Zeile zu springen. Im Web werden ca. 45 bis 75 Zeichen als Ideal betrachtet, wobei es auch auf Schriftart, Schriftfarbe, Zeilenabstand und viele andere Aspekte ankommt. Aber die gut zu merkende Zahl 66 als optimale Zeilenlänge ist nicht ganz falsch. Dieser Absatz ist zwischen den Zeilen 45 und 75 markiert und der Umbruch sollte immer innerhalb der farbigen Markierung liegen. Der "perfekte" Zeilenabstand ist rot markiert.

Sektionen-Trenner

Das hr kennzeichnet einen thematischen Bruch auf Absatzebene, z. B. einen Szenenwechel in einer Geschichte oder einen Übergang zu einem anderen Thema. Der folgende Auszug aus Pandora’s Star von Peter F. Hamilton zeight zwei Absätze, die einen Szenenwechel zeigen:

Dudley was ninety-two, in his second life, and fast approaching time for another rejuvenation. Despite his body having the physical age of a standard fifty-year-old, the prospect of a long degrading campaign within academia was one he regarded with dread. For a supposedly advanced civilization, the Intersolar Commonwearth could be appallingly backward at times, not to mention cruel.

Maybe it won’t be that bad, he told himself. The lie was comforting enough to get him through the rest of the night’s shift.


The Carlton AllLander drove Dudley home just after dawn. Like the astronomer, the vehicle was old and worn, but perfectly capable of doing its job. It had a cheap diesel engine, common enough on a semi-frontier world like Gralmond, although its drive array was a thoroughly modern photoneural processor. With its high suspension and deep-tread tyres it could plough along the dirt track to the observatory in all weather and seasons, including the metre-deep snow of Gralmond’s winters.

Zitate

Blockzitat

Die blockquote repräsentiert einen Abschnitt, der aus einer anderen Quelle zitiert.

Zusätzlich dazu kann auch das Element cite verwendet werden, um ein Werk zu marieren aus dem zitiert wurde.

Dies ist ein Zitat.

Drei Ringe den Elben, hoch im Licht. Sieben den Zwergen in ihren Hallen aus Stein. Den Sterblichen, ewig dem Tode verfalln: Neun. Ein Ring sie zu knechten, sie alle zu finden, ins Dunkel zu treiben und ewig zu binden. Im Lande Mordor, wo die Schatten drohn.

J.R.R. Tolkien, Der Herr der Ringe

Flying is learning how to throw yourself at the ground and miss.

Douglas Adams, The Hichhikers Guide to the Galaxy

Every interaction is both precious and an opportunity to delight.

Many forms of Government have been tried, and will be tried in this world of sin and woe. No one pretends that democracy is perfect or all-wise. Indeed, it has been said that democracy is the worst form of government except all those other forms that have been tried from time to time.

Pullquote

Pullquote (zentriert)

Manchmal möchte man einen kurzen Zitatblock verwenden, der nicht im Text vorkommt, oder besonders prägnant ist und daher zentriert stehen soll. Wenn ein Attribute lang mitgegeben wird, werden automatisch die korrekten Zitatzeichen verwendet (für Deutsch, Englisch und Japanisch).

No time for pessimism.

Inline-Zitate

Peter sagte Sie soll mir das sofort hergeben und war ziemlich sauer.

Deutsche Zitate (verschachtelt)

Luke führte weiter aus, Und sie nannte ihn einen total blöd-aussehenen Idioten! Ich denke ich habe eine Chance! Dieser arme Idiot …

Englische Zitate (verschachtelt)

Luke conntinued, And the she called him a scruffy-looking nerf-herder! I think I’ve got a chance! The poor naive fool …

Japanische Zitate (verschachtelt)

彼女は日本語に猫はにゃんと鳴くと言った。

Randbemerkungen

Manchmal möchte man mitten im Text etwas erklären, was nicht direkt zum Text gehört, aber das zum Verständnis des Textes beitragen kann. Diese Randbemerkungen wurden im Print üblicherweise in den Rand der Publikation gedruckt und hatten eine kleinere Schrift. Manchmal kann man diese aber auch im Text selbst stehen sehen, und sie werden durch eine andere Farbe oder einen Rand als Nebenbemerkung gekennzeichnet. Auf dieser Website stehen die Randbemerkungen (aside) im Rand und zwar im rechten Rand. Als Überschrift (wenn nötig) sollte minimal eine h4 verwendet werden.

Listen

Geordnete Listen

Das Element ol kennzeichnet eine geordnete Lste, und durch CSS sind verschiedenste Nummerierungen möglich (z. B. 1, 2, 3, … a, b, c, … und so weiter).

  1. Dies ist eine geordnete Liste
  2. Dies ist der zweite Listeneintrag, der eine Unterliste enthält
    1. Dies ist die Unterliste, ebenfalls geordnet
    2. Sie hat zwei Einträge
  3. Dies ist der dritte Listeneintrag
  4. Dies ist der vierte Listeneintrag
  5. Dies ist der fünfte Listeneintrag
  6. Dies ist der sechste Listeneintrag
  7. Dies ist der siebte Listeneintrag
  8. Dies ist der achte Listeneintrag
  9. Dies ist der neunste Listeneintrag
  10. Dies ist der zehnte Listeneintrag
  11. Dies ist der elfte Listeneintrag
  12. Dies ist der zwölfte und letzte Eintrag auf dieser Liste

Ungeordnete Listen

Das Element ul kennzeichnet eine ungeordnete Liste (z. B. eine Liste von Einträgen, die nur locker sortiert sind oder eine Punktliste).

  • HTML
  • CSS
    • Sass
    • Compass
    • LESS
    • Stylus
  • JavaScript
    • Backbone.js
    • Angular.js
    • Ember.js

Manchmal soll eine Liste auch Blockelemente enthalten, üblicherweise einen Absatz oder zwei.

  • HTML ist eine Auszeichnungssprache die verwendet wird, um die semantische Struktur eines Dokumentes zu schreiben.

  • CSS ist eine deklarive Sprache für Stilvorlagen. Damit wird das visuelle Aussehen eines HTML-Dokumentes gesteuert.

  • JavaScript ist eine Programmiersprache, die verwendet wird um Interaktionen zu einer Website hinzuzufügen oder ganze Programme für das Internet zu schreiben.

Definitionslisten

Das Element dl ist ein weiterer Typ von Liste, nämlich eine Defintionsliste. Anstelle von Listeneinträgen besteht eine dl aus Paaren von dt (Defintion Term) und dd (Definition Description).

Dies ist eine Bezeichnung
Dies ist die Definition für die Bezeichnung
Dies ist eine weitere Bezeichnung
Und dies ist die Definition für die Bezeichnung
Hier ist weitere Defintion darunter
Dies ist eine Bezeichnung
Dies ist eine Definition für die beiden Bezeichnungen darüber

Auch wenn diese Listenform Definitionsliste genannt wird, kann sie auch in anderen Szenarios verwendet werden, in denen Eltern/Kind-Beziehungen vorkommen.

Inline-Text

Es gibt eine Vielzahl von Inline-HTML-Elementen, die überall in anderen Elementen verwendet werden können.

Das Element a wird verwendet um Text zu verlinken, ob auf eine andere Seite, ein benanntes Fragment der aktuellen Seite oder auf einen anderen Ort im Internet:

Gehe zur Startseite zurück, Springe zum Anfang der Seite oder besuche eine fantastische Website im Internet.

Betonte Texte

Das Element em wird benutzt, um Betonung für Text auszuzeichnen, also z. B. wenn etwas anders ausgesprochen wird oder wichtiger ist. Um Text nur schräg zu stellen ist das Element i vorzuziehen:

Du musst einfach Negitoro Maki2 probieren!

Wichtige Texte

Das Element strong wird verwendet, um Text mit starker Wichtigkeit auszuzeichnen. Wo Text nur fett sein soll, ist das Element bvorzuziehen:

Das Eis zu betreten ist verboten!

Durchgestrichene Texte

Das Element s wird verwendet um Inhalte auszuzeichnen, die nicht länger akturat oder relevant sind. Um in Dokumenten zu markieren, dass ein Text entfernt wurde, ist das Element del zu verwenden.

Empfohlene Preisempfehlung: 3,99 € pro Flasche
Jetzt für nur noch 2,99 € pro Flasche!

Zitat-Quellen

Das Element cite wird verwendet um den Titel einer Arbeit (z. B. ein Buch, Aufsatz, Gedicht, Song, Film, TV-Show, Skulptur, Gemälde, Musical, Ausstellung etc) zu markieren.

Universal Declaration of Human Rights, United Nations, December 1948. Adopted by General Assembly resolution 217 A (III).

Abkürzungen

Das Element abbr wird für abgekürzten Text verwenden, egal ob es sich um Akronyme, Initialworte oder ähnliches. Nur wenn die Abkürzung nicht in Kapitälchen geschrieben werden soll, vergibt man ein extra Klassen-Attribut.

BBC, HTML, and Staffs.

Zeiten

Das Element time wird benutzt, um entweder die Zeit auf einer 24-Stunden-Uhr zu markieren oder ein präzises Datum des Gregorianischen Kalenders zu kennzeichnen.

Die Schlacht von Sekigahara3 am stellte einen Wendepunkt der japanischen Geschichte dar. Durch den Sieg gelangt es dem Haus Tokugawa, die Vormachtstellung in Japan zu sichern.

Superskript und Subskript

Das Element sup kennzeichnet Superskript und das Element sub Subskript.

Die Koordinate des iten Punktes ist (xi, yi). Der zehnte Punkt hat die Coordinate (x10, y10). Dies ist nur etwas weiterer Text der nur dafür da ist zu prüfen, ob die Zeilenhöhe stimmt.

Mathe ist eine nette Sache, manchmal möchte man mitten im Text eine Formel haben. Und sogar Berechnungen wie diese f(x, n) = log4xn sollte funktionieren und nicht die Zeilenhöhe verändern oder den Textfluß verändern.

Kursive Texte

Das Element i wird benutzt um eine andere Stimme oder Stimmung zu kennzeichnen oder Text, der auf andere Weise vom Fließtext abweicht. Dies können z. B. technische Begriffe, umgangssprachliche Begriffe aus anderen Sprachen, der Name eines Schiffes oder andere Arten von Text, die üblicherweise kursiv dargestellt werden.

Es liegt eine bestimmte je ne sais quoi in der Luft.

Fette Texte

Das Element b wird verwendet um Worte vom Text abzuheben ohne ihnen extra Bedeutung zu geben, wie z. B. Schlüsselworte, Produktnamen oder andere Arten von Text, die üblicherweise fett dargestellt werden.

Du betrittst einen kleinen Raum. Dein Schwert leuchtet heller. Eine Ratte huscht an der Wand vorbei.

Markierte oder hervorgehobene Texte

Das Element mark wird verwendet um einen Textmarker zu repräsentieren, der durch einen Text geht und stellen hervorhebt. Wenn es in einem Zitat verwendet wird, dann um eine Stelle hervorzuheben, die vorher nicht hervorgehoben war, aber auf die hingewiesen werden soll.

Bearbeitungen

Das Element del wird verwendet um Text zu markieren, der nicht mehr gültig ist und entfernt werden müsste, aber aus bestimmten Gründen auf der Seite stehen bleiben muss. Sein Gegenstück, das Element ins markiert Text, der hinzugefügt wurde. Es kann optional ein Zeitstempel hinzugefügt werden, der anzeigt, wann die Änderung durchgeführt wurde.

Sie kaufte zwei fünf Paar Schuhe.

Ruby

Das Element ruby hat nichts mit der Programmiersprache Ruby zu tun. Damit wird in verschiedenen asiatischen Sprachen die Aussprache von seltenen Schriftzeichen übertitelt. Im Japanischen gelten z. B. nur 1945 Zeichen als offizielle Zeichen, die im täglichen Sprachgebrauch von offiziellen Dokumenten verwendet werden dürfen. Es gibt aber viele tausend Zeichen mehr. Um auch weniger gebildeten zu ermöglichen, das Zeichen zu lesen, wird dann über diesen Zeichen Lautschrift geschrieben.

攻殻こうかく機動隊きどうたい

Das Japanische Kino hat einige Meisterwerke hervorgebracht, sowohl in Farbe als auch in Schwarz/Weiß. Der bekannte Film 7 Samurai (七人の侍しちにんのさむらい) von Akira Kurosawa ist einer der besten Filme der japanischen Geschichte. Der Film ist so gut, dass er sogar ein Remake erfahren hat: Die Glorreichen Sieben.

Tabellen

Tabellen sollten verwendet werden, um tabellarische Daten anzuzeigen. Die Elemente thead, tbody und tfoot sind dafür da Reihen in der Tabelle zu gruppieren.

First Header Second Header
Content Cell Content Cell
Content Cell Content Cell

Bilder

Ein Bild:

Example image

Videos

YouTube-Videos

Vimeo-Videos


  1. Ein Styleguide (oder deutsch Gestaltungsrichtlinie) beschreibt, wie bestimmte Elemente eines Druckerzeugnisses oder einer Website zu gestalten sind. Diese Richtlinien sollen ein einheitliches Erscheinungsbild verschiedener Kommunikationsmittel einer Institution oder Firma, z. B. Werbe- und Informationsmaterial, Geschäftsbriefe oder Internetauftritte, gewährleisten und so die Bildung einer Corporate Identity ermöglichen. Daneben werden Styleguides auch für die Software-Erstellung oder Produkte allgemein eingesetzt; auch hier ist das Ziel: Produkte sollen als zusammengehörig wahrgenommen werden und ggf. auch mit der verbundenen Marke assoziiert werden. [return]
  2. Maki-Sushi (巻き寿司, Maki-Zushi, dt. Rollen-Sushi) sind mit einer Bambusmatte (Makisu) gerollte Stücke. Es wird für gewöhnlich in Nori eingepackt. [return]
  3. Die Schlacht von Sekigahara (jap. 関ヶ原の戦い, Sekigahara no tatakai) am 21. Oktober 1600 stellte einen Wendepunkt in der japanischen Geschichte dar. Durch den Sieg in dieser Schlacht gelang es dem Haus Tokugawa, seine Vormachtstellung in Japan zu festigen. Im Laufe der nächsten fünfzig Jahre gab es zwar noch einige kleinere Aufstände, aber das Land wurde letztlich befriedet. Viele Historiker setzen den Übergang von der Sengoku-Zeit zur Edo-Zeit auf das Datum dieser Schlacht. [return]