Stellaplan weiter Alle Anleitungen

Anleitung im Internet unter http://stellatest.de

was ist neu in html5

Die Systematik dieser Darstellung ist in Anlehnung an die englischsprachige Seite von w3school.com entstanden. Dort ist zu HTML5 und vielen anderen Themen umfangreiches Schulungsmaterial zu finden. Interessante Online-Editoren erlauben es auf dieser Seite, sebständig mit eigenem Code zu experimentieren.

Die DOCTYPE-Deklaration wurde vereinfacht

<!DOCTYPE html>

 

Die Zeichensatzangabe (charset) wurde vereinfacht

Standardeinstellung ist utf-8

<meta charset="utf-8">

 

Aufbau einer HTML5-Seite

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Titel der Website</title>

</head>

<body>

Inhalt der Website

</body>

</html>

 

Neue HTML-Elemente

In HTML5 sind wichtige neue semantischen Elemente und die Multimediaelemente hinzugekommen

Semantische Elemente wurden üblicherweise bislang durch DIV-Boxen mit zugewiesenen Klassen (Beispiel: <div class="footer">...</div>) definiert . Da jeder Entwickler seine eigenen Begriffe einführen konnte, war es bislang schwer, Seiten einheitlich zu durchsuchen, zu überarbeiten oder weiterzuverwenden.


Elemente, die es in HTML5 nicht mehr gibt werden zum größten Teil durch CSS-Befehle ersetzt.

Element Ersatz
<acronym> <abbr>
<applet> <object>
<basefont> CSS
<big> CSS (z.B. font-size:1em)
<center> CSS (z.B. text-align:center )
<dir> <ul>
<font> CSS (font: arial)
<frame>  
<frameset>  
<noframes>  
<strike> CSS
<tt> CSS

 

Eigenschaften von HTML5-Elementen und Probleme mit älteren Browsern

! Acht semantische HTML5-Elemente sind Blocklevel-Elemente. Ältere Browser kennen diese Elemente nicht und stellen sie daher falsch, nämlich inline (in einer Linie) ohne Zeilenumbruch dar.

Damit ältere Browser diese Elemente korrekt darstellen, können ihnen in der CSS-Datei die Blockeigenschaft zugewiesen werden:

header, section, footer, aside, nav, main, article, figure

{display: block;}

Beschreibung der wichtigsten neuen HTML5-Elemente

Strukturelemente erleichtern die Gliederung auf HTML-Seiten

Element

Beschreibung

<article>

Artikel im Dokument

<aside>

Inhalt, der einer Seite zugeordnet ist (Beispiel: Sidebar)

<bdi>

Textteil mit anderen Schreibrichtung als der Haupttext.

<details>

Zusätzliche Details, die der User anzeigen oder verstecken kann.

<dialog>

Dialogbox oder ein Fenster

<figcaption>

Bildunterschrift eines <figure>Elementes

<figure>

Eigenständiger Container für Illustrationen, Diagramme, Fotos, Code listings usw.<figcaption> ist Bestandteil dieses Containers für Bezeichnungen

<footer>

Fußzeile(n) eines Dokumentes oder eines Abschnittes

<header>

Kopfzeile(n) eines Dokumentes oder eines Abschnitts

<main>

Hauptinhalt eines Dokumentes

<mark>

Hervorhebung eines Textteiles

<menuitem> 

Menüpunkt , den Benutzer aus einem Popup-Menü aufrufen kann

<nav>

Bereich für Navigation / Menü

<progress>

Fortschrittsanzeige für eine Aufgabe

<section>

Abschnitt in einem Dokument

<summary>

Überschrift für ein <details>-Element

<time>

Datum / Uhrzeit

<wbr>

Definiert einen automatischen Zeilenumbruch an dieser Stelle

 

HTML5 Input-Typen und -Attribute

Input-Typen / Attribute

HTML5-Grafik

Beispiel: SVG Circle

<!DOCTYPE html>
<html>
<body>

<svg width="200" height="200">
<circle cx="100" cy="100" r="70" stroke="navy" stroke-width="4" fill="green" />
</svg>S

</body>
</html>

 

Weitere Beispiele: HTML5 SVG

 

HTML5-Audio und Video

Read more about HTML5 Video.

Read more about HTML5 Audio.

 

HTML5 Einsatz der Semantischen Elemente

Was sind semantische Elemente?

Semantische Elemente beinhalten schon im Namen eine Aussage über den Inhalt, für den sie stehen.

Semantische Elemente gab es schon vor HTML5. Zum Beispiel bescheiben die Elemente <img> oder <table> den Inhalt.

