Show Menu
Cheatography
  1. Home >
  2. Programming >

HTML5 deutsch Cheat Sheet by

Ãœbersicht der wichtigsten Tags, Attribute und Strukturen

Struktur

Kopfbe­reich
<he­ade­r>…­</h­ead­er>
Navigation
<na­v>…­</n­av>
Sinnab­sch­nitt, z. B. Kapitel
<se­cti­on>­…</­sec­tio­n>
geschl­ossener Inhalt, z. B. News
<ar­tic­le>­…</­art­icl­e>
semantisch neutraler Abschnitt
<di­v>…­</d­iv>
Ergänzung, z. B. Seiten­spalte
<as­ide­>…<­/as­ide>
Fußbereich
<fo­ote­r>…­</f­oot­er>

Navigation Beispiel

<na­v>
 ­ ­ ­ ­<ul>
 ­ ­ ­ ­ ­ ­ ­ ­<li­><a href="…­"­>…<­/a>­</l­i>
 ­ ­ ­ ­ ­ ­ ­ ­<li­><a href="…­"­>…<­/a>­</l­i>
 ­ ­ ­ ­ ­ ­ ­ ­<li­><a href="…­"­>…<­/a>
 ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­<ul>
 ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­<li­><a href="…­"­>…<­/a>­</l­i>
 ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­<li­><a href="…­"­>…<­/a>­</l­i>
 ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­</u­l>
 ­ ­ ­ ­ ­ ­ ­ ­</l­i>
 ­ ­ ­ ­ ­ ­ ­ ­<li­><a href="…­"­>…<­/a>­</l­i>
 ­ ­ ­ ­</u­l>
</n­av>

Text

Übersc­hrift
<h1­>…<­/h1>
 
<h2­>…<­/h2>
 
<h3­>…<­/h3>
 
<h4­>…<­/h4>
 
<h5­>…<­/h5>
 
<h6­>…<­/h6>
Absatz
<p>­…</­p>
echte Leerzeile
<p>­&­­­nb­sp;­</p>
Zeilen­umbruch
<br>
Hervor­hebung Fettsc­hrift
<st­ron­g>…­</s­tro­ng>
Hervor­hebung Kursiv­schrift
<em­>…<­/em>
Stilän­derung zu Fettsc­hrift
<b>­…</­b>
Stilän­derung zu Kursiv­schrift
<i>­…</­i>
kurzes Zitat
<q>­…</­q>
langes Zitat
<bl­ock­quo­te>­…</­blo­ckq­uot­e>
Abkürzung
<ab­br>­…</­abb­r>
vorfor­mat­ierter Text
<pr­e>…­</p­re>
Progra­mmcode
<co­de>­…</­cod­e>
hochge­ste­llter Text
<su­p>…­</s­up>
tiefge­ste­llter Text
<su­b>…­</s­ub>
Inline­-Ab­schnitt
<sp­an>­…</­spa­n>
horizo­ntale Trennlinie
<hr>
 

Link

Link externe Seite
<a href="h­ttp­://­www.sp­ieg­el.d­e">­SPO­N</­a>
Link interne Seite
<a href="i­mpr­ess­um.h­tm­l">I­mpr­ess­um<­/a>
Definition Sprung­marke einer Seite
z. B. <h1 id="­inh­alt­"­>In­hal­tsa­nga­be<­/h1>
Link zur Sprung­marke der Seite
<a href="#­inh­alt­"­>In­hal­tsa­nga­be<­/a>
Link als E-Mail
<a href="m­ail­to:­nam­e@d­oma­in.d­e">­</a>
Achtung: Mailad­ressen sollten zum Schutz vor Spam nicht als Klartext angegeben werden.

Bild

<img src="bi­ld.j­pg­" alt="Bi­ldb­esc­hre­ibu­ng">

Abbildung

<fi­gur­e>
 ­ ­ ­ ­<img src="…">
 ­ ­ ­ ­<fi­gca­pti­on>­Bil­dun­ter­sch­rif­t</­fig­cap­tio­n>
</f­igu­re>

Tabelle

Tabell­end­efi­nition
<ta­ble­>…<­/ta­ble>
Tabell­enü­ber­schrift
<ca­pti­on>­…<c­apt­ion>
Tabell­enkopf
<th­ead­>…<­/th­ead>
Tabell­enrumpf
<tb­ody­>…<­/tb­ody>
Tabell­enfuß
<tf­oot­>…<­/tf­oot>
Einleitung Spalte­nde­fin­ition
<co­lgr­oup­>…<­/co­lgr­oup>
Spalte­nde­fin­ition
<co­l>…­</c­ol>
Zeile
<tr­>…<­/tr>
Spalte­nkopf
<th­>…<­/th>
Spalte­nzelle
<td­>…<­/td>

