HTML signifie Hypertext Buquup Language. Plusieurs balises sont utilisées pour créer une structure de pages Web. Ces balises sont également connues sous le nom d'éléments HTML. Les éléments HTML affichent du contenu sur le navigateur.

Les résultats d'apprentissage de cet article sont:

• Quelle est la structure du document HTML?
• Que sont les balises HTML?
• Quels sont les éléments et attributs HTML?

Dans la section à venir, la structure du document HTML sera discutée.

Qu'est-ce qu'une structure de document HTML?

Un document de structure HTML ressemble à ceci:

Linuxhint

Meilleur site Web de tutoriel

Les éléments utilisés dans le code susmentionné sont expliqués ci-dessous:

• "«Est la déclaration d'un document HTML5.
• ""Est le composant principal d'une page HTML. L'attribut Lang avec la valeur "en»Représente la langue anglaise.
• "”Tient la méta-information sur la page.
• "”Spécifiez le codage UTF-8 lors de la traduction du code en texte lisible par l'homme au navigateur ou vice versa.
• "»Contient le lien vers la feuille de style CSS.
• "»Définit un titre de page HTML qui s'affiche sur la barre de titre du navigateur.
• "”Tag de fermeture de l'élément.
• "»L'élément contient le contenu visible sur le navigateur.
• "

  »L'élément détermine le document.

• "

  »Définit un paragraphe.

• "«Est la balise de clôture de l'élément corporel.
• "«Est la balise de clôture de l'élément racine HTML.

Sortir

Dans la sortie ci-dessus, la flèche rouge représente le titre, la flèche bleue représente l'en-tête et la flèche verte représente le paragraphe.

Que sont les balises HTML?

Il y a plusieurs balises utilisées pour constituer une page HTML. Ces balises sont également connues sous le nom d'éléments HTML et sont déterminées par une balise de départ, un contenu dans la balise et une balise de fin. Les balises sont de deux types qui sont:

• Tags appariés
• Tags vides

Exemple 1: Comment utiliser des balises appariées dans HTML?

Les éléments HTML ayant des balises de départ et de fermeture sont appelés balises appariées. Quelques exemples de balises appariées sont mentionnées ci-dessous:

La balise de tête

La balise de paragraphe

Ce texte est italique
Un texte de strikethrough

Ces éléments sont écrits à l'intérieur de l'élément corporel du fichier HTML.

La sortie du code susmentionné est illustrée ci-dessous:

Ainsi, le résultat du

La balise est pointée par la flèche bleue,

La balise est indiquée par la flèche verte, La balise est indiquée par la flèche rose, et la flèche rouge pointe vers le résultat de la balise.

Exemple 2: Quelles sont les balises vides dans HTML?

Certaines balises HTML sont appelées éléments vides car ils se composent uniquement de balises de démarrage, telles que
,

---

Tags, et plus.

Quels sont les éléments et attributs HTML?

Les éléments HTML, parfois appelés balises, peuvent être associés à des attributs. Ces attributs sont écrits dans la balise de démarrage et utilisés pour ajouter des informations supplémentaires aux éléments. Les attributs ont des noms et des valeurs.

Exemple: structure de page HTML

Vous trouverez ci-dessous un exemple de page HTML:

• "»L'élément spécifie une division ou un composant dans un document HTML.
• "classe«Est l'attribut qui spécifie les noms de classe pour un élément à utiliser dans CSS et JavaScript:

Une fois le conteneur DIV ajouté. Maintenant, nous spécifierons une section d'en-tête en utilisant les éléments suivants:

