HTML

Generell

  • Für neue Projekte wird der HTML5 Doctype gewählt.
  • Bei der Bearbeitung / Ergänzung bestehender Projekte wird der verwendete Doctype beibehalten.
  • Bei Migrationen von bestehenden Templates nach Comet wird auf HTML5 umgestellt.

Validierung

Das HTML-Konstrukt ist valide.

Struktur

  1. HTML hat die Aufgabe, die inhaltliche Struktur eines Dokumentes wiederzugeben und ist nicht für Präsentationszwecke zu verwenden. Alle visuellen Informationen sind in externe Stylesheets auszulagern. Jegliche Art von Inline-Script und Inline-Styles sind zu vermeiden.
  2. Es sind jene HTML-Elemente zu verwenden, deren Bedeutung dem Inhalt am besten entsprechen.
  3. Es ist auf eine sinnvolle Reihenfolge des Inhalts zu achten: das Wichtigste zuerst.
  4. Es ist die Variante mit möglichst wenig Code zu wählen.
  5. Dem HTML-Element ist auf jeder Seite die entsprechende generelle Dokumentsprache mitzugeben (beispielsweise lang="de" ).
  6. Auf neutrale Elemente wie div oder span wird verzichtet, solange bedeutsamere Elemente (beispielsweise  nav , ul , strong , blockquote ) für einen Inhalt passender sind.
  7. Alle Inhalte sind für sämtliche Devices, für Suchmaschinen und Screenreader vorhanden und zugänglich.

Beispiel einer grundlegenden HTML-Seitenstruktur:

<!DOCTYPE html>
<html lang="de" class="no-js">
    <head>
        <meta charset="utf-8">
        <title>Seitentitel</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="/css/screen.css" rel="stylesheet" type="text/css" media="screen">
        <link href="/css/print.css" rel="stylesheet" type="text/css" media="print">
        <script src="/global.js"></script>
    </head>
    <body>
        
    </body>
</html>

Klassen und ID's

DIe Verwendung von Klassen sind grundsätzlich immer der von ID's vorzuziehen. Dies aus Gründen der Wiederverwendbarkeit und der Spezifität. CSS wird ausschliesslich auf Klassen angewendet.

 Falsch:

<header id="header">
    <h2 id="header__logo"><img src="/pictures/logo.svg" alt="Logo" /></h2>
</header>

 Richtig:

<header class="header">
    <h2 class="header__logo"><img src="/pictures/logo.svg" alt="Logo" /></h2>
</header>

Klassen oder ID's, die mit JavaScript angesprochen, modifiziert oder in den DOM geschrieben werden, sind mit einem entsprechenden Prefix versehen, damit ihr Zweck klar ist:

<div class="accordion__panel js-panel js-panel--open"></div>

Namenskonventionen

Sprechende ID- und Klassen-Namen machen den Quelltext lesbarer und werten ihn semantisch auf. Es gilt der Grundsatz: Namen sind so kurz wie möglich (.nav), so lang wie nötig (.footer-list).

  1. Es ist eine BEM oder BEM-verwandte Notation zu verwenden.
  2. Klassen sind ID’s immer vorzuziehen (Ziel: Mehrfachnutzung). 
  3. Klassen- und ID-Namen sind englisch zu benennen.
  4. Klassen- und ID-Namen sind ausschliesslich klein (lowercase) geschrieben. CamelCase wird nicht verwendet.
  5. Klassen- und ID-Namen beginnen immer mit einem Kleinbuchstaben, nie mit Zahlen.
  6. Wo möglich sind in der Namensgebung vorhandene Best Practies zu verwenden, z.B. .wrapper, .row, .col .subnav, .container, .content …
  7. Klassen- und ID-Namen sind immer generisch oder funktional benannt und beschreiben nicht deren Aussehen oder Verhalten.

 Falsch:

<div class="redbox"></div>

 Richtig:

<div class="warning"></div>
  1. Wenn sinnvoll sind Klassen-Kombinationen neuen Klassen oder ID’s vorzuziehen. Bei der Reihenfolge gilt die umgekehrte Spezifität.
<div class="warning required"></div>
  1. Block- und Element-Klassennamen werden wenn nötig mit einem Bindestrich getrennt. Logisch oder funktionel zugehörige Blöcke verwenden den selben Namespace.
    Beispiel:
<h2 class="sidebar__title"></h2>
  1. Modifier sind mit einem Doppelbindestrich getrennt.
    Beispiel Modifier:
<div class="box box--warning"></div>

Musterblock

Ein Modulblock könnte nach diesem Muster aufgebaut sein:

<div class="tile">
    <h2 class="tile__title">Titel</h2>
    <p class="tile__desc">Beschreibung</p>
    <ul class="tile__lst">
        <li class="tile__lst-entry"><a href="#">Editieren</a></li>
        <li class="tile__lst-entry"><a href="#">Löschen</a></li>
        <li class="tile__lst-entry tile__lst-entry--logout"><a href="#">Logout</a></li>
    </ul>
</div>
<!-- end .tile -->

Formatierung

  1. Block-Elemente (h1, p, li, ...) erfordern eine neue Zeile, Inline-Elemente (a, strong, ...) nicht.
  2. Block-Elemente sind immer um einen Tabulator mehr eingerückt als ihr Eltern-Element.

Kommentare

Bei schliessenden div-Tags um längere Abschnitte können wo sinnvoll Kommentare deren Ende kennzeichen:

<div class="header__main">
    <p>Ein Text.</p>
    …
    …
</div>
<!-- end .header__main -->

externe Quellen

Dokumentationen

HTML 5

Microformats

Charset

CheatSheets

Guidelines