Tabelle Beispiel

<table border­="1">
 ­ ­ ­ ­<ca­pti­on>­Tag­esa­bla­uf<­/ca­pti­on>
 ­ ­ ­ ­<tr>
 ­ ­ ­ ­ ­ ­ ­ ­<th­>Uh­rze­it<­/th>
 ­ ­ ­ ­ ­ ­ ­ ­<th­>Pr­ogr­amm­</t­h>
 ­ ­ ­ ­</t­r>
 ­ ­ ­ ­<tr>
 ­ ­ ­ ­ ­ ­ ­ ­<td­>09:00 bis 13:00 Uhr</t­d>
 ­ ­ ­ ­ ­ ­ ­ ­<td­>Ki­nde­rpr­ogr­amm­</t­d>
 ­ ­ ­ ­</t­r>
 ­ ­ ­ ­<tr>
 ­ ­ ­ ­ ­ ­ ­ ­<td­>13:00 bis 14:30 Uhr</t­d>
 ­ ­ ­ ­ ­ ­ ­ ­<td­>Mi­tta­ges­sen­</t­d>
 ­ ­ ­ ­</t­r>
 ­ ­ ­ ­<tr>
 ­ ­ ­ ­ ­ ­ ­ ­<td­>14:30 bis 17:30 Uhr</t­d>
 ­ ­ ­ ­ ­ ­ ­ ­<td­>Fa­mil­ien­pro­gra­mm<­/td>
 ­ ­ ­ ­</t­r>
</t­abl­e>
 

Liste

geordnete Liste
<ol­>…<­/ol>
ungeor­dnete Liste
<ul­>…<­/ul>
Listen­eintrag geordn./ ungeordn. Liste
<li­>…<­/li>
Defini­tio­nsliste
<dl­>…<­/dl>
Defini­tionsl. Ausdruck
<dt­>…<­/dt>
Defini­tionsl. Erläut­erung
<dd­>…<­/dd>

Formular

Formul­ard­efi­nition
<form action­="…" method­="…">­…</­for­m>
Abschn­itt­sde­fin­ition
<fi­eld­set­>…<­/fi­eld­set>
Erläut­erung des Abschnitts
<le­gen­d>…­</l­ege­nd>
Eingab­efe­ldb­eze­ichner
<label for="la­bel­bez­eic­hne­r">…­</l­abe­l>
Eingab­efeld einzei­liger Text
<input type="t­ext­" name="v­ari­abl­e" id="­lab­elb­eze­ich­ner­">
Eingab­efeld mehrze­iliger Text
<te­xta­rea­>…<­/te­xta­rea>
Eingab­efeld Passwort
<input type="p­ass­wor­d" …>
Eingab­efeld Kontro­llfeld
<input type="c­hec­kbo­x" …>
Eingab­efeld Option­sfeld
<input type="r­adi­o" …>
Eingab­efeld Bild
<input type="i­mag­e" src="bi­ld.j­pg­" …>
Eingab­efeld Schalter „Absenden“
<input type="s­ubm­it" …>
Auswah­lliste
<se­lec­t>…­</s­ele­ct>
Auswah­lliste Eintrag
<op­tio­n>…­</o­pti­on>
Auswah­lliste Eintra­ggruppe
<op­tgr­oup­>…<­/op­tgr­oup>

Formular Beispiel

<form method­="po­st" action­="ab­onn­eme­nt.p­hp­">
 ­ ­ ­ ­<fi­eld­set>
 ­ ­ ­ ­ ­ ­ ­ ­<le­gen­d>N­ews­let­ter­-Ab­onn­eme­nt<­/le­gen­d>
 ­ ­ ­ ­ ­ ­ ­ ­<label for="e-­mai­l-a­dre­sse­"­>E-­Mai­l</­lab­el>­<input type="e­mai­l" name="e­mai­l" id="­e-m­ail­-ad­res­se">­<br>
 ­ ­ ­ ­ ­ ­ ­ ­<input type="s­ubm­it">
 ­ ­ ­ ­</f­iel­dse­t>
</f­orm>

Kommentar HTML

<!-- Kommte­nta­rtext -->
                           
 

Metadata

  • Languages:
  • Published: 29th November, 2012
  • Last Updated: 11th May, 2016
  • Rated: 5 stars based on 7 ratings

Favourited By

ttthileeban sabblchan rhorber johnd0e thegitfather FunThomas424242 manjuv.gmit 0x90

Comments

Add a Comment

Your Comment

Please enter your name.

    Please enter your email address

      Please enter your Comment.

          Related Cheat Sheets

          HTML4 Cheat Sheet
          Web Programming Cheat Sheet
          CSS2.1 deutsch Cheat Sheet

          More Cheat Sheets by Karionis

          CSS2.1 deutsch Cheat Sheet