Balises HTML de base : titres, paragraphes, liens, images

1. Titres

HTML fournit de nombreuses balises pour formater et structurer le contenu textuel, les images, les liens et les listes. Les balises HTML de base permettent de créer une page claire, organisée logiquement et visuellement attrayante. Regardons les balises les plus populaires et leur utilisation.

Les titres (ou header) servent à identifier différents niveaux de titres sur une page. HTML offre six niveaux de titres — de <h1> à <h6>, où <h1> est le plus grand et important, et <h6> est le plus petit.

                      
                        <h1>Titre principal de la page</h1>
                        <h2>Sous-titre du premier niveau</h2>
                        <h3>Sous-titre du deuxième niveau</h3>
                        ...
                        <h6>Titre le plus petit</h6>
                      
                    

L'utilisation des titres permet de structurer l'information textuelle et améliore également le SEO (optimisation pour les moteurs de recherche), car les moteurs de recherche tiennent compte des titres lorsqu'ils analysent le contenu de la page.

2. Formatage du texte

Pour formater le texte, HTML propose plusieurs balises simples mais puissantes.

Paragraphes

Maintenant qu'on a vu les titres, il est temps de s'intéresser au texte. Les paragraphes en HTML se créent avec la balise <p>. C'est comme appuyer sur "Entrée" dans ton éditeur préféré pour créer un nouveau paragraphe. Voici un exemple :

<p>Ceci est le premier paragraphe de notre page et il vous en dira un peu plus sur notre sujet.</p>
<p>Et voici le deuxième paragraphe, car le premier ne suffit parfois pas pour tout expliquer !</p>

Blocs de texte

N'oublions pas <span> et <div>. <span> — c'est ton petit assistant pour styliser des morceaux spécifiques de texte dans ton code HTML, tandis que <div> est un vrai champion pour organiser des blocs et des conteneurs.

<div>Ce bloc peut contenir plein de choses intéressantes !</div>
<span>Et ce texte peut avoir une couleur ou une police spécifique.</span>

Texte en gras

Texte en gras — <b>: La balise <b> met le texte en gras. Elle est souvent utilisée pour souligner des mots ou phrases importants.

              
                <p>C'est un <b>texte important</b> qui attire l'attention.</p>
              
            

Texte en italique

Italique — <i>: La balise <i> met le texte en italique. Elle est utile pour les citations, mots étrangers ou tout autre élément nécessitant de l'accent.

              
                <p>Ceci est un texte en italique : <i>exemple de texte en italique</i>.</p>
              
            

3. Images

Pour insérer des images dans une page, on utilise la balise <img>. Cette balise est autonome, et pour fonctionner, il faut spécifier le chemin de l'image avec l'attribut src. Il est également important d'ajouter une description de l'image avec l'attribut alt (texte alternatif), pour que les utilisateurs ayant des limitations ou en cas de problème de chargement de l'image puissent comprendre ce qui aurait dû apparaître.

<img data-max-width="800" data-id="e1aacecf-c8a8-43e8-85cb-02ee6fffd33e"
src="https://cdn.javarush.com/images/article/e1aacecf-c8a8-43e8-85cb-02ee6fffd33e/800.jpeg"" alt="Description de l'image">

<img src="image.jpg" alt="Description de l'image">