HTML-Block- und Inline-Elemente
HTML besteht aus verschiedenen Elementen, die Blöcke von Webseiten erstellen. Diese Elemente werden in "Block-Elemente" und "Inline-Elemente" unterteilt.
Es ist möglich, ein Element mit der CSS display-Eigenschaft von Block zu Inline oder umgekehrt zu ändern.
Block-Elemente
Ein Block-Element ist ein HTML-Element, das in einer neuen Zeile beginnt und die gesamte verfügbare Breite des horizontalen Raums seines Elternelements einnimmt. Diese Art von Element erstellt Inhaltsblöcke (Absätze, Seitenaufteilungen). Die Mehrheit der HTML-Elemente sind Block-Elemente.
Block-Elemente werden im body eines HTML-Dokuments verwendet und können Inline-Elemente oder andere Block-Elemente enthalten.
Beispiel für ein Block-Element:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<div>This is a block-level element. It starts on a new line and takes up the full width.</div>
<p>This is another block-level element. It also starts on a new line.</p>
</body>
</html>| Block-Elemente: |
|---|
<address> |
<canvas> |
<dt> |
<footer> |
<hr> |
<noscript> |
<pre> |
<ul> |
Inline-Elemente
Im Gegensatz zu Block-Elementen beginnen Inline-Elemente nicht in einer neuen Zeile. Sie beginnen innerhalb einer Zeile und nehmen nur so viel Breite ein, wie erforderlich ist. Inline-Elemente sind Teil des Haupttextes.
Inline-Elemente enthalten häufig andere Inline-Elemente oder können leer sein.
Beispiel für ein Inline-Element:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Heading </h1>
<p>This is Aleq's photo</p>
<img src="https://placehold.co/200x185?text=Photo" alt="Aleq" width="200" height="185"/>
</body>
</html>| Inline-Elemente: |
|---|
<a> |
<bdo> |
<cite> |
<i> |
<label> |
<q> |
<small> |
<sup> |
<var> |
Praxis
Welche der folgenden Aussagen über HTML-Block- und Inline-Elemente sind korrekt?