Show Menu

HTML5 deutsch Cheat Sheet by

Ãœbersicht der wichtigsten Tags, Attribute und Strukturen
html     web     beginner     html5     markup     tags     internet     webdevelopment

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­[email protected]­oma­in.d­e">­</a>
Acht­ung: 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 -->

Download the HTML5 deutsch Cheat Sheet

2 Pages
//media.cheatography.com/storage/thumb/karionis_html5-deutsch.750.jpg

PDF (recommended)

Alternative Downloads

Share This Cheat Sheet!

 

Comments

No comments yet. Add yours below!

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