<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>inline/block Elemente</title>
</head>
<body>
<h1>
Eine Überschrift.
<p>
Fehler: Eine Überschrift erfordert eine abschließende Markierung,
sonst wird alles Weitere auch fett gedruckt.</p>
</h1>
<p>
Dies ist ein Element mit optionaler Ende-Marke.
Lässt man das schließende <em>/p</em> weg, so wird der Paragraf automatisch
mit dem nächsten Block-Element geschlossen.
Das heißt auch, dass man Paragrafen nicht verschachteln kann. Sie können
keine anderen Paragrafen und keine sonstigen Block-Elemente enthalten.
<p>
Hier fängt ein neuer Paragraf an. Er kann <strong>keine</strong> anderen Block-
Elemente enthalten, aber er darf <q>inline</q> Elemente enthalten.
<div>
Dies ist ein <em>div</em> Element. Es endet erst mit einer schließenden Marke,
nicht eher.
<p>
Wenn man, wie hier, einen Paragraf einfügt und auch beendet,
wird dieser Paragraf als Kind-Element in das DOM eingebaut.
</p>
Nach dem Paragrafen ist man hier wieder im umschließenden <em>div</em> Element.
</div>
<section>
<hr>
<p>
Dies ist eine Sektion. Sie wird mit einer horizontalen Linie durch die
Marke <em>hr</em> eingeleitet. <em>hr</em> hat keine abschließende Marke,
genauso wenig wie ein <em>br</em> mit dem man, wie hier,<br>
einen einen Zeilenumbruch erzwingen kann.
</section>
<article>
Dies ist ein Artikel. Es muss dafür eine schließende Marke geben.
Hier betten wir eine Grafik, ein Image ein.
Das <em>img</em> Element darf keine schließende Marke haben.
<img src="../img/cerberos-160x160.webp" alt="Gefährlicher Hund.">
</article>
</body>
</html>