HTML5 — Das Wesentliche

Der Begriff HTML ist erweitert und umfasst 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"

HTML5

<!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.