Structure page HTML

Temps de lecture : 3 minutes

HTML (HyperText Markup Language)

HTML (HyperText Markup Language) est le langage de balisage standard utilisé pour créer des pages web. Il permet de structurer et de mettre en forme le contenu d’une page, tel que du texte, des images, des liens hypertextes, des tableaux, etc.

Les balises HTML sont utilisées pour encadrer les éléments de contenu et indiquer leur signification. Par exemple, la balise <p> est utilisée pour encadrer un paragraphe de texte, tandis que la balise <img> est utilisée pour insérer une image. Les balises HTML sont généralement composées d’un nom entouré de chevrons, comme dans cet exemple : <nom_de_la_balise>.

Voici un exemple de structure HTML pour une page web simple :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ma Page Web</title>
    <link rel="stylesheet" href="styles.css"> <!-- Lien vers un fichier CSS externe -->
</head>
<body>
    <header>
        <h1>Bienvenue sur Ma Page Web</h1>
        <nav>
            <ul>
                <li><a href="#accueil">Accueil</a></li>
                <li><a href="#a-propos">À propos</a></li>
                <li><a href="#services">Services</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section id="accueil">
            <h2>Accueil</h2>
            <p>Ceci est la section d'accueil de la page web.</p>
        </section>

        <section id="a-propos">
            <h2>À propos</h2>
            <p>Ceci est la section à propos de la page web.</p>
        </section>

        <section id="services">
            <h2>Services</h2>
            <p>Ceci est la section des services de la page web.</p>
        </section>

        <section id="contact">
            <h2>Contact</h2>
            <form>
                <label for="nom">Nom :</label>
                <input type="text" id="nom" name="nom">

                <label for="email">Email :</label>
                <input type="email" id="email" name="email">

                <label for="message">Message :</label>
                <textarea id="message" name="message"></textarea>

                <button type="submit">Envoyer</button>
            </form>
        </section>
    </main>

    <footer>
        <p>&copy; 2024 Ma Page Perso. Tous droits réservés.</p>
    </footer>
</body>
</html>

Résultat

Ma Page Web

Bienvenue sur Ma Page Web

Accueil

Ceci est la section d’accueil de la page web.

À propos

Ceci est la section à propos de la page web.

Services

Ceci est la section des services de la page web.

Contact

© 2024 Ma Page Perso. Tous droits réservés.

Explication de la structure :

  1. Déclaration DOCTYPE : <!DOCTYPE html> déclare le type de document et la version de HTML utilisée.
  2. Balise <html> : L’élément racine du document HTML.
  3. Balise <head> : Contient les métadonnées sur le document, telles que le titre, le jeu de caractères et les liens vers les feuilles de style.
  4. Balise <title> : Définit le titre de la page web, qui apparaît dans l’onglet du navigateur.
  5. Balise <link> : Lien vers des ressources externes comme des fichiers CSS.
  6. Balise <body> : Contient le contenu de la page web.
  7. Balise <header> : Définit la section d’en-tête, incluant le menu de navigation.
  8. Balise <nav> : Contient les liens de navigation.
  9. Balise <main> : La zone de contenu principal de la page web.
  10. Balises <section> : Définissent les différentes sections au sein du contenu principal.
  11. Balises <h1>, <h2> : Titres pour différentes sections et sous-sections.
  12. Balise <p> : Paragraphes de texte.
  13. Balise <form> : Un formulaire pour les entrées utilisateur, contenant des labels et des champs de saisie.
  14. Balise <footer> : La section de pied de page, contenant généralement des informations sur le droit d’auteur.

Cette structure garantit que le document HTML est organisé, facile à lire et suit les meilleures pratiques pour le développement web.

Voici un tableau HTML contenant les principales commandes HTML ainsi qu’une description pour chacune :

Principales Commandes HTML

Commande Description
<html>…</html> Définit le document HTML.
<head>…</head> Contient des méta-informations sur le document.
<title>…</title> Définit le titre du document, affiché dans l’onglet du navigateur.
<meta> Définit des métadonnées sur le document, comme le jeu de caractères.
<body>…</body> Contient le contenu principal du document.
<h1>…</h1> Définit un titre de premier niveau.
<h2>…</h2> Définit un titre de deuxième niveau.
<p>…</p> Définit un paragraphe.
<a>…</a> Définit un lien hypertexte.
<img> Définit une image.
<ul>…</ul> Définit une liste non ordonnée.
<ol>…</ol> Définit une liste ordonnée.
<li>…</li> Définit un élément de liste.
<div>…</div> Définit une division ou une section dans un document.
<span>…</span> Définit une section en ligne dans un document.
<table>…</table> Définit un tableau.
<tr>…</tr> Définit une ligne dans un tableau.
<th>…</th> Définit une cellule d’en-tête dans un tableau.
<td>…</td> Définit une cellule dans un tableau.
<form>…</form> Définit un formulaire HTML pour la saisie de l’utilisateur.
<input> Définit un champ de saisie dans un formulaire.
<button>…</button> Définit un bouton cliquable.
<link> Définit un lien vers un fichier externe, comme une feuille de style CSS.
<script>…</script> Définit un script client-side (JavaScript).
<header>…</header> Définit l’en-tête d’une section ou d’une page.
<footer>…</footer> Définit le pied de page d’une section ou d’une page.
<nav>…</nav> Définit une section contenant des liens de navigation.
<article>…</article> Définit un contenu autonome pouvant être distribué indépendamment.
<section>…</section> Définit une section dans un document.
<aside>…</aside> Définit du contenu légèrement relié au contenu principal.
<main>…</main> Définit le contenu principal d’un document.
<figure>…</figure> Spécifie un contenu indépendant, souvent accompagné d’une légende.
<figcaption>…</figcaption> Définit une légende pour un élément <figure>.
<audio>…</audio> Définit un contenu audio.
<video>…</video> Définit un contenu vidéo.
<source> Spécifie une ou plusieurs sources pour les éléments media <audio> et <video>.
<embed> Définit un conteneur pour un contenu externe interactif ou intégré.
<iframe>…</iframe> Définit un cadre intégré pour afficher une autre page HTML.

Les navigateurs web interprètent le code HTML pour afficher le contenu de la page web de manière structurée et mise en forme. Les développeurs web utilisent HTML en combinaison avec d’autres langages, tels que CSS et JavaScript, pour créer des sites web interactifs et dynamiques.

Vue : 91