Les éléments de HTML peuvent être classés en deux catégories plus larges, en ligne et en blocs des éléments. Les éléments de blocage brisent le flux de contenu et démarrent une nouvelle ligne tandis que les éléments en ligne maintiennent le contenu dans la ligne et n'occupent qu'une quantité spécifique d'espace. Les éléments de blocs prennent autant d'espace que la largeur de l'élément parent et leur rupture de ligne étend également la page verticalement.
Comme HTML prend en charge une longue liste d'éléments, il peut être difficile pour un nouveau programmeur HTML pour les différencier. Gardant à la vue de l'importance, ce guide propose le résultat d'apprentissage suivant:
éclaire les différences entre les éléments de bloc et de ligne
démontrer plusieurs éléments de blocs et de lignes
Quelles sont les différences entre les éléments de bloc et de ligne
Voici les points de différenciation qui clarifieraient le concept d'éléments de blocs et de lignes en HTML.
Les éléments de bloc ajoutent de l'espace en brisant la ligne avant et après l'avoir utilisé. Tandis que les éléments en ligne sont pratiqués dans la ligne spécifique et ne consomment pas d'espace supplémentaire.
Les éléments en ligne ne prennent en charge que le rembourrage gauche et droit tandis que les éléments de bloc prennent en charge le rembourrage dans les directions verticales et horizontales
Les éléments en ligne prennent en charge les petits fichiers car ils créent de petites structures. Tandis que les éléments de bloc prennent en charge les fichiers volumineux car ils créent de grandes structures.
Lorsqu'un élément en ligne est appelé, il ne fonctionne que pour les fichiers exigeant cet élément en ligne. D'un autre côté, les éléments de bloc contiennent divers éléments de bloc et de ligne. Ainsi, lorsque l'élément de bloc parent est appelé, tous les éléments de bloc et de ligne qui y sont associés seraient appliqués.
Comment les éléments de blocs et de ligne fonctionnent-ils en HTML
Cette section fournit la fonctionnalité de plusieurs éléments de blocs et de lignes.
Éléments de blocs: Nous avons fourni l'applicabilité de quelques éléments de blocs en HTML qui montrent le comportement pratique des éléments de bloc.
En utilisant
:
La balise de paragraphe dans HTML représente les lignes de texte et tombe dans la catégorie des éléments blocs de HTML.
Bloquer les éléments en HTML
c'est un paragraphe
La sortie du code HTML sur une page Web est fournie ci-dessous:+
Bien que le texte du paragraphe soit limité à quelques mots, cependant, la balise de paragraphe a pris une largeur complète (à partir de la page).
En utilisant : Passons en pratique la balise la plus importante et couramment utilisée en utilisant le code HTML suivant.
Bloquer les éléments en HTML
c'est un div
L'interface Web de la balise ci-dessus est indiquée ci-dessous:
Comme l'élément de bloc de paragraphe, la balise Div a également occupé toute la largeur de la page.
En utilisant
à l'intérieur :
Comme indiqué et représenté plus tôt, les éléments de bloc occupent la largeur complète de la page (balise parent). Vous pouvez limiter la largeur de la balise parent et les étiquettes enfants occuperaient alors l'espace défini dans la balise parent. Par exemple, le code HTML suivant pratique le faire étiqueter.
Bloquer les éléments en HTML
c'est une pargaraphe
Le code ci-dessus déclare une balise qui occupe 50% de la largeur de la page. UN
La balise est utilisée à l'intérieur de la balise et le paragraphe prend 50% de l'espace de son tag parent ().
À part et
, Plusieurs autres éléments de bloc sont décrits ci-dessous: : utilisé pour représenter les coordonnées : Le contenu de l'article peut être décrit en utilisant cette balise : utilisé pour séparer le contenu par des lignes horizontales : Légende de la figure est attribuée à l'aide de cette balise.
pour
:
Ces étiquettes définissent l'en-tête de différentes tailles de
pour
: utilisé pour démarrer une nouvelle section : Le pied de page d'une page ou d'une section peut être attribué
: peut être utilisé pour insérer une table dans HTML Doc. : Utilisé pour définir une liste commandée
:
Utilisé pour organiser les articles de manière non ordonnée Les liens de navigation peuvent être insérés à l'aide de cette balise Éléments en ligne: Les éléments en ligne servent plusieurs fins comme mettant en évidence un mot spécifique dans une ligne. Nous avons montré l'aspect pratique de quelques éléments en ligne en HTML: : Cette balise est utilisée pour modifier la taille du texte en petite qui peut être utilisée pour les droits d'auteur ou les commentaires. Par exemple, les lignes suivantes de code HTML utilisent la balise dans un paragraphe.
Éléments en ligne dans HTML
Bienvenue à Linuxhint
Copyrights: Linuxhint
La balise dans le code ci-dessus représente un texte de droit d'auteur et est plus petit en texte qu'un paragraphe normal. La disposition Web du code est fournie ci-dessous:
: Ceci est une autre balise en ligne utilisée pour se référer à tout lien de la we-pAGE. Le code HTML suivant représente l'utilisation de la balise.
L'image affichée ci-dessous représente la sortie du code écrit ci-dessus:
Plusieurs autres éléments en ligne et leur utilisation sont décrits ci-dessous: : utilisé pour définir l'abréviation du texte : gras le texte : rompre la ligne : La taille du texte peut être plus grande que la moyenne : fait référence au retour du texte en tant que base : Un bouton peut être fabriqué en utilisant cette balise : utilisé pour citer un livre, un article, etc. : utilisé pour afficher le code dans la police par défaut du navigateur : Utilisé pour représenter le code des scripts côté client (JavaScript)
Conclusion
Les éléments HTML se réfèrent au bloc ou à la ligne. L'occupation de l'espace est la principale différence entre les éléments de bloc et de ligne en HTML. Cet article a démontré une comparaison détaillée et un fonctionnement des éléments de bloc et de ligne. Les éléments en ligne occupent la largeur selon la longueur du contenu, tandis que les éléments de bloc couvrent l'espace en fonction de leur étiquette parent. La largeur de la balise parent est la largeur de la page ou selon la largeur définie dans la propriété.