HTML 4 |
HTML 5 |
.darkblue[syntaktische Aufteilung] in Block- und Inline-Elemente
|
Ablösung und Erweiterung durch eine an .darkblue[semantische]n Überlegungen orientierte .darkblue[Aufteilung]
|
Viele .darkblue[(Block-) Elemente dienen der Layout-Gestaltung]1,
z.B.: .inline-code.no-text-indent.small-font22[```html
|
.darkblue[Verzicht auf viele dieser (Block-) Elemente]1
|
Aus Sicht des .darkblue[Web-Browser]s gilt ungefähr die folgende Entsprechung2:
|
.darkblue[Block-Elemente]
|
.darkblue[~ Flow-Content]
|
.darkblue[Inline-Elemente]
|
.darkblue[~ Phrasing-Content]
|
]
---
# .darkblue[Universalattribute]
.condensed[
- .darkblue[in allen] HTML-Elementen .darkblue[verwendbar]
- .darkblue[Allgemeine]
.small-font.padding-bottom[
Auszeichnung |
Bemerkung |
Beispiel |
Darstellung |
.inline-code[```html
… ```]
|
Absatz |
.small-font[```html
Ein Fülltext…
Die Mitte…
Das Ende…```] |
Ein Fülltext…
Die Mitte…
Das Ende…
|
.inline-code[```html
```]
|
Neue Zeile |
.small-font[```html
Ein Fülltext…
Die Mitte…
Das Ende…```] |
Ein Fülltext…
Die Mitte…
Das Ende…
|
.inline-code[```html
… ```]
|
Berücksichtigung von Leerzeichen und nichtproportionale Schriftart (feste Zeichenbreite) |
.small-font[```html
Ein Fülltext…
Die Mitte… ```] |
Ein Fülltext…
Die Mitte…
|
.inline-code[```html
…```]
.inline-code[```html
…```]
…
.inline-code[```html
…```]
|
Überschriften mit .monospace[font-size(h1) > … > font-size(h4) > … > font-size(h6)]
und .monospace[font-size(h4) = default]
|
.small-font[```html
Ü1
Ü2
Ü3
Ü4
Ü5
Ü6```] |
|
]
---
# .darkblue[Strukturelemente] (HTML 5)
.reference[
Für einen Effekt in der Darstellung Angabe zusätzlicher Style-Informationen erforderlich
]
.condensed.small-font[
Auszeichnung |
Beschreibung |
.inline-code[```html
```]
|
Kopfinformationen einer Website oder eines Artikels
|
.inline-code[```html
```]
|
Fußzeile einer Website oder eines Artikels
|
.inline-code[```html
```]
|
Navigationsmenü oder andere Navigationsmöglichkeiten
|
.inline-code[```html
…```]
|
eigenständiger Inhalt, ggf. mit eigenem .inline-code[```html
```] und .inline-code[```html
|
.inline-code[```html
```]
|
Gruppierung, typisch mit Überschrift für Inhalte in .inline-code[```html
```]
|
.inline-code[```html
```]
|
Gruppierung von verwandter Information mit Bezug zum Hauptinhalt
|
]
---
# Grundlegende