HTML5 – Balises essentielles : TEXTES

LEÇON

 

Heading (titre) : <h1>, <h2> ... <h6>

Ces balises permettent de marquer du texte en tant que titre. Les titres sont affichés avec un style différent du texte ordinaire - typiquement plus grand. Le contenu d'un élément h1 est typiquement affiché plus grand que celui d'un élément h2, qui est plus grand que h3, et cetera, avec h6 typiquement le plus petit.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Bienvenue</title>
    </head>
    <body>
        <h1>Bonjour</h1>
        <h3>Hello</h3>
    </body>
</html>

 

A souvenir :

  • les balises qui existent : h1, h2, h3, h4, h5, h6
  • la balise h0 n'existe pas. Les balises h7, h8 etc n'existent pas.
  • h1 est le titre le plus grand
  • h6 est le titre le plus petit
  • le type de la balise de fermeture doit correspondre à la balise d'ouverture :
    • ceci est OK : <h2>Un titre</h2>
    • ceci n'est pas OK : <h2>Un titre</h1>

 

Paragraphe : <p>

Les espaces supplémentaires et les retours à la ligne dans le document HTML n'ont aucun effet sur l'affichage. La balise p permet d'organiser les textes en paragraphe (effet de double retour à la ligne automatique entre les paragraphes à l'affichage).

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Bienvenue</title>
    </head>
    <body>
        <h1>Bonjour</h1>
        <p>Hello World</p>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam lobortis risus eros, ut elementum dui scelerisque eu.
            Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas eu molestie est.
            Nulla faucibus quam ut orci imperdiet, tempus dapibus ipsum auctor.
        </p>
        <p>
            Nam cursus accumsan elit, eget mollis felis gravida ac. Nam iaculis, libero vitae semper faucibus, mauris diam
            placerat ante, at luctus felis nunc a felis. In nec ante a libero rhoncus auctor a a nibh. Pellentesque habitant
            morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi porta risus felis, at mattis magna
            vulputate sed. Aliquam erat volutpat.
        </p>
    </body>
</html>

 

Line-Break (retour à la ligne) et Horizontal-Rule (ligne horizontale) : <br> et <hr>

La balise br permet de mettre un simple retour à la ligne dans un texte (à l'intérieure d'un paragraphe par exemple). La balise hr permet de dessiner une ligne horizontale sur toute la largeur de la page. Ce sont des éléments vides (pas de contenu, ni de balise de fermeture).

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Bienvenue</title>
    </head>
    <body>
        <h1>Bonjour</h1>
        <p>Hello World</p>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam lobortis risus eros, ut elementum dui scelerisque eu.
            Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas eu molestie est.
            Nulla faucibus quam ut orci imperdiet, tempus dapibus ipsum auctor.
        </p>
        <hr>
        <p>
            Nam cursus accumsan elit,<br>eget mollis felis gravida ac. Nam iaculis, libero vitae semper faucibus, mauris diam
            placerat ante, at luctus felis nunc a felis. In nec ante a libero rhoncus auctor a a nibh. Pellentesque habitant
            morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi porta risus felis, at mattis magna
            vulputate sed. Aliquam erat volutpat.
        </p>
    </body>
</html>

 

Commentaires : <!-- ... -->

Le texte présent dans les commentaires est ignoré par les navigateurs. Attention : les commentaires font partie du document HTML qui est envoyé au navigateur et donc sont visibles par les internautes via le code source de la page.

<!DOCTYPE html>
<!-- page construite le 12/9/2014 -->
<html>
    <head>
        <meta charset="UTF-8">
        <title>Bienvenue</title>
    </head>
    <body>
        <h1>Bonjour</h1>
    </body>
</html>

 

En savoir plus / Référence

Une ressource très utile est le site W3Schools (site en anglais).

Remarque : Il y a certaines choses qui seront difficiles à comprendre sans connaissances des technologies comme CSS, JavaScript, jQuery, PHP, et cetera. Il ne faut pas y faire attention. On y reviendra au moment d'étudier ces technologies.

 


EXERCICES

  1. Dans un éditeur de texte, créer un document HTML minimaliste, avec des balises de structure <!DOCTYPE>, <html>, <head>, <meta>, <title> et <body>, à partir du squelette HTML (voir la leçon pertinente)
  2. Après chaque étape ci-dessous, faire valider le HTML avec le W3C HTML Validator et ouvrir la page dans un navigateur pour regarder l'affichage
  3. Dans la page, ajouter des titres de différentes tailles avec les balises h1, h2, h3, etc. Remarquez la taille différente provoquée par l'utilisation des différentes balises.
  4. Incorporer plusieurs paragraphes, avec et sans retour à la ligne à l'intérieur du paragraphe
  5. Incorporer une ligne horizontale
  6. Ajouter des commentaires, et vérifier leur présence dans le code source via le navigateur