Die ultimative Übersicht über alle vorgesehenen Tags mit Beschreibung und Verlinkung auf den Orginal-Referenztext sowie selfhtml5 Links zur Eräuterung für einige so gekennzeichnete Tags.
|
html
|
||||||||
<head>Erstes Element des HTML Documents. Enthält die Dokument-Metadaten. head
|
Text Elemente | Gruppierung | ||||||
|
title
|
a
|
span
|
<wbr>Opportunity for a line break. wbr
|
code
|
hr
|
br
|
||
<meta>Document metadata that can’t be represented with other elements. meta
|
dfn
|
em
|
<i>Text in a alternate voice or mood, such as a technical term. i
|
small
|
p
|
div
|
blockquote
|
|
|
base
|
abbr
|
time
|
<b>Stylistically separated text of equal importance, such as a product name. b
|
strong
|
figcaption
|
ol
|
dl
|
|
|
link
|
q
|
var
|
sub
|
mark
|
<figure>Contains elements related to single concept, such as an illustration or code example. figure
|
ul
|
dt
|
|
|
style
|
cite
|
samp
|
sup
|
<ruby>Contains text with annotations, such as pronounciation hints. Commonly used in East Asian text. ruby
|
pre
|
li
|
dd
|
|
|
script
|
<rp>Contains semantically meaningless markup for browsers that don’t understand ruby annotations. rp
|
rt
|
ins
|
del
|
||||
<noscript>Contains elements that are part of the document only if scripting is disabled. noscript
|
kbd
|
bdo
|
||||||
| Formulare | Dokument-Semantik |
col
|
table
|
|||
|
fieldset
|
form
|
body
|
h1
|
<section>Contains of elements grouped by theme, for example a chapter or section
|
colgroup
|
tr
|
|
meter
|
select
|
<aside>Content related to surrounding elements that doesn’t belong inline, aside
|
h2
|
<header>Navigation or introductory elements for the current section. header
|
caption
|
td
|
|
legend
|
optgroup
|
address
|
h3
|
nav
|
menu
|
th
|
|
label
|
option
|
datalist
|
h4
|
<article>Section of the page content, such as a blog or forum post. article
|
<command>Command the user can perform, such as publishing an article. command
|
tbody
|
|
input
|
output
|
keygen
|
h5
|
footer
|
summary
|
thead
|
|
textarea
|
button
|
progress
|
h6
|
<hgroup>Collection of headings for the current section. The highest ranked hgroup
|
<details>Contains additional information, such as the contents of an accordian details
|
tfoot
|
-
Root Elemente
-
Text Formatierung
-
Formulare
-
Tabellen
-
Metadata und Scripting
-
Gruppierung / Semantik
-
Document-Semantik
-
Interactive Elemente
Dank geht an Josh Duck für die Vorlage zum Table
Schöne Übersicht. Gefällt mir sehr gut.
Jedoch sind die interaktiven Element kaum zu sehen. Warum habt ihr hier ebenfalls grau verwendet?
Pingback: Übersicht über HTML5-Tags « HTML5Tutorial
Sehr nett.
Hab ich gebookmarked.
Eventuell kann bei einem mouse-out event die box langsam weg-faden?
Wie wärs mit JQuery??
Auf den iPad sind sie gar nicht zu sehen. Schwarz auf schwarz
Die „HTML5 Tag Systematik“ habe ich im Firefox, neueste Version, aufgerufen. Sie ist klasse, ein super anschauliches Sahnehäubchen zum Lernen der Tags:-) !
Einige Farbgruppen, die von „Tabellen“ und „Gruppierung“ sind jedoch identisch. Warum? Die sollten eher prägnant voneinander abgegrenzt werden.
Es lohnt sich, die Kästen auseinander zu schneiden und damit, kreativ lernend spielen:
1. Aufgabe beschreiben, z. B. einfaches email-Formular erstellen,
2. alle dafür notwendigen Elemente (Kästen) zusammenstellen,
3. Reihenfolge bilden mit einzelnen „Steinen“,
4. Emailformular abarbeiten
5. Steps prüfen
6. wenn es funktioniert, dann Aufgabe und Reihenfolge im „inneren HTML5-Film“ sichern.
Wie wäre es denn, aus den „HTML5 Tag Systematik“ ein wirkliches, „handfestes“ Spiel zu machen, mit HTML5-Spielsteinen? Die Zukunft für HTML5 hat doch erst begonnen …
chriss
Guten Tag zusammen,
ich möchte hier noch etwas zur Sicherheit beitragen. Mittels PHP kann man Serverseitig Zeichen die einen z.B. „… Tag ermöglichen sperren oder mit Slashes versehen. Wenn sonst irgendwo dieser Code bei der Anzeige ausgeführt wird, könnte es negative Folgen haben. Alles was jQuery und Javascript, aber auch die Formularfelder von HTML 5 betreffen, so sind diese mit diesen Clientseitigen Codes ausgestattet, HTML 5 nutzt (JS)jQuery. Vermeintlich sicher, aber trotzdem manipulierbar, vor allem bei GET Versand. Jeder Apache Server unterstützt ja zum Glück das gute alte PHP.
P.S. habe momentan nur eine statische Ansicht auf meiner Domain. Sorry
Vielen dank das du dir die Arbeit gemacht hast und das alles zusammen gefasst hast ist sehr hilfreich und wird beim nächsten projekt sicher sehr hilfreich sein.
ich kann mich meinen vorrednern nur anschließen das das Grau nicht zu unterscheiden ist. entweder text weis machen oder ander hintergrundfarbe wäre gut.
gut wäre auch noch in dem popup zu schreibeon welche Browser den tag unerstützen.
Gruß aus München
Vielen Dank. Habe ich in meinen Favoriten. HTML5 ist echt schon Klasse.
Grüße aus Berlin
Anfänger können hiermit sehr gut und schnell HTML5 lernen! Vielen dank für diesen Post!
Die Links zu W3Schools.com haben sich geändert, anstatt z.B.
http://www.w3schools.com/html5/tag_q.asp
-> 404 – The page cannot be found
muss es jetzt heißen
http://www.w3schools.com/tags/tag_q.asp
Ansonsten Klasse Übersicht !!!
Schade, etwas zu iPhone-/Android – lastig, diese Seite. Das verstehe ich vor dem Hintergrund umso weniger, da HTML5-Programme möglichst plattformunabhängig sein sollten. Auffällig auch, dass Windows Phone 8 unter den Schlagwörtern nicht zu finden ist, wohl aber Android und iPhone bzw. iPod.
Auf die Anleitung zum Programmieren von iPhone Apps sollte zugunsten einer Anleitung zum Programmieren von HTML5 Apps verzichtet werden.
da hast du grundsätzlich auf jeden Fall recht.
Allerdings ist es auch so, dass man einige browser/betriebssystemspezifische Tags einfügen muss, um das „look and feel“ der web app an das jeweilige System anzupassen. Du kannst aber mit den hier dargestellten Mitteln ebenso eine Web App erstellen, die auf einem Windows Phone Endgerät funktioniert, z.B. die lokale Datenspeicherung