Im Gegensatz dazu sagen zum Beispiel die Elemente <div> oder <span> nichts über deren Inhalt aus. Um DIV-Elemente zur Strukturierung einsetzen zu können, wurden sie vor HTML5 z.B. mit IDs (#) oder Klassen (class) näher bestimmt. (Beispiel: <div id="footer">

Die neuen semantischen Elemente in HTML5 und ihr Einsatz

Anstelle der Definition von div-Elementen mit IDs wie header, footer, usw. kennt HTML5 neue Elemente

Das HTML5 Element <section>

<section> definiert einen Abschnitt (section). In der W3C-HTML5-Dokumentation wird section so beschrieben:

Ein Abschnitt ist eine thematische Gruppierung mit einem eigenen Kopf. Eine Website kann in Abschnitte geteilt werden für Einführung (introduction), Inhalt (content), Kontaktinformationen (contact)

Beispiel

<section>
<h1>Überschrift</h1>
<p>In diesem Abschnitt geht es um...</p>
</section>

HTML5 Element <article>

Ein Artikel ist eine unabhängige, abgeschlossene, zusammenhängende inhaltliche Einheit. Ein Artikel benötigt zum Verständnis nicht den Rest der Website sondern kann unabhängig davon gelesen und verstanden werden.

Beispiele für eigenständige Artikel:

Beispiel

<article>
<h1>Gruselett</h1>
<p>Der Flügelflagel gaustert<br />

Durchs Wiruwaruwolz.</p>

<p>Die wilde Fingur plaustert<br />

Und grausig gutzt der Golz.</p>

<p>Christian Morgenstern</p>
</article>

Verschachtelung semantischer Elemente

Es gibt keine Festlegung über die Hierarche der Elemente <article> und <section>. Beides ist möglich. <article>-Elemente können sich innerhalb von <section>-Elementen befinden. Aber es können sich in einem <article>-Element auch <article>-Elemente enthalten.

Im HTML5 Standard ist das <article>-Element definiert als völlig selbständiger Block verwandter Elemente, das<section> Element als Block verwandter Elemente.

HTML5 <header> Element

Das <header>-Element steht für den Kopfbereich eines Dokumentes oder eines Abschnittes und sollte als Container für den Einstiegsinhalt genutzt werden.

Ein Dokument kann mehrere <header>-Elemente enthalten.

Hier ein Beispiel für ein <header>Element in einem Artikel

Beispiel

<article>
<header>
<h1>Backen macht glücklich</h1>
<p>Unser Slogan: life is what you bake it</p>
</header>
<p> Jeder ist seines Glückes Bäcker. </p>
</article>

HTML5 <footer> Element

Das <footer>-Element ist für die Fußzeile eines Dokumentes oder eines Abschnittes vorgesehen.

Dort finden sich häufig Kontaktmöglichkeiten, Copyrightvermerke, Nutzungsbedingungen, und ähnliches.

In einem Dokument können mehrere <footer>-Elemente enthalten sein.

Example

<footer>
<p>Erstellt von: Emma Müller</p>
<p>Kontakt-Email: <a href="mailto:info@mail.de">
emma@mueller.de</a>.</p>
</footer>

HTML5 <nav> Element

Das <nav>-Element definiert einen Navigationsbereich mit Links, die der Navigation in einem Dokument dienen.

HTML5 <aside> Element

Das <aside>-Element definiert Inhalt in Nebenbereichen einer Seite zum Beispiel einer Sidebar, die in einem inhaltlichen Verhältnis zum Hauptinhalt steht.

HTML5 <figure> und <figcaption> Elemente

Bilder und Bildbeschreibungen können mit dem <figure>-Element gruppiert werden.

Beispiel

<figure>
<img src="hefezopf.jpg" alt="Hefezopf, german yeastbread">
<figcaption>Abb.1 Hefezopf / german yeastbread</figcaption>
</figure>

Das <img>-Element definiert das Bild, das <figcaption>-Element definiert die Bildunterschrift.

Die semantischen HTML-Elemente vereinfachen die Suche

In HTML4 war semantische Auszeichnung der Systematik jedes einzelnen Webseitengestalter überlassen. Viele haben ihre eigenen spezifischen Begriffe für header, footer, container usw. erfunden.

Für Suchmaschinen und Vorleseprogramme war es daher unmöglich, immer die richtige Information zu finden. Die einheitlichen Elemente von HTML5 erleichtern diese Aufgabe.

In Übereinstimmung mit dem W3C ermöglicht semantische Auszeichnung die Datennutzung unabhängig von Programmen, Gruppierungen und Organisationen.


stellaplan Verlag | Johannes Bucka. Diese Anleitung steht unter Creative Commons Lizenz mit folgenden Merkmalen: Namensnennung | Keine kommerzielle Nutzung | Weitergabe unter gleichen Bedingungen