\documentclass[a4paper, 11pt]{article}
\renewcommand{\familydefault}{\sfdefault}
\usepackage{a4wide}
\usepackage[utf8]{inputenc}
\usepackage[ngerman]{babel}
\usepackage{color}
\usepackage{graphicx}
\usepackage{setspace}
\usepackage{ulem}
\usepackage{listings}
\usepackage{float}
\usepackage[rflt]{floatflt}
\usepackage{tabularx}
\setlength{\parindent}{0pt}
\title{HTML5}
\usepackage[
pdftitle={HTML5}
pdfsubject={HTML5, die neuen Elemente und Attribute}
pdfauthor={Udo Schmal}
pdfkeywords={HTML5, Elemente, Tags}
]{hyperref}
\definecolor{darkblue}{rgb}{0,0,.5}
\hypersetup{pdftex=true, colorlinks=true, breaklinks=true, linkcolor=darkblue, menucolor=darkblue, pagecolor=darkblue, urlcolor=darkblue}
\begin{document}HTML5
\singlespacing
{\LARGE \textbf{\label{sec:title}HTML5}}

\singlespacing
{\large \textbf{\label{sec:subtitle}ein neuer Standard}}

Was verbirgt sich hinter HTML5, wo liegen die Unterschiede zu HTML4 / XHTML, es gibt einige neue Features, es werden aber auch alte Zöpfe endgültig abgeschnitten. Der Übersicht halber eine Aufsplittung in inhaltliche Teilbereiche:

\begin{itemize}
\item \ref{sec:semantic}neue semantische / strukturelle Elemente
\item \ref{sec:formular}neue Formularelemente
\item \ref{sec:multimedia}Multimediaelemente Video \&amp; Audio
\item vollständige CSS3 Unterstützung
\item \ref{sec:graphic}2D/3D Graphiken
\item Local Storage
\item Local SQL Database
\item Web Anwendungen (Web Applications)
\end{itemize}
\label{sec:semantic}
\singlespacing
{\large \textbf{Neue semantische / strukturelle Elemente}}

\begin{tabularx}{0.9\textwidth} { | >{\raggedright\arraybackslash}X | >{\raggedright\arraybackslash}X | }
\hline
Tag & Beschreibung \\
\hline
\&lt;article\&gt; & kompletter Artikel \\
\hline
\&lt;aside\&gt; & Zusatzinfos zum Seiteninhalt / Artikel \\
\hline
\&lt;bdi\&gt; & trennt anders ausgerichteten Text von der Standardausrichtung des Seiteninhalts \\
\hline
\&lt;command\&gt; & Befehlsschaltfläche (wird nur vom IE unterstützt) \\
\hline
\&lt;details\&gt; & ein/ausblendbare Details \\
\hline
\&lt;summary\&gt; & sichtbare Überschrift für \&lt;details\&gt; \\
\hline
\&lt;figure\&gt; & Gruppierungselement: Bereich mit in sich geschlossenen Inhalt wie z.B. Bilder oder Code \\
\hline
\&lt;figcaption\&gt; & Überschriftenelement: Beschriftung für das \&lt;figure\&gt; Element \\
\hline
\&lt;footer\&gt; & Seitenfuß für die komplette Seite (Dokument) oder auch für einen Artikelbereich (\&lt;article\&gt;) \\
\hline
\&lt;header\&gt; & Kopf für die komplette Seite (Dokument) oder auch für einen Artikelbereich (\&lt;article\&gt;) \\
\hline
\&lt;hgroup\&gt; & Überschriftengruppierung innerhalb eines Dokumentes \\
\hline
\&lt;mark\&gt; & markierter Text \\
\hline
\&lt;nav\&gt; & Bereich mit der Navigation oder auch nur (Navigations-Links) \\
\hline
\&lt;progress\&gt; & Bereich mit Fortschrittsanzeige (wird bei den Formularelementen erläutert da es eher dort zur Anwendung kommt) \\
\hline
\&lt;ruby\&gt; & Textauszeichnungselement: Bereich mit Text und Sprachzusatzinformationen (hauptsächlich für Ostasiatische Typografie) \\
\hline
\&lt;rt\&gt; & Bereich mit Sprachzusatzinformationen für \&lt;ruby\&gt; \\
\hline
\&lt;rp\&gt; & Alternativer Bereich für Browser die kein Ruby unterstützen \\
\hline
\&lt;section\&gt; & Bereich in einem Artikel, mit mindestens einer Überschrift \\
\hline
\&lt;time\&gt; & Datums / Zeitangabe \\
\hline
\&lt;wbr\&gt; & möglicher Zeilenumbruch \\
\hline
\&lt;main\&gt; (html5.1) & zum Kapseln des Hauptteils der Seite z.B. mehrere Artikel \&lt;article\&gt;\newline
\emph{Damit wird es gerade den Suchmaschinen ermöglicht Navigationselemente, Werbung und andere nicht inhaltlich relevante Informationen auszuschließen.} \\
\hline
\end{tabularx}

Für alte Browser sollte auf jeden Fall die folgende Passage ins Stylesheet aufgenommen werden, damit werden die neuen Elemente als Block-Level Elemente behandelt.
\begin{lstlisting}[breaklines]article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary \{display:block;\}\newline
audio, canvas, video \{display:inline-block; *display:inline; *zoom:1;\}\end{lstlisting}

\singlespacing
\textbf{Artikel Verwendung (article Beispiel):}
\begin{lstlisting}[breaklines]\&lt;html\&gt;
  \&lt;head\&gt;
    \&lt;title\&gt;Beispiel\&lt;/title\&gt;
  \&lt;/head\&gt;
  \&lt;body\&gt;
    \&lt;header\&gt;
      \&lt;h1\&gt;Seite mit mehreren Artikeln\&lt;/h1\&gt;
    \&lt;/header\&gt;
    \&lt;article\&gt;
      \&lt;hgroup\&gt;
        \&lt;h2\&gt;1. Artikel\&lt;/h2\&gt;
        \&lt;h3\&gt;mit mehreren \&Uuml;berschriften\&lt;/h3\&gt;
      \&lt;/hgroup\&gt;
      \&lt;p\&gt;Dieser Artikel enth\&auml;lt auch noch mehrere Bereiche\&lt;/p\&gt;
      \&lt;section\&gt;
        \&lt;h4\&gt;Globale Ansicht\&lt;/h4\&gt;
        \&lt;p\&gt;Meistens reicht ein Bereich \&lt;mark\&gt;es k\&ouml;nnte da aber auch andere Ansichten geben\&lt;/mark\&gt;\&lt;/p\&gt;
      \&lt;/section\&gt;
      \&lt;section\&gt;
        \&lt;h4\&gt;Andere Ansicht\&lt;/h4\&gt;
        \&lt;p\&gt;Es gibt immer zwei Sichtweisen :) \&lt;a id=\&quot;ref1\&quot; href=\&quot;\#ftn1\&quot;\&gt;*\&lt;sup\&gt;1\&lt;/sup\&gt;\&lt;/a\&gt;\&lt;/p\&gt;
        \&lt;figure\&gt;
          \&lt;img src=\&quot;/comic.jpg\&quot; alt=\&quot;Auseinandersetzung\&quot; /\&gt;
          \&lt;figcaption\&gt;Comic zum Thema\&lt;/figcaption\&gt;
        \&lt;/figure\&gt;
      \&lt;/section\&gt;
      \&lt;aside\&gt;
        \&lt;h5\&gt;Fu\&szlig;noten\&lt;/h5\&gt;
        \&lt;ul\&gt;
          \&lt;li\&gt;\&lt;a id=\&quot;ftn1\&quot; href=\&quot;\#ref1\&quot;\&gt;*\&lt;sup\&gt;1\&lt;/sup\&gt;\&lt;/a\&gt; Das ist ein \&lt;span lang=\&quot;en\&quot;\&gt;Smiley\&lt;/span\&gt;\&lt;/li\&gt;
        \&lt;/ul\&gt;
      \&lt;/aside\&gt;
      \&lt;details\&gt;
        \&lt;summary\&gt;Details\&lt;/summary\&gt;
        \&lt;p\&gt;Diese Diskussion wird schon seit ewigen Zeiten gef\&uuml;hrt.\&lt;/p\&gt;
      \&lt;/details\&gt;
    \&lt;/article\&gt;
    \&lt;article\&gt;
      \&lt;h2\&gt;2. Artikel\&lt;/h2\&gt;
      \&lt;p\&gt;Dieser Artikel enth\&auml;lt nur noch einen Bereich\&lt;/p\&gt;
      \&lt;h4\&gt;Globale Ansicht\&lt;/h4\&gt;
      \&lt;p\&gt;Hier reicht ein Bereich.\&lt;/p\&gt;
    \&lt;/article\&gt;
    \&lt;footer\&gt;
      \&lt;p\&gt;ps: mir f\&auml;llt sonst nichts mehr ein, au\&szlig;er das \&quot;header\&quot; und \&quot;footer\&quot; auch noch im \&quot;article\&quot; eingesetzt werden k\&ouml;nnen!\&lt;/p\&gt;
    \&lt;/footer\&gt;
  \&lt;/body\&gt;
