HTML - Blocs
Tous les éléments HTML peuvent être classés en deux catégories (a) Éléments de niveau bloc (b)Éléments en ligne.
Éléments de bloc
Les éléments de bloc apparaissent à l'écran comme s'ils avaient un saut de ligne avant et après eux. Par exemple, les <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <ul>, <ol>, <dl>, <pre>, <hr />, <blockquote> et <address> éléments sont tous des éléments de niveau bloc. Ils commencent tous sur leur propre nouvelle ligne, et tout ce qui les suit apparaît sur sa propre nouvelle ligne.
Éléments en ligne
Les éléments en ligne, par contre, peuvent apparaître dans des phrases et ne doivent pas nécessairement apparaître sur une nouvelle ligne. Les <b>, <i>, <u>, <em>, <strong>, <sup>, <sub>, <big>, <small>, <li>, <ins>, <del>, < Les éléments code>, <cite>, <dfn>, <kbd> et <var> sont tous des éléments en ligne.
Regroupement d'éléments HTML
Il existe deux balises importantes que nous utilisons très fréquemment pour regrouper diverses autres balises HTML (i) balise <div> et (ii) balise <span>
La balise <div>
Il s'agit de la balise de niveau bloc très importante qui joue un grand rôle dans le regroupement de diverses autres balises HTML et l'application de CSS sur un groupe d'éléments. Même maintenant, la balise <div> peut être utilisée pour créer une mise en page de page Web où nous définissons différentes parties (gauche, droite, haut, etc.) de la page en utilisant la balise <div>. Cette balise n'apporte aucun changement visuel sur le bloc, mais cela a plus de sens lorsqu'elle est utilisée avec CSS.
Exemple
Voici un exemple simple de balise <div>. Nous allons apprendre la feuille de style en cascade (CSS) dans un chapitre séparé, mais nous l'avons utilisée ici pour montrer l'utilisation de la balise <div> -
<!DOCTYPE html>
<html>
<head>
<title>HTML div Tag</title>
</head>
<body>
<!-- First group of tags -->
<div style = "color:red">
<h4>This is first group</h4>
<p>Following is a list of vegetables</p>
<ul>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</div>
<!-- Second group of tags -->
<div style = "color:green">
<h4>This is second group</h4>
<p>Following is a list of fruits</p>
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Mango</li>
<li>Strawberry</li>
</ul>
</div>
</body>
</html>Cela produira le résultat suivant -
La balise <span>
Le HTML <span> est un élément en ligne et il peut être utilisé pour regrouper des éléments en ligne dans un document HTML. Cette balise ne fournit pas non plus de changement visuel sur le bloc mais a plus de signification lorsqu'elle est utilisée avec CSS.
La différence entre la balise <span> et la balise <div> est que la balise <span> est utilisée avec des éléments en ligne alors que la balise <div> est utilisée avec des éléments de niveau bloc.
Exemple
Voici un exemple simple de balise <span>. Nous allons apprendre la feuille de style en cascade (CSS) dans un chapitre séparé, mais nous l'avons utilisée ici pour montrer l'utilisation de la balise <span> -
<!DOCTYPE html>
<html>
<head>
<title>HTML span Tag</title>
</head>
<body>
<p>This is <span style = "color:red">red</span> and this is
<span style = "color:green">green</span></p>
</body>
</html>Cela produira le résultat suivant -