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

<a>

Hyperlink.

a

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

Line break.

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>

Quoted text.

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>

List item.

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

<form>

Form.

form

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

Table cell.

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>

An image.

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>

Video.

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

5 Antworten auf HTML5 Tag Systematik

  1. Ben sagt:
    28. März 2011 um 12:33

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

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

    Antworten

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

  3. mark sagt:
    10. Dezember 2011 um 18:44

    Sehr nett.

    Hab ich gebookmarked.

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

    Antworten
  4. Burro sagt:
    11. Dezember 2011 um 00:38

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

    Antworten
  5. chriss sagt:
    28. Januar 2012 um 05:26

    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

    Antworten

Hinterlasse eine Antwort

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

*

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>