\&lt;/html\&gt;\end{lstlisting}

Des weiteren bekommt der Doctype Tag unter HTML5 eine neues Attribut \&quot;manifest\&quot; in dem die URL zur Manifest-Datei für den offline Modus-Modus übergeben werden kann.
\label{sec:formular}
\singlespacing
{\large \textbf{Neue Formularelemente}}

\begin{tabularx}{0.9\textwidth} { | >{\raggedright\arraybackslash}X | >{\raggedright\arraybackslash}X | }
\hline
Tag & Beschreibung \\
\hline
\&lt;datalist\&gt; & \textbf{Erweiterung des \&lt;input\&gt; Elements um Optionen, wie beim \&lt;select\&gt; Element also quasi eine Combobox} \\
\hline
\begin{lstlisting}[breaklines]
\&lt;input type=\&quot;text\&quot; maxlength=\&quot;50\&quot; list=\&quot;browsers\&quot; name=\&quot;favBrowser\&quot; /\&gt;
\&lt;datalist id=\&quot;browsers\&quot;\&gt;
  \&lt;option value=\&quot;Mozilla Firefox\&quot; /\&gt;
  \&lt;option value=\&quot;Internet Explorer\&quot; /\&gt;
  \&lt;option value=\&quot;Google Chrome\&quot; /\&gt;
\&lt;/datalist\&gt;\end{lstlisting}
 & \label{sec:browsers} \\
\hline
\&lt;keygen\&gt; & \textbf{kryptografischer Schlüsselgenerator} \\
\hline
\begin{lstlisting}[breaklines]\&lt;keygen name=\&quot;RSA public key\&quot; challenge=\&quot;123456789\&quot; keytype=\&quot;RSA\&quot; /\&gt;
\&lt;input type=\&quot;submit\&quot; name=\&quot;createcert\&quot; value=\&quot;Generate\&quot; /\&gt;\end{lstlisting}
 &  \\
\hline
\&lt;meter\&gt; & \textbf{Fortschrittsbalken} \\
\hline
\begin{lstlisting}[breaklines]\&lt;meter value=\&quot;5\&quot; min=\&quot;1\&quot; optimum=\&quot;9\&quot; max=\&quot;10\&quot;\&gt;\&lt;/meter\&gt;\end{lstlisting}
  Die Validatoren meckern wenn das meter-Tag als Self-Closing-Tag im Code steht aber nur so wird es im Firefox angezeigt!                 &  \\
\hline
\&lt;output\&gt; & \textbf{Ergebnisfeld für eine Berechnung} \\
\hline
\begin{lstlisting}[breaklines]\&lt;form onsubmit=\&quot;return false\&quot; oninput=\&quot;o.value = parseInt(a.value) + parseInt(b.value);\&quot;\&gt;
  \&lt;input name=\&quot;a\&quot; type=\&quot;number\&quot; step=\&quot;any\&quot; /\&gt;
    + \&lt;input name=\&quot;b\&quot; type=\&quot;number\&quot; step=\&quot;any\&quot; /\&gt;
    = \&lt;output name=\&quot;o\&quot;\&gt;0\&lt;/output\&gt;
\&lt;/form\&gt;\end{lstlisting}
 & 
\begin{tabularx}{0.9\textwidth} { >{\raggedright\arraybackslash}X >{\raggedright\arraybackslash}X }
 &  \\
+ &  \\
= & \label{sec:sum}0 \\
\end{tabularx}
 \\
\&lt;input type=\&quot;color\&quot;\&gt; & \textbf{Farbauswahl} \\
\begin{lstlisting}[breaklines]\&lt;input type=\&quot;color\&quot; name=\&quot;favcolor\&quot; /\&gt;\end{lstlisting}
 &  \\
\&lt;input type=\&quot;date\&quot;\&gt; & \textbf{Datumseingabe} \\
\begin{lstlisting}[breaklines]\&lt;input type=\&quot;date\&quot; name=\&quot;birthday\&quot; /\&gt;\end{lstlisting}
 &  \\
\&lt;input type=\&quot;datetime\&quot; /\&gt; & \textbf{Datum und Zeit Eingabe (mit Zeitzone)} \\
\begin{lstlisting}[breaklines]\&lt;input type=\&quot;datetime\&quot; name=\&quot;termin\&quot; /\&gt;\end{lstlisting}
 &  \\
