HTML Block- und Inline-Elemente
Dieser Artikel erklärt HTML Block- und Inline-Elemente.
Dies erklärt die Unterschiede zwischen Blockelementen und Inline-Elementen sowie die wichtigsten Blockelemente und Inline-Elemente.
YouTube Video
Block-Elemente und Inline-Elemente
HTML hat zwei Hauptkategorien von Elementen, die bestimmen, wie sie auf dem Bildschirm angezeigt werden: 'Block-Elemente' und 'Inline-Elemente'. Diese Elemente spielen eine wichtige Rolle beim Seitenlayout und beeinflussen direkt, wie sie positioniert werden. Hier werden wir die Eigenschaften und die Verwendung jedes Elements im Detail erläutern.
Was ist ein Block-Element?
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Block-Level Elements Example</title>
7</head>
8<body>
9 <div>
10 <h1>This is a Block-Level Heading</h1>
11 <p>
12 This is a paragraph.
13 Block-level elements start on a new line and
14 take up the full width of their container.
15 </p>
16 </div>
17 <section>
18 <h2>Another Block-Level Section</h2>
19 <p>This is another paragraph inside a section element.</p>
20 </section>
21 <section>
22 <h2>Unordered List And Ordered List</h2>
23 <ul>
24 <li>List Item A</li>
25 <li>List Item B</li>
26 <li>List Item C</li>
27 </ul>
28 <ol>
29 <li>List Item 1</li>
30 <li>List Item 2</li>
31 <li>List Item 3</li>
32 </ol>
33 </section>
34</body>
35</html>Block-Elemente nehmen typischerweise die gesamte Breite der Seite ein und erscheinen in einer eigenen Zeile, getrennt von anderen Elementen. Diese Elemente können andere Block- oder Inline-Elemente enthalten und definieren die übergeordnete Struktur eines Dokuments.
Merkmale:
- Die Elemente beginnen in einer neuen Zeile und dehnen sich aus, um so viel Breite wie möglich einzunehmen (normalerweise die gesamte Breite des übergeordneten Elements).
- Sie sind vertikal von anderen Block-Elementen getrennt, wobei Abstände (Margins) zwischen ihnen angewendet werden.
- Sie können andere Block- oder Inline-Elemente enthalten.
Hier werden die folgenden Block-Elemente verwendet:.
- Das
<div>-Tag wird häufig verwendet, um Layouts zu erstellen. - Das
<p>-Tag wird verwendet, um einen Absatz zu definieren. <h1>bis<h6>sind Elemente, die zur Definition von Überschriften verwendet werden.<h1>ist die größte Überschrift und<h6>die kleinste.- Das
<ul>-Tag erstellt eine ungeordnete Liste. - Das
<ol>-Tag erstellt eine geordnete Liste. - Das
<section>-Tag definiert einen Abschnitt innerhalb eines Dokuments.
Was ist ein Inline-Element?
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Inline Elements Example</title>
7</head>
8<body>
9 <p>
10 This is a paragraph with
11 <a href="#">an inline link</a> and
12 <strong>some bold text</strong>.
13 </p>
14 <p>
15 You can also include <em>italicized text</em>,
16 an <img src="images/image.jpg" alt="Sample image" width="100">,
17 and a <span style="color: red;">styled span element</span>
18 within inline elements.
19 </p>
20</body>
21</html>Inline-Elemente befinden sich in derselben Zeile wie andere Elemente und nehmen normalerweise nur so viel Platz ein wie ihr Inhalt. Diese Elemente werden als Teil des Textes behandelt und nehmen im Gegensatz zu Block-Elementen nicht die gesamte Zeile ein.
Merkmale:
- Elemente erscheinen in derselben Zeile und werden neben anderen Inline-Elementen platziert.
- Die Breite wird durch den Inhalt des Elements bestimmt (Text oder Bilder).
- Sie können innerhalb von Block-Elementen enthalten sein, aber nicht umgekehrt.
Hier werden die folgenden Inline-Elemente verwendet:.
- Das
<span>-Tag wird verwendet, um einen Teil des Textes mit einem spezifischen Stil hervorzuheben. - Das
<a>-Tag definiert einen Hyperlink. - Das
<img>-Tag ist ein Element, das verwendet wird, um Bilder einzubetten. <strong>hebt wichtigen Text hervor (normalerweise fett dargestellt).<em>zeigt betonten Text an (normalerweise kursiv dargestellt).
Unterschiede zwischen Block-Elementen und Inline-Elementen
- Darstellungsmethode: Block-Elemente werden in einer neuen Zeile angezeigt und nehmen die gesamte Breite der Seite ein, während Inline-Elemente in derselben Zeile wie andere Elemente angezeigt werden und deren Breite durch ihren Inhalt bestimmt wird.
- Handhabung interner Elemente: Block-Elemente können andere Block-Elemente sowie Inline-Elemente enthalten, während Inline-Elemente keine Block-Elemente enthalten können.
- Rolle im Layout: Block-Elemente werden hauptsächlich verwendet, um die Layoutstruktur einer Seite zu erstellen, während Inline-Elemente kleine Elemente wie Text und Links definieren.
Wichtige Unterschiede
Erstellen von Layouts: Verwenden Sie Block-Elemente wie <div>, <section>, <article>, um große Abschnitte und Inhaltsblöcke zu definieren.
Textdekoration und Links: Verwenden Sie Inline-Elemente wie <span>, <a>, <strong>, <em>, um Textteile zu dekorieren oder Links hinzuzufügen.
Vermischung von Block- und Inline-Elementen
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Mixed Block-Level and Inline Elements</title>
7</head>
8<body>
9 <header>
10 <h1>Main Heading with Mixed Content</h1>
11 <p>
12 This is a paragraph that contains an
13 <a href="#">inline link</a> and
14 <strong>bold text</strong>. You can also have
15 <em>italicized words</em> here.
16 </p>
17 </header>
18 <main>
19 <section>
20 <h2>Subheading with Additional Inline Elements</h2>
21 <p>
22 Here is a section that includes inline elements such as
23 <span style="color: blue;">colored text</span> and an
24 <img src="images/image.jpg" alt="Example image" width="50">.
25 This text demonstrates how inline elements work within block-level elements.
26 </p>
27 </section>
28 <section>
29 <h2>Lists with Mixed Content</h2>
30 <p>
31 This paragraph precedes a list and has
32 <a href="#">a link</a> and <strong>bold</strong> text.
33 </p>
34 <ul>
35 <li>List item with <em>italic</em> text.</li>
36 <li>List item containing <span style="color: green;">styled span</span>.</li>
37 <li>List item with <img src="images/example.jpg" alt="Icon" width="20"> icon.</li>
38 </ul>
39 </section>
40 </main>
41</body>
42</html>- Block-Elemente wie
<main>,<header>und<section>werden verwendet und sie werden typischerweise in einer neuen Zeile dargestellt und nehmen die gesamte Breite ihres Elternelements ein. - Inline-Elemente wie
<a>,<strong>,<span>und<img>werden verwendet und sie werden innerhalb der Zeile platziert, ohne die volle Breite innerhalb von Block-Elementen einzunehmen.
Das Einschließen von Inline-Elementen in Block-Level-Elemente ist ein übliches Muster. Zum Beispiel ist es üblich, Links (<a>) oder Hervorhebungen (<strong>) innerhalb eines Absatzes (<p>) einzufügen. Da es jedoch nicht möglich ist, Block-Elemente innerhalb von Inline-Elementen einzufügen, ist es wichtig, sie angemessen zu verwenden.
Zusammenfassung
Block-Elemente und Inline-Elemente sind zwei grundlegende HTML-Elementtypen, die jeweils eine eigene Rolle haben. Block-Elemente bilden die Grundlage des Seitenlayouts, während Inline-Elemente verwendet werden, um Inhalte innerhalb von Blöcken zu dekorieren und zu bearbeiten. Das Verständnis und die korrekte Verwendung dieser beiden Elementtypen ermöglichen effizientes HTML-Coding.
Sie können den obigen Artikel mit Visual Studio Code auf unserem YouTube-Kanal verfolgen. Bitte schauen Sie sich auch den YouTube-Kanal an.