Éléments de bloc HTML

Le HTML comprend divers éléments qui serviront de pierre angulaire à chaque page Web. Différents points de vue existent pour chaque page Web, et les front-ends et back-ends implémenteront la logique. HTML aura des exigences définies par l'utilisateur ou personnalisées mettant en évidence les pages Web telles que CSS, les frameworks d'amorçage, etc. En général, le style CSS divise les éléments HTML en deux catégories pour son objectif : 1. les éléments de niveau bloc et 2. les éléments en ligne. Nous avons déjà discuté d'articles précédents comme span et div element est utilisé pour les éléments en ligne en HTML et La balise est utilisée pour les éléments de niveau bloc en HTML.

Syntaxe :

----------codes------ ---------------------- En général, chaque balise HTML a ses structures et fonctionnalités prédéfinies. Les éléments de bloc en HTML ont différentes balises que nous utiliserons dans les documents. Certaines des balises sont répertoriées ci-dessous.

Mots clés :

, , , , - , , , , , , , , , , , , ,

Les balises mentionnées sont des éléments de bloc prédéfinis en HTML. Chaque balise remplit une fonctionnalité différente lorsqu'elle est invoquée dans des documents HTML. Très probablement, nous utilisons balises dans les éléments de niveau bloc. Les codes sont une syntaxe générale pour les éléments de niveau bloc en HTML, et nous utiliserons également les balises prédéfinies mentionnées ci-dessus si nécessaire ; chaque balise aura un contenu indépendant et autonome en HTML.

Comment fonctionne l'élément bloc en HTML ? Il utilisera les styles CSS avec le modèle de formatage et couvrira à la fois les éléments en ligne et en bloc. Très probablement, il se chargera du formatage des éléments du bloc. Le formatage des éléments de bloc est l'un des éléments de niveau bloc en HTML. Chaque élément CSS ressemble à un formulaire ; il contient une boîte avec certains composants tels que le contenu, le remplissage et la bordure ; ce sont les différents composants des styles CSS.

Contenu : Il désigne le contenu général des éléments HTML tels que le texte, les images et les vidéos, etc. Padding : Il désigne tout remplissage couvert dans n'importe quel contenu par le format, comme padding-top, padding-left, padding-right, padding-bottom, etc. Ce sont les propriétés. Bordure : Il désigne toutes les bordures dans le contenu HTML et le remplissage ; nous définissons les bordures en utilisant border-top, border-bottom, etc. Les éléments de bloc veulent définir les marges et le remplissage dans les documents HTML. Parce que les pages Web ont besoin d’alignements appropriés pour que les utilisateurs soient de nature plus attrayante. Dans quelque chose, la section block-elements contient des marges en dehors d'un élément ; le remplissage à l'intérieur des éléments entourera le contenu. Si vous avez besoin d'une couleur d'arrière-plan ou d'images pour les éléments, vous pouvez les attribuer et elles seront affichées à la fois dans les zones de contenu et de remplissage. En général, les zones de marge sont transparentes et affichent l'arrière-plan des éléments parents. Toutefois, une exception se produit si l'élément parent, tel que la section corps, n'a reçu aucune propriété d'affichage. Dans de tels cas, les zones de marge et de remplissage affichent des couleurs ou des images. La marge fait référence à la distance entre le bord extérieur des éléments HTML, y compris le contenu et le remplissage.

Nous définissons également les bordures pour mettre en valeur les pages Web, y compris les couleurs, les styles, la largeur et la marge des bordures. Nous contrôlons l’apparence de la bordure autour d’un élément et pouvons spécifier différents types de bordure. La propriété border-style de CSS permet aux utilisateurs de définir leurs propres styles de bordure personnalisés spécifiés avec des valeurs telles que aucun, solide, double, caché, pointillé, pointillé, rainure, crête, incrustation et départ. Si nous avons aligné les documents avec des bordures, nous ne spécifions aucune valeur, ce qui signifie que la valeur par défaut est aucune ; cela signifie qu'aucune bordure n'est allouée à votre page. Tous ces styles de bordure sont inclus dans la version CSS1 à l'exception des valeurs cachées, qui ont été ajoutées dans la version CSS2.

Starting from HTML 4, the div element is a block-level element for designing documents with specified divisions. Div elements lack specific formatting characteristics by default. However, you can still use the deprecated Align attributes in HTML to the center or align content to the right side; it’s a default in deprecated elements in HTML. In tag was intended to take any format in CSS styles, and div has the options like nested div tags and other elements nested with div elements whatever styles, borders, and alignments we specified it would affect for those nested elements. Some basic codes for div tags with border, background image, and other user-defined format styles.

Code:

div.sample {width:150px;background:#FF0002;border:2px dotted black;padding:7px;} div.sample ul {color:green;} The above codes are samples to understand the CSS attributes and functionalities implemented with the div tag. We will discuss some basic examples in the below sections.

Examples of HTML Block Elements Given below are the following examples:

Example #1 Code:

div.sample {width:150px;border:2px dotted black;padding:7px;} div.sample ul {color:green;} Samples

Apple Orange Pineapple Output:

Example #2 Code:

div.sample {width:150px;border:2px dotted black;padding:7px;} div.sample ul {color:green;} Sample green black

Output:

Example #3 Code:

.first { background-color: green; list-style-type: none; text-align: center; margin: 2; padding: 2; } .second { display: inline-block; font-size: 30px; padding: 23px; } Home AboutUs Contact Us Output:

In the above example, we see the different scenarios for the block-level elements first two examples, we use and align the menus or tabs or text values in the and tags. is used for inline elements, but paragraph tag will use for blocking the text or values which is to be specified in the user-level areas. A final example will be used for the element in HTML for navigating the web pages with some block-level contents. We already discussed the working of block-level elements area; block-level attributes enable the activation of specific CSS properties such as background color, text styles with list options, text alignments, padding and margins, and font styles; these attributes have values specified with the navigation web pages.

Conclusion In the conclusion part, the HTML block elements will occupy the entire space for its parent elements (containers) to create the blocks. Browsers will generally display the block-level elements with the new line and full width before and after the HTML elements. We can visualize the elements with boxes like a stack.