Dans le chapitre précédent, nous avons appris la nature des éléments HTML et l’utilisation des balises HTML pour les décrire. Les balises “indiquent” au navigateur comment afficher la partie du texte incluse dans la balise. Par exemple, pour indiquer clairement au navigateur que cette partie du texte est un titre, elle doit être placée dans la balise correspondante (balise <title>). Les balises elles-mêmes ne sont pas visibles dans le navigateur, seul le contenu est présenté aux utilisateurs.

Comme nous l'avons noté précédemment, les balises sont placées entre crochets <>. La balise de fermeture utilise également une barre oblique (barre oblique)</>.

Vous trouverez ci-dessous les tags utilisés plus souvent que d'autres.

  • Les balises <h1>-<h6> pour les titres
  • La balise <p> pour le paragraphe
  • La balise <img /> pour insérer une image
  • La balise <a> pour insérer des liens

Comment les titres en HTML sont définis

Les balises <h1> à <h6> sont utilisées pour structurer des titres. On a 6 types des titres HTML, de <h1> à <h6>. <h1> est utilisée pour définir le titre le plus important, et <h6> définit le moins important.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre de la fenêtre de la page Web </title>
  </head>
  <body>
    <h1>Rubrique 1</h1>
    <h2>Rubrique 2</h2>
    <h3>Rubrique 3</h3>
    <h4>Rubrique 4</h4>
    <h5>Rubrique 5</h5>
    <h6>Rubrique 6</h6>
  </body>
</html>

Résultat

Rubrique

Comment les paragraphes en HTML sont délimités

Si vous avez juste besoin de passer à une autre ligne, utilisez plutôt une balise de paragraphe, utilisez une seule balise <br>. Dans ce cas, il n'y aura pas d'indentation vide avant la ligne.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document </title>
  </head>
  <body>
    <h1>Exemple d’utilisation de la balise &lt;br&gt;</h1>
    <p> Dans le paragraphe, on peut insérer la balise &lt;br /&gt;, <br /> pour transférer une partie du texte sur une autre ligne si nécessaire.</p>
  </body>
</html>

Résultat

balise br

En savoir plus sur la balise de la délimitation des paragraphes.

Comment insérer des images dans un document HTML

Pour insérer des images HTML on utilise la balise ordinaire <img/>.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document </title>
  </head>
  <body>
    <h1>Lieu pour le titre</h1>
    <p>C’est une image d’un enfant</p>
    <img src="/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg" alt="Aleq" width="200" height="185"/>
  </body>
</html>

Résultat

Aleq

En savoir plus sur la balise de l’insertion des images.

Comment insérer des liens HTML

Pour créer des liens, on utilise la balise <a> (également connue comme une ancre). Dans un attribut href on définit l’URL, où l’utilisateur sera navigué après cliquer sur le lien.

L’information plus détaillé sur les attributs dans le chapitre suivant.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre de la fenêtre de page web </title>
  </head>
  <body>
    <a href="https://fr.w3docs.com/">W3docs.com</a>
  </body>
</html>

Résultat

W3DOCS

Pratiquez vos connaissances

Quelles sont certaines des balises de base en HTML telles que mentionnées sur la page web ?
Trouvez-vous cela utile?