HTML, ou HyperText Markup Language, est le langage standard utilisé pour créer et structurer le contenu des pages web. Il utilise des balises pour définir les différents éléments d'une page, tels que les titres, les paragraphes, les liens, les images, etc. Voici une introduction aux concepts de base de HTML.

Structure d'une page HTML

Une page HTML typique suit une structure de base qui comprend plusieurs sections essentielles. Voici un exemple de la structure minimale d'une page HTML :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Titre de la page</title>
</head>
<body>
    <!-- Contenu de la page -->
    <h1>Bonjour le monde !</h1>
    <p>Ceci est un paragraphe.</p>
</body>
</html>
<!DOCTYPE html> : Cette déclaration définit le type de document et la version de HTML utilisée. Pour HTML5, c'est simplement <!DOCTYPE html>.

  • <html> : La balise racine qui englobe tout le contenu de la page HTML. L'attribut lang spécifie la langue du contenu de la page.

  • <head> : Cette section contient des métadonnées sur le document, comme le jeu de caractères, le titre de la page, et des liens vers des feuilles de style ou des scripts.

    • <meta charset="UTF-8"> : Définit le jeu de caractères utilisé par la page, UTF-8 étant le plus courant car il supporte la plupart des caractères du monde.

    • <meta name="viewport" content="width=device-width, initial-scale=1.0"> : Assure que la page est correctement affichée sur les appareils mobiles en définissant la largeur de la vue à la largeur de l'appareil et le zoom initial à 1.0.

    • <title> : Définit le titre de la page, qui apparaît dans l'onglet du navigateur.

  • <body> : Cette section contient le contenu visible de la page, comme les titres, les paragraphes, les images, etc.

Balises HTML courantes

Voici quelques-unes des balises HTML les plus couramment utilisées :

  • <div> : Utilisée pour créer un conteneur générique pour d'autres éléments. Elle est souvent utilisée pour regrouper des éléments et appliquer des styles CSS.

    <div>
    <p>Ceci est un paragraphe à l'intérieur d'un div.</p>
</div>
     

  • <p> : Définit un paragraphe de texte.

    <p>Ceci est un paragraphe.</p>

  • <h1>, <h2>, <h3>, etc. : Définit des titres de différents niveaux, <h1> étant le plus important et <h6> le moins important.

    <h1>Titre principal</h1> <h2>Sous-titre</h2>

  • <form> : Utilisée pour créer un formulaire interactif qui peut être soumis à un serveur.

    <form action="/submit" method="post">
    <label for="name">Nom :</label>
    <input type="text" id="name" name="name">
    <button type="submit">Envoyer</button>
</form>

  • <input> : Définit un champ de saisie dans un formulaire. Le type de champ est défini par l'attribut type.

    <input type="text" id="name" name="name" placeholder="Entrez votre nom">

  • <button> : Crée un bouton cliquable.

    <button type="button">Cliquez-moi</button>

Attributs HTML

Les attributs fournissent des informations supplémentaires sur les éléments HTML. Voici quelques attributs couramment utilisés :

  • id : Définit un identifiant unique pour un élément, qui peut être utilisé pour le styliser avec CSS ou le manipuler avec JavaScript.

    <div id="contenu-principal">...</div>

  • class : Définit une ou plusieurs classes pour un élément, qui peuvent être utilisées pour appliquer des styles CSS.

    <p class="texte-important">Ceci est un paragraphe important.</p>

  • src : Spécifie l'URL de la source pour des éléments comme les images ou les scripts.

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

  • href : Spécifie l'URL de destination pour les liens.

    <a href="https://www.example.com">Visitez Example.com</a>

Ces concepts de base en HTML vous permettront de créer et structurer le contenu de vos pages web. En combinant ces balises et attributs, vous pouvez construire des pages web complexes et interactives.

Last modified: Saturday, 7 June 2025, 7:59 AM