Éléments HTML de niveau bloc et en ligne
Cet article explique les éléments HTML de niveau bloc et en ligne.
Cela explique les différences entre les éléments de niveau bloc et les éléments en ligne, ainsi que les principaux éléments de niveau bloc et les éléments en ligne.
YouTube Video
Éléments de niveau bloc et éléments en ligne
HTML possède deux principales catégories d'éléments qui déterminent leur affichage à l'écran : 'les éléments de type bloc' et 'les éléments en ligne'. Ces éléments jouent un rôle important dans la mise en page et affectent directement leur positionnement. Ici, nous expliquerons en détail les caractéristiques et l'utilisation de chaque élément.
Qu'est-ce qu'un élément de type bloc ?
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>Les éléments de type bloc occupent généralement toute la largeur de la page et apparaissent sur une ligne séparée des autres éléments. Ces éléments peuvent contenir d'autres éléments de type bloc ou des éléments en ligne à l'intérieur et définissent la structure globale d'un document.
Caractéristiques :
- Les éléments commencent sur une nouvelle ligne et s'étendent pour occuper la largeur maximale possible (généralement toute la largeur de l'élément parent).
- Ils sont séparés verticalement des autres éléments de type bloc, avec des marges appliquées entre eux.
- Ils peuvent contenir d'autres éléments de niveau bloc ou en ligne en leur sein.
Ici, les éléments de type bloc suivants sont utilisés :.
- La balise
<div>est couramment utilisée pour construire des mises en page. - La balise
<p>est utilisée pour définir un paragraphe. - Les balises
<h1>à<h6>sont utilisées pour définir des titres.<h1>est le plus grand titre, et<h6>est le plus petit. - La balise
<ul>crée une liste non ordonnée. - La balise
<ol>crée une liste ordonnée. - La balise
<section>définit une section dans un document.
Qu'est-ce qu'un élément en ligne?
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>Les éléments en ligne sont placés sur la même ligne que d'autres éléments et occupent généralement uniquement la largeur de leur contenu. Ces éléments sont traités comme faisant partie du texte et, contrairement aux éléments de niveau bloc, n'occupent pas toute la ligne.
Caractéristiques :
- Les éléments apparaissent sur la même ligne et sont placés côte à côte avec d'autres éléments en ligne.
- La largeur est déterminée par le contenu de l'élément (texte ou images).
- Ils peuvent être inclus dans des éléments de type bloc, mais pas l'inverse.
Ici, les éléments en ligne suivants sont utilisés :.
- La balise
<span>est utilisée pour mettre en valeur une partie du texte avec un style spécifique. - La balise
<a>définit un lien hypertexte. - La balise
<img>est un élément utilisé pour intégrer des images. <strong>met en évidence le texte important (généralement affiché en gras).<em>indique un texte souligné (généralement affiché en italique).
Différences entre les éléments de type bloc et les éléments en ligne
- Méthode d'affichage : les éléments de type bloc sont affichés sur une nouvelle ligne et occupent toute la largeur de la page, tandis que les éléments en ligne sont affichés sur la même ligne que d'autres éléments et leur largeur est déterminée par leur contenu.
- Gestion des éléments internes : les éléments de type bloc peuvent contenir d'autres éléments de type bloc ainsi que des éléments en ligne, mais les éléments en ligne ne peuvent pas contenir d'éléments de type bloc.
- Rôle dans la mise en page : les éléments de type bloc sont principalement utilisés pour créer la structure de mise en page d'une page, tandis que les éléments en ligne définissent de petits éléments comme du texte et des liens.
Points clés pour différencier
Créer des mises en page : utilisez des éléments de type bloc comme <div>, <section>, <article> pour définir de grandes sections et des blocs de contenu.
Décoration du texte et liens : utilisez des éléments en ligne comme <span>, <a>, <strong>, <em> pour décorer des parties de texte ou ajouter des liens.
Mélange d'éléments de niveau bloc et d'éléments en ligne
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>- Les éléments de niveau bloc tels que
<main>,<header>, et<section>sont utilisés, et ils sont généralement rendus sur une nouvelle ligne, occupant toute la largeur de leur élément parent. - Les éléments en ligne tels que
<a>,<strong>,<span>, et<img>sont utilisés, et ils sont placés à l'intérieur de la ligne sans occuper toute la largeur à l'intérieur des éléments de niveau bloc.
Inclure des éléments en ligne dans des éléments de niveau bloc est une pratique courante. Par exemple, il est courant d'inclure des liens (<a>) ou des mises en évidence (<strong>) dans un paragraphe (<p>). Cependant, comme vous ne pouvez pas inclure des éléments de niveau bloc dans des éléments en ligne, il est important de les utiliser de manière appropriée.
Résumé
Les éléments de niveau bloc et les éléments en ligne sont deux types fondamentaux d'éléments HTML, chacun ayant son propre rôle. Les éléments de niveau bloc forment la base de la mise en page, tandis que les éléments en ligne sont utilisés pour décorer et manipuler le contenu détaillé à l'intérieur. Comprendre et utiliser correctement ces deux types d'éléments permet de coder efficacement en HTML.
Vous pouvez suivre l'article ci-dessus avec Visual Studio Code sur notre chaîne YouTube. Veuillez également consulter la chaîne YouTube.