HTML5

Unter dem „Oberbegriff HTML5“ versammeln sich HTML, CSS sowie Javascript, und darauf aufsetzende Technologien. Eine grobe Übersicht, aus verschiedenen Quellen (s.u.) zusammengetragen.

HTML-Vereinfachung und Erweiterung

HTML 4

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"

XHTML

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"

<!DOCTYPE html>

HTML 4 / XHTML	HTML5
`<div id="header">`	`<header>, <hgroup>`
`<div id="topnav">`	`<nav>`
`<div id="sidenav">`	`<aside>`
`<div class="content">`	`<article> <section>`
`<div id="footer">`	`<footer>`
`<div class="date">`	`<time datetime="...">`

Es können für <article> und <section>Abschnittsinformationen (itemscope, itemtype, itemid,…) hinterlegt werden.
Erweiterte Formularattributetype="email"undtype="date">, die bei Mobilgeräten die passende Tastatur öffnen und sich via CSS gestalten lassen.
RegEx Eingabefilter<input type="text" pattern="[0-9]{4}-{1}[0-9]{4}">
Angepasste Select-Box... list="schulung"...
Video und Audio

<audio id="audio" src="sound.mp3" controls></audio>
<video id="video" src="movie.webm" controls poster="standbild.png"></video>

CSS Erweiterungen

Selektoren

 td:first-child{background:#ccc}

Füllt die erste Spalte einer Tabelle mit der Hintergrundfarbe

tr:nth-child⟨odd⟩ {background: #fff;}
tr:nth-child⟨even⟩{background: #ccc;}

Füllt die Zeilen einer Tabelle alternierend (odd, even) mit Farbe.

td:nth-child⟨odd⟩{background: #fff;}
td:nth-child⟨even⟩{background: #ccc;}

Füllt die Spalten einer Tabelle alternierend.

Typisierende Attribute

:invalid {background:red;}
:vaild {background:green;}
div:hover {
    animation-play-state: [running | paused];
}
:not⟨.box⟩{background:red;}
:not⟨span⟩{background:blue;}
input[type="text"]{background:grey;}

Webfonts

@font-face{
       font-family:'DejaVu Sans Mono';}
       src:url⟨fonturl.tld⟩
}
...
body {
     font-family: 'DejaVu Sans Mono';
}

„Runde Ecken“

 .button {
         border:thin solid blue;
         border-radius: 5px;
 }
 .tab {
      border:thin solid red;
     border-top-left-radius: 10px;
     border-top-right-radius: 10px;
 }

Spalten

 .columns {
     -column-count: 2;
    -column-rule: thin dotted #ccc;
    -column-gap: 3em;
}

Weiteres

text-overflow: ellipsis;: Textüberlauf mit Punkten am Ende

rgba(255,0,0,0.82); oder hsla(360,100%,50%,0.82);: Transparenz/Opazität via RGBA oder HSLA

Verläufe: Das muss allerdings browserspezifisch codiert werden

text-shadow, box-shadow: Schatten, mit Farbe, Opazität, Richtung und Dichte einstellbar

box-shadow:rgba⟨0,0,123,0.25⟩ xpx ypx dpx;

Hintergrund: Hintergrundskalierung und mehrere Hintergründe

Animation: Hierfür bieten Webkit-basierte Browser diverse Optionen. Ob und wie sie in anderen Browsern unterstützt werden, ist (beim Schreiben dieses Dokuments) unklar.