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:

0x90 manjuv.gmit

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.