• "»L'élément contient la partie d'introduction initiale.
• ""Est une balise d'ancrage qui crée un hyperlien vers les fichiers HTML.
• "href"Est l'attribut avec tag qui contient le lien des autres fichiers HTML.
• "
• "
  "Est utilisé pour ajouter une liste non ordonnée au document HTML, comme une liste à puces.
  • "
  • »Représente un élément dans une liste:

  
  LOGO
  
  

  Après avoir ajouté l'élément d'en-tête, ajoutez un élément div avec le nom de classe "principal"Cela tient l'image. Pour placer une image, un HTML "»La balise est utilisée associée aux attributs:

  • "SRC«Est l'attribut qui spécifie le chemin d'accès d'une image.
  • "alt»L'attribut est utilisé pour spécifier un texte qui s'affiche à l'écran à la place de l'image si l'image ne se charge pas:

  
  
  

  Ensuite, ajoutez un div avec le nom de classe "article". Il contient les éléments énumérés ci-dessous:

  • "»Element spécifie un contenu autonome et indépendant.
  • "

    "Est ajouté pour inclure le titre.

  • "

    »L'élément est utilisé pour spécifier un paragraphe en HTML:

  
  

  
  

  Intitulé de l'article

  
  

  Linuxhint est le meilleur site Web en ligne. Il est développé à des fins éducatives. Nous écrivons des articles et faisons des vidéos pour enseigner le monde en ligne!

  
  

  
  

  Ensuite, ajoutez un élément de pied de page comme suit:

  • "”L'élément ajoute un pied de page au document HTML. Il contient normalement des informations sur les données sur le droit d'auteur, les liens et sur l'auteur.
  • "»L'élément spécifie la petite taille de la police:

  Nous avons donc appris plusieurs éléments et attributs utilisés dans un document HTML. Maintenant, enregistrez les modifications du fichier et ouvrez-le sur le navigateur Web. En conséquence, votre page Web ressemblera à ceci:

  Maintenant, stylissons notre page Web en utilisant CSS.

  Élément de style «corps»

  corps
  marge: 0;
  rembourrage: 0;
  Dimensionnement en boîte: Border-Box;
  Font-Family: Verdana, Genève, Tahoma, Sans-Serif;
  

  Vous trouverez ci-dessous les propriétés appliquées à la section du corps HTML:

  • "marge»La propriété est utilisée pour ajouter de l'espace autour de l'élément.
  • "rembourrage”Propriété utilisée pour insérer un espace à l'intérieur de la bordure de l'élément ou autour du contenu de l'élément.
  • "dimensionnement en boîte"Avec la valeur"borne»Étend la largeur et la hauteur de l'animal aux bords de la frontière.
  • "famille de polices»La propriété est définie avec la liste des valeurs. Cette liste est fournie pour s'assurer que si le navigateur ne prend pas en charge le premier style, l'autre sera utilisé.

  Style «conteneur» div

  .récipient
  largeur maximale: 90%;
  marge: 0 auto;
  

  Ici:

  • "largeur maximale»La propriété spécifie la largeur maximale de l'élément.
  • "marge»La propriété ajoute de l'espace autour de l'élément.

  Style «Main» Div

  principal
  Affichage: flex;
  Justification-contenu: centre;
  

  L'élément principal est stylé avec les propriétés suivantes:

  • "afficher»Property Flex rend la disposition de l'élément flexible pour les articles à l'intérieur.
  • "justifier»Les propriétés définissent l'alignement de l'élément de l'élément verticalement.

  Élément de style «en-tête»

  entête
  Tableau de rembourrage: 10px;
  Padding-Bottom: 10px;
  Color d'arrière-plan: #FFFFFF;
  Affichage: flex;
  justifier-contenu: espace-intermédiaire;
  Align-Items: Centre;
  

  L'élément d'en-tête est décoré des propriétés mentionnées ci-dessous:

  • "padding»La propriété ajoute l'espace en haut de l'élément.
  • "rembourrage»La propriété définit l'espace du bas de l'élément.
  • "Couleur de l'arrière plan»La propriété alloue la couleur d'arrière-plan de l'élément.
  • "afficher«Propriété avec la valeur»fléchir"Rendra l'élément flexible pour les articles à l'intérieur.
  • "justifier"Avec la valeur, l'espace-intermédiaire ajoutera de l'espace entre ses éléments.
  • "align-items»La propriété définit l'alignement de l'article horizontalement.

  Style «ul» de l'élément «en-tête»

  en-tête ul
  Style de liste: aucun;
  Affichage: flex;
  

  L'élément UL de l'étiquette d'en-tête est appliqué avec ces propriétés de style:

  • "style de liste«La propriété est définie sur«aucun"Cela supprimera le style à puces de la liste.
  • "afficher«La propriété fonctionnera de la même manière que celle discutée.

  Élément de style «A»

  en-tête ul li a
  Décoration du texte: aucune;
  rembourrage: 10px;
  Couleur: # 000000;
  

  Ici:

  • "textaine-décoration«Propriété avec la valeur»aucun»Supprime le soulignement du texte.
  • "rembourrage»La propriété ajoute de l'espace à l'intérieur de la limite de l'élément.
  • "couleur»La propriété spécifie la couleur de la police.

  Élément de style «IMG»

  img
  FIT d'objet: couverture;
  Largeur: 100%;
  hauteur: 300px;
  

  Le "IMG»L'élément est conçu en fournissant les propriétés suivantes:

  • "ajustement d'objet»Définit le contenu de l'élément remplacé.
  • "largeur»La propriété définit la largeur de l'élément.
  • "hauteur»La propriété est utilisée pour définir la hauteur de l'élément.

  Élément de style «Article»

  article
  Largeur: 450px;
  Texte-aligne: Centre;
  marge: auto;
  

  L'élément de l'article est conçu avec les propriétés expliquées ci-dessous:

  • "largeur”La propriété est utilisée pour le réglage de la largeur de l'élément.
  • "alignement de texte»Définit l'alignement du texte de l'élément.
  • "marge»La propriété génère de l'espace autour de l'élément.

  Élément de style «pied de page»

  bas de page
  Tableau de rembourrage: 20px;
  Padding-Bottom: 20px;
  Color d'arrière-plan: # 000000;
  Couleur: #ffffff;
  Texte-aligne: Centre;
  

  Le "bas de page«L'élément est stylé avec les propriétés qui sont expliquées ci-dessous:

  • "padding»La propriété ajoute de l'espace en haut du contenu de l'élément.
  • "rembourrage«La propriété est utilisée pour ajouter l'espace inférieur du contenu de l'élément.
  • "Couleur de l'arrière plan”Définit la couleur d'arrière-plan de l'élément.
  • "couleur”Est ​​utilisé pour spécifier la couleur de la police.

  Style «H2» de l'élément «Article»

  Article H2
  Texte-aligne: Centre;
  

  L'élément H2 dans la balise de l'article est appliqué avec le «alignement de texte»Propriété avec le centre de valeur.

  Style «P» de l'élément «Article»

  Article P
  Font-Family: Verdana, Genève, Tahoma, Sans-Serif;
  taille de police: 20px;
  

  Ici:

  • "famille de polices»La propriété est définie avec les valeurs Verdana, Genève, Tahoma, Sans-Serif. Cette liste est fournie pour s'assurer que si le premier style n'est pas pris en charge par le navigateur, l'autre sera appliqué.
  • "taille de police»Définit la taille de la police.

  Voici le dernier aspect de la page HTML après avoir appliqué les propriétés CSS:

  C'était toutes des informations essentielles liées à la structure d'une page HTML.

  Conclusion

  Un document HTML est une structure d'une page Web. Plusieurs éléments sont utilisés dans des documents HTML qui enseignent au navigateur quoi afficher sur la page Web. Ces éléments peuvent être associés à leurs étiquettes de début et de fin ou peuvent être vides, comme
  ,

  ---

  Tags, et plus. Les éléments HTML sont des propriétés de style appliquées avec l'utilisation de CSS. Pour une meilleure compréhension, cet article a expliqué la structure de la page HTML à l'aide d'un exemple pratique.