HTML5 Tag Systematik

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>

Document root element.

html

<head>

Erstes Element des HTML Documents. Enthält die Dokument-Metadaten.

head
Text Elemente Gruppierung

<title>

Document Titel.

title

<span>

Container with no semantic meaning.

span

<wbr>

Opportunity for a line break.

wbr

<code>

Fragment of code.

code

<hr>

Thematic break within a paragraph.

hr
br

<meta>

Document metadata that can’t be represented with other elements.

meta

<dfn>

Term being defined by the parent section.

dfn

<em>

Text that should be emphasised.

em

<i>

Text in a alternate voice or mood, such as a technical term.

i

<small>

An aside, such as fine print.

small

<p>

Paragraph content.

p

<div>

Container with no semantic meaning.

div

<blockquote>

Quote from another source.

blockquote

<base>

Specifies URL which non-absolute URLs are relative to.

base

<abbr>

Abbreviation or acronym.

abbr

<time>

Time defined in a machine readable format.

time

<b>

Stylistically separated text of equal importance, such as a product name.

b

<strong>

Text that is important.

strong

<figcaption>

Caption for a figure.

figcaption

<ol>

Ordered list.

ol

<dl>

List of term-description pairs.

dl

<link>

Other resources related to the document.

link
q

<var>

Mathematical or programming variable.

var

<sub>

Subscript text.

sub

<mark>

Text highlighted for referencing elsewhere.

mark

<figure>

Contains elements related to single concept, such as an illustration or code example.

figure

<ul>

Unordered list.

ul

<dt>

Term which will be described.

dt

<style>

Styling defined inline data.

style

<cite>

Title of a referenced piece of work.

cite

<samp>

Sample output of a program.

samp

<sup>

Superscript text.

sup

<ruby>

Contains text with annotations, such as pronounciation hints. Commonly used in East Asian text.

ruby

<pre>

Text that is preformatted in the HTML code.

pre
li

<dd>

Description for the preceeding term.

dd

<script>

Inline or linked client side scripts.

script

<rp>

Contains semantically meaningless markup for browsers that don’t understand ruby annotations.

rp

<rt>

Annotation of preceeding text.

rt

<ins>

Text that has been inserted during document editing.

ins

<del>

Text that has been removed during document editing.

del

<noscript>

Contains elements that are part of the document only if scripting is disabled.

noscript

<kbd>

Example input (usually keyboard) for a program.

kbd

<bdo>

Defines directional formatting for content.

bdo
Formulare Dokument-Semantik

<col>

Columns in a table.

col

<table>

Table of multi-dimensional data.

table

<fieldset>

Set of form controls grouped by theme.

fieldset

<body>

Document content.

body

<h1>

Heading for the current section.

h1

<section>

Contains of elements grouped by theme, for example a chapter or
tab box.

section

<colgroup>

Defines a group of columns in a table.

colgroup

<tr>

A row of cells.

tr

<meter>

Control for entering a numeric value in a known range.

meter

<select>

Control for selecting from multiple options.

select

<aside>

Content related to surrounding elements that doesn’t belong inline,
such as a advertising or quotes.

aside

<h2>

Heading for the current section.

h2

<header>

Navigation or introductory elements for the current section.

header

<caption>

Title of a table.

caption
td

<legend>

Define a name for a fieldset.

legend

<optgroup>

Group of option.

optgroup

<address>

Contact information for the current article.

address

<h3>

Heading for the current section.

h3

<nav>

Contains a collection of links.

nav

<menu>

Set of commands.

menu

<th>

Table heading.

th

<label>

Caption for a form control.

label

<option>

Single option within a select control.

option

<datalist>

Define sets of options.

datalist

<h4>

Heading for the current section.

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>

Contains rows that hold the table’s data.

tbody

<input>

Generic form input.

input

<output>

Contains the results of a calculation.

output

<keygen>

Generates private-public key pairs.

keygen

<h5>

Heading for the current section.

h5

<footer>

Footer of the current section.

footer

<summary>

Caption of a details element.

summary

<thead>

Contains rows with table headings.

thead

<textarea>

Multiline free-form text input.

textarea

<button>

A button.

button

<progress>

Control for displaying progress of a task.

progress

<h6>

Heading for the current section.

h6

<hgroup>

Collection of headings for the current section. The highest ranked
heading repesents the group in the document outline.

hgroup

<details>

Contains additional information, such as the contents of an accordian
view.

details

<tfoot>

Contains rows with summary of data.

tfoot
img

<area>

Hyperlink area in an image map.

area

<map>

Image map for adding hyperlinks to parts of an image.

map

<embed>

Reference to non-HTML content.

embed

<object>

External resource such as an image, iframe or plugin.

object

<param>

Parameters for the parent object.

param

<source>

Alternative sources for parent video or audio elements.

source

<iframe>

Nested browser frame.

iframe

<canvas>

Bitmap which is editable by client side scripts.

canvas

<track>

Specifies external timing track for media elements.

This element is still being drafted.

track*

<audio>

Audio file.

audio
video

<device>

Allows scripts to access devices such as a webcam.

This element is still being drafted.

device*
  • Root Elemente

  • Text Formatierung

  • Formulare

  • Tabellen

  • Metadata und Scripting

  • Gruppierung / Semantik

  • Document-Semantik

  • Interactive Elemente

  • Embedding Tags


Dank geht an Josh Duck für die Vorlage zum Table

12 Antworten auf HTML5 Tag Systematik

  1. Ben sagt:

    Schöne Übersicht. Gefällt mir sehr gut.

    Jedoch sind die interaktiven Element kaum zu sehen. Warum habt ihr hier ebenfalls grau verwendet?

  2. Pingback: Übersicht über HTML5-Tags « HTML5Tutorial

  3. mark sagt:

    Sehr nett.

    Hab ich gebookmarked.

    Eventuell kann bei einem mouse-out event die box langsam weg-faden?

  4. Burro sagt:

    Auf den iPad sind sie gar nicht zu sehen. Schwarz auf schwarz

  5. chriss sagt:

    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

  6. 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

  7. Christian sagt:

    Vielen Dank. Habe ich in meinen Favoriten. HTML5 ist echt schon Klasse.

    Grüße aus Berlin

  8. Webdesign sagt:

    Anfänger können hiermit sehr gut und schnell HTML5 lernen! Vielen dank für diesen Post!

  9. Dirk Zöttl sagt:

    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 !!!

  10. Ahoiiiiiiii sagt:

    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.

    • html5-admin sagt:

      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

Schreib einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *