close

Introduction à la structure HTML : éléments de base et syntaxe

La structure HTML joue un rôle crucial dans la création de pages Web. Il définit la manière dont le contenu est organisé et affiché sur une page Web. Voici une introduction à la structure HTML de base :

1. Doctype

Le Doctype(Document Type Declaration) définit la version HTML utilisée par la page Web. Il doit être placé au début du fichier HTML.

2. balise html

La balise html est l'élément racine de chaque fichier HTML. Il encapsule l'intégralité du contenu de la page Web.

3. head étiquette

La balise head contient des informations sur la page Web qui ne sont pas directement affichées sur le navigateur. C'est là que le titre de la page, les balises méta, les liens vers les fichiers CSS et JavaScript et divers autres éléments sont définis.

4. body étiquette

La balise body contient tout le contenu affiché sur la page Web. C'est là que sont définis les éléments tels que le texte, les images, les vidéos, les liens et d'autres composants de l'interface utilisateur.

5. Balises imbriquées

HTML utilise une structure hiérarchique avec des balises d'ouverture et de fermeture. Les balises enfants sont placées à l'intérieur des balises parents. Par exemple, la balise p(paragraphe) peut contenir des balises span(texte en ligne), des balises fortes(texte en gras) et de nombreuses autres balises.

6. Balises communes

HTML fournit une gamme de balises pour le formatage et l'affichage du contenu. Par exemple, les balises h1-h6(titres), la balise p(paragraphe), la balise img(image), une balise(lien) et bien d'autres.

 

Voici un exemple de structure de page HTML complète :

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>My Webpage</title>  
    <link rel="stylesheet" href="styles.css">  
    <script src="script.js"></script>  
</head>  
<body>  
    <header>  
        <h1>Welcome to My Webpage</h1>  
        <nav>  
            <ul>  
                <li><a href="#">Home</a></li>  
                <li><a href="#">About</a></li>  
                <li><a href="#">Contact</a></li>  
            </ul>  
        </nav>  
    </header>  
    <main>  
        <section>  
            <h2>About Me</h2>  
            <p>I am a web developer passionate about creating amazing websites.</p>  
        </section>  
        <section>  
            <h2>My Projects</h2>  
            <ul>  
                <li><a href="#">Project 1</a></li>  
                <li><a href="#">Project 2</a></li>  
                <li><a href="#">Project 3</a></li>  
            </ul>  
        </section>  
    </main>  
    <footer>  
        <p>&copy; 2022 My Webpage. All rights reserved.</p>  
    </footer>  
</body>  
</html>

Dans l'exemple ci-dessus, nous avons une page HTML complète avec les principaux éléments tels que doctype, html tag, head tag et body tag. Dans la section head, nous définissons le titre de la page, les fichiers CSS et JavaScript à utiliser. La section body contient des éléments tels que header, main et footer pour afficher le contenu de la page Web.

 

En utilisant la structure HTML correcte, vous pouvez créer des pages Web bien organisées, lisibles et interactives.