HTML-Elemente: Block vs. Inline

0:00 Intro
2:00 Word Wrap / Zeilenumbruch in VSCode aktivieren
2:50 body, h1, hr, p sind wie die meisten Elemente vom Typ Block
5:20 In den Developer Tools die Elementart überprüfen
8:30 h2 und Liste mit Aufzählungszeichen (ul / unordered list) einfügen und Listenelemente (li / list item) einfügen
10:30 Bild (img) einfügen
14:15 Bilder sind Inline-Elemente
15:00 Bildbreite mit style=“width: 100%“ korrigieren
17:45 Inlineelement strong für deutliche Hervorhebung (standardmäßige Darstellung: bold)
18:45 Inlineelement em für zurückhaltende Hervorhebung (standardmäßige Darstellung: italic)
20:35 Inlineelement a (anchor für Link)
24:15 Outro

Tag	Name	deutsche Bezeichnung	block	inline	Besonderheit
p	paragraph	Absatz	ja
h1 – h6	heading 1 – 6	Überschrift der Kategorie 1 – 6	ja		h1 darf nur einmal pro Webseite eingesetzt werden
ul	unordered list	Liste mit Aufzählungszeichen	ja
ol	ordered list	Nummerierte Liste	ja
li	list item	Listenelement	ja
img	image	Bild		ja	benötigt immer das Attribut src
div	division	unspezifischer Bereich	ja
a	anchor	Link / Anker		ja	benötigt immer das Attribut href (hyperlink reference, Linkreferenz)
em	emphasize	Betonung, kursive Schrift		ja
form	form	Formular	ja
strong	–	Fette Schrift		ja
span	–	Spanne, unspezifisch		ja

Hier der Links zum Gratisdownload der fertigen Projektdaten: bitbucket.org/karsten_geisler/webdevelopment-crashkurs Hier dann den Branch »03-block-vs-inline« wählen

Ähnliche Beiträge