Die bemerkenswertesten HTML5 -Funktionen:
- Audio- und Video-Unterstützung;
- lokaler Speicher offline;
- die Fähigkeit, Webseiten auch für Mobilgeräte zu bauen;
- man braucht nicht mehr die Type-Attribute von Tags wie < link > und < script > zu benutzen;
- mit neuen Tags wie < article >, < section >, < header > usw., haben die Entwickler die Möglichkeit, Inhalte in einer entsprechenden Art und Weise zu organisieren.
Dennoch ist HTML5 bei weitem noch nicht perfekt (es kann nicht als ein wirklich semantisches Markup bezeichnet werden) und befindet sich in seiner Entwicklungsphase.
HTML6 Konzeptüberprüfung
Um es einfach auszudrücken, besteht das Konzept von HTML6 in der vereinfachten Wiedergabe der Tags. Man würde, beispielsweise, direkt < wrapper > oder < container > Tags anstelle von < div id='container' > oder < div id='wrapper' > benutzen können. Das ist worauf HTML6 abgezielt ist.
Die sechste Revision von HTML wird die ähnlichen Namensräume wie die XML-Struktur haben. Was ist so gut über XML-Namensräume? Sie werden Euch helfen, das gleiche Tag zu verwenden ohne das es mit einem anderem kollidiert. Z. b., das eine, das in XHTML DOCTYPE verwendet wird:
1 |
xmlns:xhtml="http://www.w3.org/1999/xhtml" |
HTML6 wird es uns ermöglichen, nicht nur die definierten Tags, sondern auch Tags, die wir möchten, zu verwenden.
HTML6-Beispiel
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<!DOCTYPE html>
<html:html>
<html:head>
<html:title>A Look Into HTML6</html:title>
<html:meta type="title" value="Page Title">
<html:meta type="description" value="HTML example with namespaces">
<html:link src="css/mainfile.css" title="Styles" type="text/css">
<html:link src="js/mainfile.js" title="Script" type="text/javascript">
</html:head>
<html:body>
<header>
<logo>
<html:media type="image" src="images/xyz.png">
</logo>
<nav>
<html:a href="/img1">a1</a>
<html:a href="/img2">a2</a>
</nav>
</header>
<content>
<article>
<h1>Heading of main article</h1>
<h2>Sub-heading of main article</h2>
<p>[...]</p>
<p>[...]</p>
</article>
<article>
<h1>The concept of HTML6</h1>
<h2>Understanding the basics</h2>
<p>[...]</p>
</article>
</content>
<footer>
<copyright>This site is © to Anonymous 2014</copyright>
</footer>
</html:body>
</html:html>
|
Habt Iht einige merkwürdige <html: x>Tags bemerkt? Dies sind die Elemente, die zu W3C und HTML6 gehören, und sind für die Darstellung bestimmter Vorgänge im Browser verantwortlich. Hier ist ein einfaches Beispiel zum besseren Verständnis: das <html: title> Element wird die Titelleiste des Browsers ändern und das <html: Medien> Element wird dazu beitragen, dass das festgelegte Bild auf Eurem Bildschirm erscheint. Alle diese Elemente sind dafür da, um Euch zu helfen, den Beispielcode semantischer zu machen.
HTML6 APIs
HTML6 Tags werden den Namensraum html wie < html:html > oder < html: head > usw., haben. Jetzt werden wir einen Blick auf alle Tag-Attribute werfen, die in dem obigen HTML6 Beispiel-Dokument verwendet wurden.
1 2 3 4 |
<!DOCTYPE html> <html:html>// this is equivalent to <html> tag written in previous HTML versions <!-- sample of HTML document --> </html:html> |
< html:head >
Dieses Tag ist dem <head> Tag gleichwertig. Es basiert auf Gewinnung von Daten und Skripten und wird fein einstellen, wie der Inhalt innerhalb vom <html: Body > Tag angezeigt werden soll.
1 2 3 4 5 6 |
<!DOCTYPE html>
<html:html>
<html:head>
<!-- Main content would come here, like the <html:title> tag -->
</html:head>
</html:html>
|
< html:title >
Wie es aus dem Namen zu erraten ist, wird es den Titel des HTML-Dokuments ändern. Es ist vergleichbar mit dem Tag <title>, das in früheren HTML-Versionen verwendet wurde. Dieses Tag wird von Browsern verwendet, um Titelleiste, Favoriten usw., zu ändern.
1 2 3 4 5 6 |
<!DOCTYPE html>
<html:html>
<html:head>
<html:title>A Look Into HTML6</html:title>
</html:head>
</html:html>
|
< html:meta >
Dieses Tag unterscheidet sich von dem <meta> Tag, dass in der HTML5-Version verwendet wurde, und kann benutzt werden, um die Metadaten zu sortieren. Aber im Gegensatz zu HTML5 braucht Ihr in HTML6 nicht mehr die Standard-Meta-Typen anzuwenden.
1 2 3 4 5 6 7 |
<!DOCTYPE html>
<html:html>
<html:head>
<html:title>A Look Into HTML6</html:title>
<html:meta type="description" value="HTML example with namespaces">
</html:head>
</html:html>
|
< html:link >
Dieses Tag wird für die externe Verlinkung von Dokumenten und Skripten (wie CSS, JS etc.) mit dem HTML-Dokument verwendet. Es ist ähnlich dem <link> Tag in HTML5. Dieses Tag enthält die folgenden Attribute:
- charset: "UTF-8" Zeichencodierung;
- href: enthält Link zu Eurer Quelldatei;
- Medien: definiert die Art vom Gerät, das man benutzt (Smartphone, Tablet, Desktop, etc.);
- Typ: der MIME-Typ des Dokuments.
1 2 3 4 5 6 7 |
<!DOCTYPE html>
<html:html>
<html:head>
<html:title>A Look Into HTML6</html:title>
<html:link src="js/mainfile.js" title="Script" type="text/javascript">
</html:head>
</html:html>
|
< html:body >
Es ist wie das <body> Tag, das in der aktuellen HTML-Version verwendet wird. Hier wird Euer gesamtes Website-Material (Text, Medien und andere) platziert.
1 2 3 4 5 6 7 8 9 |
<!DOCTYPE html>
<html:html>
<html:head>
<html:title>A Look Into HTML6</html:title>
</html:head>
<html:body>
<!-- This is where your website content is placed -->
</html:body>
</html:html>
|
< html:a >
Dieses Tag is ähnlich dem < a > Tag, das verwendet wird, um eine Verbindung zu anderen Webseiten darzustellen. Es leitet den Link auf die Seite, die Ihr besuchen möchtet.
1 2 3 4 5 6 7 8 9 |
<!DOCTYPE html>
<html:html>
<html:head>
<html:title>A Look Into HTML6</html:title>
</html:head>
<html:body>
<html:a href="http://siteurl">Go to siteurl.com!</html:a>
</html:body>
</html:html>
|
< html:button >
Dieses Tag ist gleichbedeutend mit < button > Tag oder < input type="button" >. Es ermöglicht Euch, einen Button für den Anwender zu erstellen, der etwas Interaktion auf Eurer Webseite ausführen möchte.
1 2 3 4 5 6 7 8 9 |
<!DOCTYPE html>
<html:html>
<html:head>
<html:title>A Look Into HTML6</html:title>
</html:head>
<html:body>
<html:button>Click Here</html:button>
</html:body>
</html:html>
|
< html:media >
Dieses Tag umfasst all die < media > Tags (< img >, < video >, < embed >, etc.). Wenn Ihr das <html: Medien> Tag benutzt, braucht Ihr nicht, ein Tag für jeden Dateityp anzugeben.
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html>
<html:html>
<html:head>
<html:title>A Look Into HTML6</html:title>
</html:head>
<html:body>
<!-- Image would come here -->
<html:media src="img1/logo.jpg" type="image">
<!-- Video doesn't need a type -->
<html:media src="videos/slide.mov">
</html:body>
</html:html>
|
Tag-Typen-Übersicht
Ähnlich wie bei den aktuellen und früheren HTML-Versionen, wird HTML6 zwei Arten von Tags haben: einzelne und doppelte Tags. Einzelne Tags werden keinen Text-Inhalt haben, nur Attribute. Beispielsweise:
1 2 |
<html:meta type="author" content="z13a"> <html:meta type="author" content="z13a" /> |
Im Vergleich zu den doppelten Tags, braucht Ihr nicht mehr Eure einzelne Tags zu schließen. Doppelte Tags haben ein öffnendes und ein schließendes Tag, weil sie einen Textinhalt haben. Aber wenn doppelte Tags keine textbasierte Inhalte haben, könnt Ihr sie auf die "selbstschließende einzelne Variante" reduzieren. Beispielsweise:
1 2 3 4 5 |
<html:link href="./a.html">Text based content</html:link> <!-- This shortand... --> <foo class="xyz" /> <!-- ...means in fact this: --> <foo class="xyz"></foo> |
Zusammenfassung
Sie haben Recht, HTML6 ist noch nicht verfügbar. Aber Oscar Godson hat schon eine Vorstellung davon, was es uns in der nächsten Zukunft bieten kann. Dieser Beitrag ist nur ein Teaser, um Euch ungeduldig auf die Erscheinung von HTML6 zu machen.
Unser Team ist Mike Swan für die freigegebenen Informationen sehr dankbar.
Dieser Artikel wurde aus dem Englischen übersetzt. Das Original findet Ihr hier: What If? HTML6 – Generalized Concept.
