19 balises HTML couramment utilisées à connaître pour les débutants
Publié: 2022-12-08Si vous souhaitez devenir développeur front-end, l'un des conseils les plus courants que vous obtiendrez est d'apprendre le HTML. Le langage de balisage hypertexte, abrégé en HTML, est la base de la plupart des pages Web.
HTML est composé de différentes choses, telles que des balises, des attributs et des éléments. Notre objectif sera les balises HTML. Nous utilisons des balises HTML pour indiquer aux navigateurs comment structurer le contenu en titres, titres, paragraphes, images et bien plus encore. Les balises HTML sont donc comme des mots-clés qui définissent comment le navigateur affichera ou formatera le contenu.
Les serveurs lisent les balises HTML de haut en bas. Il n'y a aucune restriction sur le nombre de balises HTML qu'une page Web doit avoir.
- Toutes les balises HTML sont entourées de
<> - Chaque balise HTML remplit une fonction différente
- La plupart des balises HTML ont une ouverture
<tag>et une fermeture</tag>
Balises HTML vs éléments HTML vs attributs HTML
La plupart des gens utilisent les termes balises HTML et éléments de manière interchangeable. Mais sont-ils les mêmes ? Techniquement, les éléments HTML et les balises HTML sont différents.
Les balises HTML définissent les éléments HTML. Pour ce faire, le contenu est enveloppé à l'aide d'un nom de balise d'ouverture et de fermeture qui correspond au contenu de la balise avec laquelle nous travaillons.
Voici un exemple d'élément HTML :
<p> This is a paragraph </p><p> est un exemple de balise HTML
Les attributs HTML donnent des informations supplémentaires sur les éléments HTML d'un document. Les attributs se trouvent dans les éléments HTML.
Ceci est un exemple d'attribut HTML
<button id=" SubmitOrder" class="btn">Order</button>Balises HTML que tout le monde devrait connaître
HTML en tant que langage de balisage a évolué au fil des ans depuis que Tim Berners-Lee l'a introduit en 1993. La première version HTML comportait 18 balises. De nouvelles balises sont ajoutées avec chaque version HTML ; la mise à jour la plus récente était HTML5 en 2014.
Une comparaison étroite entre HTML et HTML5 montre que ce dernier a des balises sémantiques telles que <article>, <header> et <footer> qui décrivent clairement le contenu. Nous avons maintenant plus de 100 balises HTML. Voici quelques-unes des balises les plus populaires que vous devriez connaître :
<!DOCTYPE>
Le DOCTYPE n'est techniquement pas une balise mais une déclaration qui indique au navigateur quel type de fichier sera chargé. Cette balise indique au navigateur le type de HTML qui sera chargé.
En HTML5, vous pouvez déclarer votre fichier comme
<!DOCTYPE html>Ou
<!doctype html>Remarque : La déclaration n'a pas de balise fermante et n'est pas sensible à la casse.
<html> </html>
La balise <html> ….. </html> vient après la balise DOCTYPE. Cette balise définit le document comme une page Web ; tous les autres éléments seront imbriqués à l'intérieur. La balise HTML spécifie le début et la fin d'un document HTML.
Une balise <html> est représentée comme ;
<html>Content</html><tête></tête>
La section d'en-tête d'un document HTML est représentée par une balise <head>. Cette balise est incluse dans la balise <html> et donne des informations générales sur la page Web.
La balise <head> contient d'autres balises qui donnent des détails sur la page Web, comme le titre et l'auteur de la page. Le contenu de cette balise n'est pas affiché sur la page Web
C'est la syntaxe d'une balise <head> ;
<head> …….. </head><titre></titre>
La balise <title> déclare le titre de la page Web. Cette balise est incluse dans la balise <head>. La balise <title> apparaîtra sur la barre de titre ou l'onglet dans la fenêtre du navigateur, mais pas sur la page Web réelle.
La syntaxe de la balise <title> est ;
<title>HTML Tags for Beginners</title>Lorsqu'il est à l'intérieur d'une balise <head>, il apparaîtra comme ;
<head> <title>HTML Tags for Beginners</title> </head><body> </body>
La balise <body> affiche tout le contenu visible sur une page Web. Des images, des liens, du texte brut, des vidéos et bien plus encore se trouvent dans les balises <body> et </body>.
Certaines des autres balises que vous trouverez à l'intérieur du corps incluent la balise <p> pour le paragraphe, la balise <a> pour les images, la balise <strong> pour le texte en gras et la balise <ol> pour une liste ordonnée, pour n'en citer que quelques-unes.
La syntaxe de la balise <body> est ;
<body> Content </body><h1> à <h6> Balises
Il peut y avoir jusqu'à 6 balises d'en-tête dans un document HTML. Chacune des balises est représentée par un nombre allant de 1 à 6 comme <h1>, <h2>, <h3>, <h4>, <h5> et <h6>.
H1 est la plus grande balise de titre, tandis que H6 est la plus petite.
Dans un document HTML, les balises d'en-tête peuvent être représentées comme suit :
<h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6>Les balises <h1> à <h6> sont incluses dans la balise <body>.
Par exemple, une balise ,<H1> sera entourée par ;
<body> <h1> This is heading 1 >/h1> </body><p> </p>
La balise <p> </p> ou simplement la balise de paragraphe est utilisée lorsque vous souhaitez structurer le contenu dans un paragraphe. Appuyer sur le bouton "Entrée" dans un document HTML dans votre éditeur de code ne créera pas de nouveau paragraphe.
Si vous voulez plus d'un paragraphe, vous devez utiliser plusieurs balises <p> </p> sur votre document. Les balises de paragraphe doivent être incluses dans la balise <body>.
La syntaxe d'une balise de paragraphe est ;
<p> ….some content here….</p>Si vous voulez avoir quatre paragraphes, votre code sera structuré comme suit ;
<body> <p>Content for first paragraph.</p> <p>Content for the second paragraph.</p> <p>Content for the fourth paragraph.</p> </body><b> </b>
La balise <b> </b> ou simplement en gras formatera tout contenu entre l'ouverture <b> et la fermeture </b> en gras.
La balise en gras peut se trouver entre un titre tel que H1 ou même dans une balise de paragraphe.
Ce sont des exemples de balises en gras ;
<b> Bold Tag </b>La phrase 'Bold Tag' apparaîtra en gras.
<h1> Keeping it cool, <b> Fifth edition </b>, the winners edition </h1>La cinquième édition sera en caractères gras.
<i> </i>
La balise italique, notée <i>, met en italique le texte à l'intérieur des balises.
Par exemple, si nous avons
<i> These are italics </i>Les mots « ceci est en italique » apparaîtront en italique.
<u> </u>
La balise de soulignement, ou <u>, est utilisée lorsque vous souhaitez souligner un certain morceau de texte dans un document HTML.
Par exemple, si nous avons;
<u> underline these words </u>La phrase entre les balises sera soulignée.
<center> </center>
La balise Center, <center>, est utilisée pour centrer le contenu sur un document HTML.
Par exemple, si nous avons une balise h2 écrite comme <h2> Centering Content in HTML </h2> , nous pouvons la centrer comme suit ;
<center> <h2> Centering Content in HTML </h2> </center><span></span>
La balise Span, <span>, est un conteneur en ligne générique qui n'est pas fourni avec un style par défaut. Vous pouvez utiliser la balise span pour regrouper les textes que vous souhaitez styliser.
Vous pouvez étendre la balise à l'intérieur d'autres balises telles que les titres et les paragraphes ;
<h2> Learn HTML <span> from experts </span> and be ready for the market </h2> <p> Learn HTML <span> from experts </span> and be ready for the market </p><div></div>
Une balise de division, abrégée en div, est une balise qui vous permet de regrouper différentes balises dans un document HTML.
Une balise div peut recevoir une "classe" pour ajouter un style externe à l'aide de CSS.
C'est ainsi qu'un div entourant un h1, un h2 et une balise de paragraphe sera représenté.
<div > <h1> Learn HTML </h1> <h2> HTML Tags </h2> <p> HTML is a markup language……… </p> </div><em></em>
L'emphase, ou balise <em>, est utilisée pour souligner certains mots dans un document HTML.
Le contenu entre les balises <em> apparaîtra incliné ou en italique.
Le contenu mis en évidence dans un paragraphe peut apparaître dans un éditeur de code apparaîtra comme ;
<p> The meeting will start at <em> 0800 hrs </em>, please keep time </p><sup></sup>
La balise <sup> ou l'exposant permet au texte inclus d'être au-dessus du reste. Un exemple parfait est lorsque vous voulez élever au carré un nombre X et le représenter mathématiquement pour vous donner X 2
La syntaxe de <sup> dans une balise de paragraphe sera ;
<H1> Harveys <sup>TM </sup> Company Limited </H1><sous></sous>
La balise indice ou <sub> est l'opposé de la balise exposant. Le contenu inclus dans la balise <sub> apparaîtra sous la ligne de texte normale. Un exemple parfait est l'écriture de la formule chimique de l'eau sous la forme H 2 0.
La syntaxe de la balise d'indice sera ;
Remember that H <sub> 2 </sub> 0 is the chemical formula for water<br>
<br> est une balise à fermeture automatique qui représente une pause. Tout le contenu après <br> commencera sur une nouvelle ligne.
La syntaxe de <br> dans un paragraphe sera ;
<p> HTML is the abbreviation of Hypertext Markup Language <br> There has been an ongoing debate as to whether it is a programming language or not <br> However, we cannot downplay its importance <br> HTML has been used in more than 95% of websites today </p><ol></ol> et <li> </li>
La balise de liste ordonnée ou le <ol> doit être utilisé avec une autre balise telle que le <li>.
Les deux peuvent apparaître sur un éditeur de code sous la forme ;
<ol> <li> Asia </li> <li> Africa </li> <li> Europe </li> </ol>Une fois rendu sur le navigateur, le contenu apparaîtra numéroté.
<img src=""/>
Vous pouvez ajouter une image pour un attrait visuel ou même un logo. La balise d'image à fermeture automatique, <img src=""/>, est pratique dans un tel cas.
La syntaxe de la balise d'image sera ;
<img src=“https://cdn.pixabay.com/photo/2015/08/19/15/44/seo-896175_960_720.png”/>Le contenu entre guillemets représente l'URL source.
Emballer
Il existe plus de 100 balises HTML, mais celles-ci sont celles que vous devez connaître en tant que débutant. HTML est pris en charge par la plupart des éditeurs de code, et vous êtes ainsi assuré de ne jamais vous tromper lorsque vous commencerez à apprendre.