EMZETT.Überschriften
Es gibt sechs Ebenen: <h1> (wichtigste) bis <h6>. Sie gliedern die Seite wie ein Inhaltsverzeichnis.
Ergebnis
Absätze und Zeilenumbrüche
Ergebnis
Hervorhebungen mit Bedeutung
| Element | Bedeutung | Standard-Darstellung |
|---|---|---|
<strong> | wichtig | fett |
<em> | betont | kursiv |
<mark> | markiert/hervorgehoben | gelber Hintergrund |
<small> | Kleingedrucktes | kleiner |
<del> / <ins> | gelöscht / eingefügt | durchgestrichen / unterstrichen |
<sub> / <sup> | tiefgestellt / hochgestellt | H<sub>2</sub>O, x<sup>2</sup> |
<abbr title="..."> | Abkürzung | gepunktet unterstrichen |
<q> | kurzes Zitat | mit Anführungszeichen |
<cite> | Titel eines Werks | kursiv |
<time datetime="..."> | Datum/Uhrzeit (maschinenlesbar) | normal |
Ergebnis
<b> (fett) und <i> (kursiv) gibt es auch, aber ohne besondere Bedeutung; sie sind nur für Stil gedacht, den man besser mit CSS macht. Nutze <strong> und <em>.
Zitate und Code
Ergebnis
<code>: Computercode im Text<pre>: erhält Leerzeichen und Zeilenumbrüche (für Codeblöcke zusammen mit<code>)<kbd>: Tastatureingabe,<samp>: Programmausgabe,<var>: Variable
Sonderzeichen (Entities)
Die Zeichen <, > und & haben in HTML eine Bedeutung. Willst du sie anzeigen, schreibst du Entities:
| Zeichen | Entity |
|---|---|
< | < |
> | > |
& | & |
" | " |
| geschütztes Leerzeichen | |
| © ® ™ | © ® ™ |
| € | € |
Ergebnis
Mit UTF-8 kannst du Zeichen wie ä, ß, €, © auch direkt tippen.
Text ausrichten und umbrechen
Das macht CSS (text-align, word-break, hyphens). Ein ­ markiert eine mögliche Trennstelle, <wbr> eine mögliche Umbruchstelle in langen Wörtern oder URLs.
Merke
<h1>bis<h6>gliedern; nur eine<h1>, keine Ebenen überspringen<p>für Absätze,<br>für Zeilenumbruch,<hr>als Trennlinie<strong>(wichtig) und<em>(betont) tragen Bedeutung,<b>/<i>nur Stil<code>,<pre>,<kbd>,<q>,<blockquote>,<time>für spezielle Inhalte- Sonderzeichen als Entities:
<,>,&,
Aufgabe
Schreibe einen kurzen Text über dein Lieblingsbuch mit Überschrift, zwei Absätzen, einem Zitat, einer hervorgehobenen Stelle und einem Datum mit <time>.