Cheatography
https://cheatography.com
Übersicht der wichtigsten Tags, Attribute und Strukturen
StrukturKopfbereich | <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> |
| | LinkLink 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> |
TabelleTabellendefinition | <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> |
| | Listegeordnete 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> |
FormularFormulardefinition | <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
Top
Add a Comment
Related Cheat Sheets
More Cheat Sheets by Karionis