Créez la structure de votre première page

Un site est composé de sections.

Lorsque vous regardez une page professionnelle, vous pouvez généralement la diviser mentalement en plusieurs blocs.

Par exemple :

En-tête et navigation.

Présentation principale.

Informations sur le projet.

Services ou contenu.

Appel à l’action.

Pied de page.

HTML permet de représenter cette organisation avec des éléments sémantiques.

Que signifie HTML sémantique ?

Le HTML sémantique consiste à utiliser des éléments dont le nom décrit leur fonction dans la page.

Voici quelques-uns des plus importants :

<header>

Représente l’en-tête d’une page ou d’une section.

<main>

Contient le contenu principal de la page.

<footer>

Représente le pied d’une page ou d’une section.

Une structure claire rend le code plus facile à comprendre et aide à décrire correctement le contenu de la page.

L’en-tête du site.

Nous commencerons par créer l’en-tête et le menu de navigation.

<header>

  <nav>

    <a href="index.html">Mon projet</a>

    <a href="#sobre">À propos</a>
    <a href="#servicios">Services</a>
    <a href="#contacto">Contact</a>

  </nav>

</header>

L’élément nav indique que ce bloc contient des liens de navigation.

Créez le contenu principal.

Après le header, nous ajouterons :

Dans main nous placerons les différentes sections de notre page.

Une page doit normalement contenir un seul élément main, car il représente le contenu principal.

Construisez la présentation principale.

La première section sert généralement à expliquer rapidement ce que propose le site.

<section>

  <h1>Design numérique pour des projets porteurs de sens</h1>

  <p>
    Nous créons des solutions numériques claires,
    fonctionnelles et professionnelles.
  </p>

  <a href="#servicios">Voir les services</a>

</section>

Nous avons ici trois éléments essentiels : un titre, une explication et un appel à l’action.

Ajoutez une section À propos.

Nous pouvons maintenant créer une deuxième section.

<section id="sobre">

  <h2>À propos du projet</h2>

  <p>
    Nous aidons à transformer les idées en
    expériences numériques claires et professionnelles.
  </p>

</section>

Nous avons ajouté :

id="sobre"

Cet identifiant permet de créer un lien qui mène directement à cette section.

C’est pourquoi nous pouvons utiliser dans le menu :

<a href="#sobre">À propos</a>

Ajoutez une section de services.

Nous pouvons utiliser plusieurs éléments article pour représenter des contenus indépendants dans une section.

<section id="servicios">

  <h2>Services</h2>

  <article>
    <h3>Création web</h3>
    <p>Des pages claires et professionnelles.</p>
  </article>

  <article>
    <h3>SEO</h3>
    <p>Optimisation pour les moteurs de recherche.</p>
  </article>

</section>

Ajoutez un appel à l’action.

Une page professionnelle doit guider le visiteur vers une étape suivante.

Nous pouvons ajouter une section de contact :

<section id="contacto">

  <h2>Vous avez un projet ?</h2>

  <p>
    Présentez-nous vos besoins et discutons-en.
  </p>

  <a href="mailto:hola@ejemplo.com">
    Contacter
  </a>

</section>

Terminez par le footer.

Le footer apparaît généralement à la fin de la page.

Nous pourrons ensuite ajouter des liens juridiques, des réseaux sociaux, des coordonnées ou d’autres éléments.

Votre page complète.

En réunissant tout ce que nous avons appris, voici la structure générale :

<body>

  <header>
    <nav>...</nav>
  </header>

  <main>

    <section>
      Présentation
    </section>

    <section id="sobre">
      À propos
    </section>

    <section id="servicios">
      Services
    </section>

    <section id="contacto">
      Contact
    </section>

  </main>

  <footer>
    Pied de page
  </footer>

</body>

Nous avons maintenant le squelette d’une page web complète.

Elle peut encore sembler très simple. C’est normal : nous construisons d’abord une structure correcte, puis nous travaillons le design.

RÉSUMÉ

Ce que vous avez appris.

Une page web peut être divisée en plusieurs sections.
Le HTML sémantique décrit la fonction du contenu.
header représente l’en-tête.
nav contient la navigation.
main contient le contenu principal.
section organise les grands blocs de contenu.
article peut représenter un contenu indépendant.
footer représente le pied de page.
Les attributs id permettent de créer des liens vers des sections.

MISE EN PRATIQUE

Construisez le squelette de votre site.

Ouvrez le projet mi-primera-web que nous avons commencé dans les leçons précédentes.

Remplacez le contenu de votre body par une structure contenant :

Un header.
Un menu nav.
Un main.
Une section principale avec un h1.
Une section À propos.
Une section Services.
Une section Contact.
Un footer.

Vous pouvez utiliser vos propres textes. L’essentiel pour le moment est de construire une structure claire.

Conservez ce projet. Dans la leçon suivante, nous utiliserons CSS pour transformer cette structure en une page mise en forme.

Créez la structure de votre première page.