Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

HTML5 für Webdesigner

Kleinere Änderungen in HTML5

Testen Sie unsere 2016 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Dieser Film zeigt zwei nützliche Quellen und stellt die wichtigsten Neuerungen vor - die betreffen unter anderem Links, Blockelemente, Kleingedrucktes und Suchergebnisse.

Transkript

Es gibt natürlich noch jede Menge andere Änderungen in HTML5 und da niemand Lust hat, durch die gesamte Spezifikation hindurch das alles zu gucken, wo sich jetzt wieder eine Kleinigkeit verändert hat, möchte ich Ihnen in diesem Film zwei Links vorstellen und die meiner Ansicht nach wichtigsten Neuerungen, die eher als Kleinigkeiten durchgehen. Link Nr.1 ist hier beim w3.org/TR/html5-diff, da reicht es schon, wenn man so ankommt. "Differences from HTML 4", hier der Latest Editor's Draft, da man kann die neuesten Entwicklungen, die neueste Version dieses Dokumentes finden. Das hier ist vom 28. Mai, der Latest Draft ist von Ende November oder so etwas. Aber für den Einstieg reicht das hier. Editiert wird das von Simon Peters von Opera und ins Leben gerufen hat das Anne Van Kesteren aus den Niederlanden. Besonders interessant auf dieser Seite - das ist eine lange Seite, wie Sie hier sehen können - ist Abschnitt Nr.3 "Language". Da klicke ich mich gleich mal hin. Hier sehen Sie "Neue Elemente": Section, Article, Main, Aside, AgeGroup - gibt es offiziell nicht mehr beim B3C Header. Footer, Null Figure, FigCaption - inzwischen großenteils alte Bekannte für Sie aus diesem Videotraining. Etwas weiter unten - Ich rolle mal ein bisschen runter - gibt es neue Attribute. Und hier kommen jetzt "Changed Elements", also kleinere Änderungen, die an bestehenden Elementen gemacht worden sind. Auch die will ich jetzt nicht alle vorstellen, aber das ist auf dieser einen Seite ganz gut zusammengefasst. Auf dieser Seite habe ich z.B. - mehr oder weniger durch Zufall - gefunden, dass "tfoot" jetzt auch am Ende einer Tabelle stehen darf. Sie kennen das vielleicht "table", da gibt es "thead", "tbody" und "tfoot", und bis HTML4 war die Reihenfolge immer anatomisch ungewöhnlich, der "foot" musste nämlich vor dem "body" stehen. Inzwischen ist das erlaubt, dass "tfoot" am Ende steht. Also die Reihenfolge "thead", "tbody", "tfoot" ist tatsächlich erlaubt. Das findet man dann hier in so einem kleinen Satz: "The table element now allows the 'tfoot' element to be the last child". Eine weitere Seite, die durchaus interessant ist, ist die Auflistung der HTML-Elemente alphabetisch von A bis - Na ja, Z nicht ganz, aber es geht in die Richtung. Weil in dieser Auflistung haben die Elemente in lila hier das Attribut "changed" dahinter und in gelb hier "new" dahinter. Das heißt: Hier alles auf einen Blick, was sich wirklich geändert hat. Und gleich der Erste ist natürlich nicht uninteressant: "A" für Hyperlinks braucht man ab und zu mal, und hier gibt es ein "changed" dahinter, also gehen wir ganz kurz mal eben gucken. Ich klicke hier einfach drauf: "A Hyperlink was changed". Und der erste "change" ist, dass das Target-Attribut wieder erlaubt ist. Das hat man früher immer mit einem schlechten Gewissen benutzt, um einen Link in einem neuen Fenster zu öffnen. Und das ist jetzt offiziell erlaubt. Also, man muss kein schlechtes Gewissen mehr haben. Ich nehme immer "Target_Blank", aber das spielt eigentlich gar nicht so die Rolle. Zweite große Änderung ist, dass hier bei den Beispielen - das steht hier auch irgendwo mittendrin: "Previous versions restrict the a element only to frazing content", das ist das, was man früher Inline-Elemente nannte, und "A" darf jetzt auch um Flow Content, also um Blockelemente, stehen. Das heißt, das A-Element können Sie jetzt um einen kompletten Teaser herumlegen. Das ist hier unten ein Beispiel: Hier ist ein Link, und in diesem Link ist ein Absatz, und das ist erlaubt! Das ist superpraktisch, aber etwas ungewohnt, wie der folgende Tweet vom Dezember 2012 zeigt. Da habe ich das das erste Mal gemacht und fand so besonders, dass ich da gleich einen Tweet drüber losgeschickt habe: "Gerade das erste Mal einen Link um ein Diff gepackt. Ist ja praktisch, aber fühlt sich komisch an". Und da bin nicht alleine. Anfangs habe ich mir innerlich die Hände waschen müssen, finde es mittlerweile gut. Also Gewohnheiten kann man ändern. Kurzzusammenfassung für diesen Film: Das Dokument "Differences from HTML4" finden Sie unter dieser Adresse. Besonders interessant sind die Abschnitte 3 "Language" und 4 "Content Model", da geht es um die Unterschiede zwischen "Inline Block" und wie das jetzt alles heißt. "HTML-Elements alphabetisch" finden Sie unter dieser Adresse und dort haben die Elemente farbliche Markierung wie "changed" oder "new". Die wichtigsten Unterschiede hier: "A" hatte ich bereits erwähnt - Hyperlinks und Blockelemente sind erlaubt, Target Blank ist erlaubt. "B" - wer A sagt, muss auch B sagen - "B" hebt jetzt Text hervor. Also "B" war früher immer so ein bisschen verpönt, weil es gesagt hat: "Drucke es fett". Das macht es immer noch, aber es ist semantisch neu gedeutet. Es hebt den Text hervor, der wird aber nicht wichtiger. Wenn er wichtig sein soll, müssen Sie "Strong" nehmen. Optisch ist es dasselbe. Beispiel ist ein einleitender Absatz am Anfang eines Artikels, der zwar fett gedruckt wird, deshalb aber nicht wichtiger ist als der Rest. Dann haben wir "I" - "C", "D" und "E" lassen wir weg. Dann kommen wir zum "I": Hebt Text kursiv hervor, verändert aber die Bedeutung nicht. Die Standardbeispiele: Begriffe, Namen von Schiffen wie "Titanic" oder ähnliches, das wird mit "I" ausgezeichnet. "I" steht also nicht für "Icon". "Mark" ist neu, ist ein Textmarker mit gelbem Hintergrund. Typisches Beispiel: Suchbegriffe in Suchergebnissen, die interaktiv hervorgehoben werden. Und "Small" haben wir - "Small" war früher auch verpönt, weil es immer nur hieß: "Mache die Schrift klein". Es steht jetzt offiziell für das sprichwörtliche "Kleingedruckte" und ist ideal für Bereiche mit Links, Impressum usw. Das alte Element "Small" darf man also auch mit gutem Gewissen nutzen. "HR" kennzeichnet einen thematischen Einschnitt - "HR" ist die "Horizontal Ruler", die waagerechte Linie. Und auch den darf man nutzen. Man hat immer noch eine Linie im Browser, aber die hat jetzt eine semantische Bedeutung. Liegt irgendwo zwischen normalem Fließtext und neuem Abschnitt. Wenn der Abschnitt also nicht groß genug ist für eine neue Section, aber trotzdem irgendwo wunderwas dabei sein soll, irgendwo eine Trennung sichtbar sein soll, dann kann man "HR" nehmen. Beispiele sind in Romanen und Erzählungen - so zwischen zwei Absätzen, so ein bisschen mehr Zwischenraum und so drei Sternchen oder so eine geschwungene Linie dazwischen. Für so etwas würde man jetzt "HR" nehmen. Soviel zu den Änderungen, zu den kleineren Änderungen, in HTML5.

HTML5 für Webdesigner

Lernen Sie, wie Sie in HTML5 Layoutbereiche strukturieren, die richtigen Elemente für Inhalte benutzen, Formulareingaben optimieren und Multimedia ohne Plug-in einbauen.

3 Std. 14 min (39 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!