\&lt;input type=\&quot;datetime-local\&quot; /\&gt; & \textbf{Datum und Zeit Eingabe lokale Zeit (ohne Zeitzone)} \\
\begin{lstlisting}[breaklines]\&lt;input type=\&quot;datetime-local\&quot; name=\&quot;termin\&quot; /\&gt;\end{lstlisting}
 &  \\
\&lt;input type=\&quot;email\&quot; /\&gt; & \textbf{E-Mail Eingabefeld}, inklusive Überprüfung \\
\begin{lstlisting}[breaklines]\&lt;input type=\&quot;email\&quot; name=\&quot;email\&quot; /\&gt;\end{lstlisting}
 &  \\
\&lt;input type=\&quot;month\&quot; /\&gt; & \textbf{Monat und Jahr Eingabe} \\
\begin{lstlisting}[breaklines]\&lt;input type=\&quot;month\&quot; name=\&quot;month\&quot; /\&gt;\end{lstlisting}
 &  \\
\&lt;input type=\&quot;number\&quot; /\&gt; & \textbf{Nummern Eingabefeld mit Einschränkungsmöglichkeiten}
\begin{itemize}
\item max: erlaubte Obergrenze
\item min: erlaubte Untergrenze
\item step: Intervall-Einstellungsmöglichkeit
\end{itemize}
 \\
\begin{lstlisting}[breaklines]\&lt;input type=\&quot;number\&quot; name=\&quot;note\&quot; min=\&quot;1\&quot; max=\&quot;6\&quot; value=\&quot;6\&quot; /\&gt;\end{lstlisting}
 &  \\
\&lt;input type=\&quot;range\&quot; /\&gt; & \textbf{Wertebereich} \\
\begin{lstlisting}[breaklines]\&lt;input type=\&quot;range\&quot; name=\&quot;points\&quot; min=\&quot;1\&quot; max=\&quot;10\&quot; value=\&quot;6\&quot; /\&gt;\end{lstlisting}
 &  \\
\&lt;input type=\&quot;search\&quot; /\&gt; & \textbf{Such Feld} \\
\begin{lstlisting}[breaklines]\&lt;input type=\&quot;search\&quot; name=\&quot;googlesearch\&quot; /\&gt;\end{lstlisting}
 &  \\
\&lt;input type=\&quot;tel\&quot; /\&gt; & \textbf{Telefonnummer Eingabe} \\
\begin{lstlisting}[breaklines]\&lt;input type=\&quot;tel\&quot; name=\&quot;telefon\&quot; /\&gt;\end{lstlisting}
 &  \\
\&lt;input type=\&quot;time\&quot; /\&gt; & \textbf{Zeit Eingabe Stunden und Minuten} \\
\begin{lstlisting}[breaklines]\&lt;input type=\&quot;time\&quot; name=\&quot;time\&quot; /\&gt;\end{lstlisting}
 &  \\
\&lt;input type=\&quot;url\&quot; /\&gt; & \textbf{Web-Adresse (URL) Eingabe}, inklusive Überprüfung, beim Opera wird das Protokoll hinzugefügt \\
\begin{lstlisting}[breaklines]\&lt;input type=\&quot;url\&quot; name=\&quot;homepage\&quot; /\&gt;\end{lstlisting}
 &  \\
\&lt;input type=\&quot;week\&quot; /\&gt; & \textbf{Jahr und Wochen Eingabe} \\
\begin{lstlisting}[breaklines]\&lt;input type=\&quot;week\&quot; name=\&quot;woche\&quot; /\&gt;\end{lstlisting}
 &  \\
\end{tabularx}
\label{sec:attribute}
\singlespacing
{\large \textbf{Neue, noch nicht in den neuen Elementen aufgeführte Attribute}}

