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