Show Menu

HTML5 deutsch Cheat Sheet by Karionis

Ãœ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 Seitez. 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>

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

Share This Cheat Sheet!

Favourited by 2 Members:

manjuv.gmit 0x90

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.