\begin{tabularx}{0.9\textwidth} { | >{\raggedright\arraybackslash}X | >{\raggedright\arraybackslash}X | }
\hline
Attribut & Beschreibung \\
\hline
autocomplete & Autovervollständigung ein (on) oder aus (off) schalten, sowohl für das form-Tag als auch für input-Tags \\
\hline
novalidate & form-Tag Attribut, welches festlegt das die Formulardaten vor der Übertragung nicht überprüft werden sollen \\
\hline
autofocus & legt das input Element fest das den Fokus erhält wenn die Seite geladen wurde \\
\hline
form & legt das oder auch die form-Elemente über die id fest, dem das input-Element zugeordnet ist,\newline
soll ein input-Element mehreren form-Elementen zugeordnet werden ist das in Form einer Space-separierten Liste zu realisieren \\
\hline
formaction\newline
formenctype\newline
formmethod\newline
formnovalidate\newline
formtarget & für input-Elemente des Typ submit und image, überschreibt die jeweiligen form-Attribute. \\
\hline
height\newline
width & für input-Elemente des Typ image, zur Definition der Bildabmessungen \\
\hline
multiple & für input-Elemente des Typ email und file, erlaubt mehrfach Zuweisungen \\
\hline
pattern & für input-Elemente des Typ text, search, url, tel, email und password, legt eine regular expression fest gegen die die Eingabe überprüft wird \\
\hline
placeholder & für input-Elemente des Typ text, search, url, tel, email und password, definiert den erwarteten Wert eines Input-Feldes bis zur Eingabe eines Wertes \\
\hline
required & für input-Elemente des Typ text, search, url, tel, email, password, date pickers, number, checkbox, radio und file, das so gekennzeichnete Pflichtfeld muss ausgefüllt werden \\
\hline
data-... & Benutzerdefinierte Attribute, zur Nutzung in Javascripts el.getAttribute('data-...') ging vorher schon, war aber nicht valide/gültig (wurde also vom W3C-Validator abgestraft) \\
\hline
\end{tabularx}
\label{sec:multimedia}
\singlespacing
{\large \textbf{Multimediaelemente Video \&amp; Audio}}

\begin{tabularx}{0.9\textwidth} { | >{\raggedright\arraybackslash}X | >{\raggedright\arraybackslash}X | }
\hline
Tag & Beschreibung \\
\hline
\&lt;video\&gt; & \begin{lstlisting}[breaklines]\&lt;video controls preload=\&quot;none\&quot; poster=\&quot;/media/video/sammy.jpg\&quot; width=\&quot;640\&quot; height=\&quot;360\&quot;\&gt;
  \&lt;source src=\&quot;/media/video/sammy.mp4\&quot; type=\&quot;video/mp4\&quot; /\&gt;
  \&lt;source src=\&quot;/media/video/sammy.webm\&quot; type=\&quot;video/webm\&quot; /\&gt;
  \&lt;source src=\&quot;/media/video/sammy.ogv\&quot; type=\&quot;video/ogg\&quot; /\&gt;
\&lt;/video\&gt;\end{lstlisting}
  Beispiel: \href{https://www.gocher.me/video}{Video.js - HTML5 Video Player mit Fallback} \\
\hline
 &  \\
\hline
\&lt;audio\&gt; & \begin{lstlisting}[breaklines]\&lt;audio controls\&gt;
  \&lt;source src=\&quot;/audio.ogg\&quot; type=\&quot;audio/ogg\&quot; /\&gt;
  \&lt;source src=\&quot;/audio.mp3\&quot; type=\&quot;audio/mpeg\&quot; /\&gt;
  \&lt;span lang=\&quot;de\&quot;\&gt;Ihr Browser unterst\&uuml;tzt keine Audio-Wiedergabe.\&lt;/span\&gt;
  \&lt;span lang=\&quot;en\&quot;\&gt;Your browser does not support the audio tag.\&lt;/span\&gt;
\&lt;/audio\&gt;\end{lstlisting}
 \\
\hline
 & Ihr Browser unterstützt keine Audio-Wiedergabe.Your browser does not support the audio tag. \\
\hline
\end{tabularx}
\label{sec:graphic}
\singlespacing
{\large \textbf{2D/3D Graphiken}}

\begin{tabularx}{0.9\textwidth} { | >{\raggedright\arraybackslash}X | >{\raggedright\arraybackslash}X | }
\hline
Tag & Beschreibung \\
\hline
\&lt;canvas\&gt; & \begin{lstlisting}[breaklines]\&lt;canvas id=\&quot;canvas\_id\&quot; height=\&quot;150\&quot; width=\&quot;150\&quot;\&gt;
  \&lt;p\&gt;Ihr Browser unterst\&uuml;tzt das canvas-Element leider nicht.\&lt;/p\&gt;
\&lt;/canvas\&gt;\end{lstlisting}

\href{https://www.gocher.me/code/canvas_draw_it.js}{canvas\_draw\_it.js}
 \\
\hline
 & \label{sec:canvas_id}
Ihr Browser unterstützt das canvas-Element leider nicht.
\label{sec:drawIt}draw it! \\
\hline
 & 
ein Beispiel: \href{https://freshdesignweb.com/html5-css3-3d-examples-demo.html}{40 Best HTML5 and CSS3 3D Demo Examples}
 \\
\hline
\end{tabularx}

Zu empfehlen ist die Dokumentation HTML Living Standard von WHATWG: \href{https://html.spec.whatwg.org/multipage/}{html.spec.whatwg.org/multipage/} eine ständig in Bearbeitung befindliche Übersicht der Definition!
\end{document}