CSS, HTML und Javascript mit {stil}

HTML aside, embed, template

HTML5 Struktur: acticle oder section, header und nav

aside kennzeichnet Bereiche der Seite, die nur am Rand mit dem Kerninhalt zu tun haben – ähnlicht wie die Seitenspalte (Marginale) in einem Fachbuch.

aside ist die Struktur für Inhalte, die nicht zu den Hauptinhalten einer Seite zählen – »am Rande« ist eine gute Übersetzung für aside. aside steht aber nicht für die Sidebar der Webseite und Inhalte der Sidebar sind nicht unbedingt »aside«.

aside steht für Bereiche einer Seite, die nicht unbedingt wichtig für das Verständnis der Seite sind, sondern eher als interessante zusätzliche Informationen zu verstehen sind, die zum Verständnis beitragen, aber nicht erforderlich für das Verständnis sind. Beispiele für aside sind weiterführende Links, ein kleines Glossar.

aside ähnelt figure, aber figure enthält Informationen, die wichtig für das Verständnis sind, aber die nicht an einer bestimmten Position innerhalt des Inhalts sind.

< embed >

Medien wie Bilder und eingebetteter Inhalt liegen nicht in der Webseite, sondern in separaten Dateien. embed kennen wir noch aus HTML4, aber gehörte nicht zum Standard. Auch in XHTML war embed nicht vertreten und wurde verpönt. Jetzt hat embed den Weg als valides Element von HTML5 geschafft. Glückwunsch!

embed bettet Inhalte über Plugins ein – z.B. Flash-Video.

< template >

Das template-Tag enthält HTML-Markup, das auf der Seite nicht angezeigt wird, sondern als Vorlage für Javascript dient. Dann muss ein Script nicht jedesmal den komplexen Ablauf von createElement und insertBefore oder appendChild durchlaufen, sondern kann den Inhalt des template-Tags direkt nutzen.

HTML Template Tag für Javascript
<template class="template">
   <header>
      <div class="headsvg">
         <svg width="100%" height="100%" viewBox="0 0 335 201">
         </svg>
      </div>
      <h1>Ein neuer Header</h1>
      <time itemprop="dateModified" content="2015-11-30" datetime="2015-11-30">Nov 2015</time>
   </header>
</template>
var mql = window.matchMedia("screen and (min-width:720px)");
changeHeader(mql);
mql.addListener(changeHeader);

function changeHeader(mql) {
    if (mql.matches) {
        document.querySelector('.entryHeader').appendChild(document.querySelector('template').content.cloneNode(true));
    } else {

    }
}

Das HTML template-Tag wird von Chrome, Firefox, Opera, Safari und Microsoft Edge unterstützt.

details: Interaktive Elemente und Sripts

details sind zusätzliche Informationen, die der Benutzer anhand eines Dreiecksymbols aufklappen und verbergen kann. In einem details-Element können beliebige Elemente sitzen: Bilder, Tabellen oder einfach Text. Ein summary-Tag unterhalb des details-Tags wird zum Titel.

Sehen und Verbergen

Ohne details-Tag brauchen wir CSS und Javascript, um den Benutzer Informationen kompakt zur Ansicht anzubieten.

<details>
   <summary>Sehen und Verbergen</summary>
   <p>Ohne details-Tag brauchen wir …</p>
</details>

Das details-tag wird allen modernen Browser unterstützt – außer IE in allen Versionen sowie Microsoft Edge. Browser, die details nicht unterstützen, zeigen den Inhalt des details-Tags offen und ohne Einschränkung.

var mql = window.matchMedia("screen and (min-width:720px)");
changeHeader(mql);
mql.addListener(changeHeader);

var postheader = document.querySelector('#postheader');

function changeHeader(mql) {
    if (mql.matches) {
    	document.querySelector('#postheader').appendChild(document.querySelector('template').content.cloneNode(true));
    } else {

    }
}