Cheatography
https://cheatography.com
Ãœbersicht der wichtigsten Tags, Attribute und Strukturen
Struktur
Kopfbereich |
<header>…</header> |
Navigation |
<nav>…</nav> |
Sinnabschnitt, z. B. Kapitel |
<section>…</section> |
geschlossener Inhalt, z. B. News |
<article>…</article> |
semantisch neutraler Abschnitt |
<div>…</div> |
Ergänzung, z. B. Seitenspalte |
<aside>…</aside> |
Fußbereich |
<footer>…</footer> |
Navigation Beispiel
<nav>
<ul>
<li><a href="…">…</a></li>
<li><a href="…">…</a></li>
<li><a href="…">…</a>
<ul>
<li><a href="…">…</a></li>
<li><a href="…">…</a></li>
</ul>
</li>
<li><a href="…">…</a></li>
</ul>
</nav> |
Text
Überschrift |
<h1>…</h1> |
|
<h2>…</h2> |
|
<h3>…</h3> |
|
<h4>…</h4> |
|
<h5>…</h5> |
|
<h6>…</h6> |
Absatz |
<p>…</p> |
echte Leerzeile |
<p> </p> |
Zeilenumbruch |
<br> |
Hervorhebung Fettschrift |
<strong>…</strong> |
Hervorhebung Kursivschrift |
<em>…</em> |
Stiländerung zu Fettschrift |
<b>…</b> |
Stiländerung zu Kursivschrift |
<i>…</i> |
kurzes Zitat |
<q>…</q> |
langes Zitat |
<blockquote>…</blockquote> |
Abkürzung |
<abbr>…</abbr> |
vorformatierter Text |
<pre>…</pre> |
Programmcode |
<code>…</code> |
hochgestellter Text |
<sup>…</sup> |
tiefgestellter Text |
<sub>…</sub> |
Inline-Abschnitt |
<span>…</span> |
horizontale Trennlinie |
<hr> |
|
|
Link
Link externe Seite |
<a href="http://www.spiegel.de">SPON</a> |
Link interne Seite |
<a href="impressum.html">Impressum</a> |
Definition Sprungmarke einer Seite |
z. B. <h1 id="inhalt">Inhaltsangabe</h1> |
Link zur Sprungmarke der Seite |
<a href="#inhalt">Inhaltsangabe</a> |
Link als E-Mail |
<a href="mailto:name@domain.de"></a> |
Achtung: Mailadressen sollten zum Schutz vor Spam nicht als Klartext angegeben werden.
Bild
<img src="bild.jpg" alt="Bildbeschreibung"> |
Abbildung
<figure>
<img src="…">
<figcaption>Bildunterschrift</figcaption>
</figure> |
Tabelle
Tabellendefinition |
<table>…</table> |
Tabellenüberschrift |
<caption>…<caption> |
Tabellenkopf |
<thead>…</thead> |
Tabellenrumpf |
<tbody>…</tbody> |
Tabellenfuß |
<tfoot>…</tfoot> |
Einleitung Spaltendefinition |
<colgroup>…</colgroup> |
Spaltendefinition |
<col>…</col> |
Zeile |
<tr>…</tr> |
Spaltenkopf |
<th>…</th> |
Spaltenzelle |
<td>…</td> |
Tabelle Beispiel
<table border="1">
<caption>Tagesablauf</caption>
<tr>
<th>Uhrzeit</th>
<th>Programm</th>
</tr>
<tr>
<td>09:00 bis 13:00 Uhr</td>
<td>Kinderprogramm</td>
</tr>
<tr>
<td>13:00 bis 14:30 Uhr</td>
<td>Mittagessen</td>
</tr>
<tr>
<td>14:30 bis 17:30 Uhr</td>
<td>Familienprogramm</td>
</tr>
</table> |
|
|
Liste
geordnete Liste |
<ol>…</ol> |
ungeordnete Liste |
<ul>…</ul> |
Listeneintrag geordn./ ungeordn. Liste |
<li>…</li> |
Definitionsliste |
<dl>…</dl> |
Definitionsl. Ausdruck |
<dt>…</dt> |
Definitionsl. Erläuterung |
<dd>…</dd> |
Formular
Formulardefinition |
<form action="…" method="…">…</form> |
Abschnittsdefinition |
<fieldset>…</fieldset> |
Erläuterung des Abschnitts |
<legend>…</legend> |
Eingabefeldbezeichner |
<label for="labelbezeichner">…</label> |
Eingabefeld einzeiliger Text |
<input type="text" name="variable" id="labelbezeichner"> |
Eingabefeld mehrzeiliger Text |
<textarea>…</textarea> |
Eingabefeld Passwort |
<input type="password" …> |
Eingabefeld Kontrollfeld |
<input type="checkbox" …> |
Eingabefeld Optionsfeld |
<input type="radio" …> |
Eingabefeld Bild |
<input type="image" src="bild.jpg" …> |
Eingabefeld Schalter „Absenden“ |
<input type="submit" …> |
Auswahlliste |
<select>…</select> |
Auswahlliste Eintrag |
<option>…</option> |
Auswahlliste Eintraggruppe |
<optgroup>…</optgroup> |
Formular Beispiel
<form method="post" action="abonnement.php">
<fieldset>
<legend>Newsletter-Abonnement</legend>
<label for="e-mail-adresse">E-Mail</label><input type="email" name="email" id="e-mail-adresse"><br>
<input type="submit">
</fieldset>
</form> |
Kommentar HTML
<!-- Kommtentartext --> |
|
Created By
Metadata
Favourited By
Comments
crobert, 10:00 1 Sep 18
Top
Add a Comment
Related Cheat Sheets
More Cheat Sheets by Karionis