Bases HTML. Règles générales. Éléments en bloc et en ligne

Dans ce chapitre :

Syntaxe des éléments

Élément HTML est l'unité structurelle de base d'une page Web, écrite en HTML. L'image ci-dessous montre la syntaxe de l'élément. Pour la plupart des balises, la syntaxe des éléments sera la même, à l'exception des balises simples.

Tous les éléments en HTML suivent le même format :

• L'élément commence par une balise d'ouverture.
• L'élément se termine par une balise de fermeture.
• Le contenu d'un élément est tout ce qui se trouve entre les balises d'ouverture et de fermeture.
• Certains éléments n'ont aucun contenu (éléments vides).
• La plupart des éléments peuvent contenir des attributs

Note : n'oubliez pas de mettre le symbole " dans la balise fermante / ", il indique au navigateur que votre élément est terminé et que ce qui vient après est un autre élément.

Éléments vides

Il existe plusieurs éléments en HTML qui n'ont pas de balise de fermeture, comme ou
. De tels éléments sont appelés vide, car ils ne contiennent aucun contenu et n'ont pas de balise de fermeture.

Éléments imbriqués

Tous les documents HTML sont constitués d'éléments imbriqués. La plupart d'entre eux peuvent soit contenir d'autres éléments, soit eux-mêmes être imbriqués dans d'autres éléments, et la profondeur d'imbrication des éléments n'est pas limitée.

L'exemple suivant se compose de trois éléments, dont deux sont imbriqués :

Mon premier paragraphe

Lorsque vous placez un élément dans un autre, vous devez veiller à ce que l'élément imbriqué commence et se termine à l'intérieur du même élément. Ainsi, l'exemple suivant est incorrect :

Ce Très

Il existe deux catégories principales d'éléments HTML, qui correspondent à leurs types de contenu et à leur comportement dans la structure d'une page Web : bloc Et éléments en ligne. À l'aide d'éléments de bloc, vous pouvez créer la structure d'une page Web ; les éléments en ligne sont utilisés pour formater des fragments de texte (à l'exception des éléments Et ).

La division des éléments en éléments block et inline est utilisée dans la spécification HTML jusqu'à la version 4.01. En HTML5, ces concepts sont remplacés par un ensemble de concepts plus complexes dans lesquels chaque élément HTML doit suivre des règles qui déterminent le contenu qui lui est autorisé.

Modèle de formatage visuel CSS

1. Modèle de formatage visuel

Le modèle de formatage visuel CSS est un algorithme qui traite un document HTML et l'affiche sur l'écran de l'appareil. Ce modèle transforme chaque élément du document afin qu'il génère zéro ou plusieurs boîtes rectangulaires selon le modèle de boîte CSS. La position de ces cases sur la page est déterminée par les facteurs suivants :
— la taille de l'élément (en tenant compte du fait qu'ils soient explicitement spécifiés ou non) ;
— type d'élément (ligne ou bloc) ;
— schéma de positionnement (écoulement normal, éléments positionnés ou flottants) ;
— les relations entre les éléments du DOM ;
— dimensions internes des images contenues ;
— des informations externes (par exemple, la taille des fenêtres du navigateur).

La position et les dimensions de la ou des boîte(s) de chaque élément sont calculées par rapport aux bords de la boîte rectangulaire, ce qu'on appelle "bloc contenant"(bloc contenant). La taille de la boîte n'est pas limitée par la taille du bloc contenant, donc dans certaines conditions, elle peut s'étendre au-delà de ses limites.

2. Modèle de bloc

Dans le modèle de boîte, un élément est traité comme un conteneur rectangulaire doté d'une zone de contenu et de bordures et d'un remplissage facultatifs (intérieurs et extérieurs). La propriété display détermine le type de conteneur de l'élément. Pour chaque élément, il existe une valeur par défaut du navigateur.

Zone de contenu est le contenu de l'élément, tel qu'un texte ou une image.

Échancrure est spécifié par la propriété padding. Le remplissage est la distance entre le contenu principal et sa bordure (cadre). Si vous définissez un arrière-plan pour un élément, il s'appliquera également aux champs de l'élément. Le remplissage intérieur ne peut pas prendre de valeurs négatives, contrairement au remplissage extérieur.

Marge est spécifié par la propriété margin. Il ajoute de la distance à l'extérieur d'un élément depuis la bordure extérieure du cadre jusqu'aux éléments adjacents, séparant ainsi les éléments sur la page. Les marges restent toujours transparentes et l'arrière-plan de l'élément parent est visible à travers elles.

Les valeurs de remplissage et de marge sont définies dans l'ordre suivant : haut, droite, bas et gauche.

Frontière, ou la bordure d'un élément, est spécifiée à l'aide de la propriété border. Si aucune couleur de bordure n'est spécifiée, elle prend la couleur du contenu principal de l'élément, tel que le texte. Si le cadre comporte des sauts, l'arrière-plan de l'élément apparaîtra à travers eux.

Le remplissage, le remplissage et la bordure d'un élément sont facultatifs ; leur valeur par défaut est zéro. Cependant, certains navigateurs ajoutent des valeurs par défaut positives à ces propriétés en fonction de leurs feuilles de style. Vous pouvez effacer les styles du navigateur pour tous les éléments à l'aide d'un sélecteur universel :

* ( marge : 0 ; remplissage : 0 ; )

3. Bloquer les éléments et bloquer les conteneurs

Éléments de bloc— des éléments de niveau supérieur formatés visuellement sous forme de blocs, positionnés verticalement sur la page dans la fenêtre du navigateur. Afficher les valeurs des propriétés telles que block , list-item et table make elements block elements. Les éléments de bloc génèrent un bloc principal qui contient uniquement le bloc de l'élément. Éléments avec affichage de la valeur : list-item génère des cases supplémentaires pour les marqueurs positionnés par rapport à la case principale.