HTML Block-niveau en Inline Elementen
Dit artikel legt HTML block-niveau en inline elementen uit.
Dit legt de verschillen uit tussen blokelementen en inline-elementen, evenals de belangrijkste blokkern- en inline-elementen.
YouTube Video
Blockniveau-elementen en inline-elementen
HTML heeft twee primaire categorieën elementen die bepalen hoe ze op het scherm worden weergegeven: 'blockniveau-elementen' en 'inline-elementen'. Deze elementen spelen een belangrijke rol in de paginalay-out en beïnvloeden direct hoe ze worden gepositioneerd. Hier zullen we de kenmerken en het gebruik van elk element in detail uitleggen.
Wat is een blockniveau-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>Blockniveau-elementen beslaan doorgaans de volledige breedte van de pagina en verschijnen op een aparte regel van andere elementen. Deze elementen kunnen andere blockniveau- of inline-elementen bevatten en definiëren de grotere structuur van een document.
Kenmerken:
- De elementen beginnen op een nieuwe regel en breiden uit om zoveel mogelijk breedte in te nemen (meestal de volledige breedte van het bovenliggende element).
- Ze zijn verticaal gescheiden van andere block-elementen, met marges die ertussen worden toegepast.
- Ze kunnen andere blok- of inline-elementen bevatten.
Hier worden de volgende blockniveau-elementen gebruikt:.
- De
<div>-tag wordt vaak gebruikt om lay-outs te bouwen. - De
<p>-tag wordt gebruikt om een alinea te definiëren. <h1>tot<h6>zijn elementen die worden gebruikt om koppen te definiëren.<h1>is de grootste kop en<h6>is de kleinste.- De
<ul>-tag maakt een ongeordende lijst aan. - De
<ol>-tag maakt een geordende lijst aan. - De
<section>-tag definieert een sectie binnen een document.
Wat is een 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-elementen staan op dezelfde regel als andere elementen en nemen meestal alleen zoveel breedte in als hun inhoud. Deze elementen worden behandeld als onderdeel van de tekst en, in tegenstelling tot blokniveau-elementen, nemen ze niet de hele regel in beslag.
Kenmerken:
- Elementen verschijnen op dezelfde regel en worden naast andere inline-elementen geplaatst.
- De breedte wordt bepaald door de inhoud van het element (tekst of afbeeldingen).
- Ze kunnen binnen blockniveau-elementen worden opgenomen, maar andersom niet.
Hier worden de volgende inline-elementen gebruikt:.
- De
<span>-tag wordt gebruikt om een deel van de tekst te benadrukken met een specifieke stijl. - De
<a>-tag definieert een hyperlink. - De
<img>-tag is een element dat wordt gebruikt om afbeeldingen in te voegen. <strong>benadrukt belangrijke tekst (meestal weergegeven in vet).<em>geeft benadrukte tekst aan (meestal weergegeven in cursief).
Verschillen tussen blockniveau-elementen en inline-elementen
- Weergavemethode: Blockniveau-elementen worden weergegeven op een nieuwe regel en nemen de volledige breedte van de pagina in, terwijl inline-elementen op dezelfde regel met andere elementen worden weergegeven en hun breedte wordt bepaald door hun inhoud.
- Omgang met interne elementen: Blockniveau-elementen kunnen andere blockniveau-elementen en inline-elementen bevatten, maar inline-elementen kunnen geen blockniveau-elementen bevatten.
- Lay-out rol: Blockniveau-elementen worden voornamelijk gebruikt om de structuur van een pagina te creëren, terwijl inline-elementen kleine elementen definiëren zoals tekst en links.
Belangrijke punten voor differentiatie
Lay-outs maken: Gebruik blockniveau-elementen zoals <div>, <section>, <article> om grote secties en inhoudsblokken te definiëren.
Tekstopmaak en links: Gebruik inline-elementen zoals <span>, <a>, <strong>, <em> om delen van de tekst te decoreren of links toe te voegen.
Mengen van blokelementen en 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-level elementen zoals
<main>,<header>, en<section>worden gebruikt, en ze worden meestal op een nieuwe regel weergegeven, waarbij ze de volledige breedte van hun ouder element innemen. - Inline-elementen zoals
<a>,<strong>,<span>, en<img>worden gebruikt, en ze worden binnen de regel geplaatst zonder de volledige breedte binnen block-level elementen in te nemen.
Het opnemen van inline-elementen binnen blokelementen is een veelvoorkomend patroon. Het is bijvoorbeeld gebruikelijk om links (<a>) of nadruk (<strong>) op te nemen in een alinea (<p>). Aangezien je echter geen blokniveau-elementen binnen inline-elementen kunt opnemen, is het belangrijk ze op de juiste manier te gebruiken.
Samenvatting
Blokniveau-elementen en inline-elementen zijn twee basistypen HTML-elementen, elk met een eigen rol. Blokniveau-elementen vormen de basis van paginalay-outs, terwijl inline-elementen worden gebruikt om inhoud binnen deze blokken te decoreren en verfijnen. Het begrijpen en correct gebruiken van deze twee soorten elementen maakt efficiënt HTML-coderen mogelijk.
Je kunt het bovenstaande artikel volgen met Visual Studio Code op ons YouTube-kanaal. Bekijk ook het YouTube-kanaal.