Imagine un carnet :
Personne n’y griffonne
Les pages ne se perdent jamais
Les dates sont bien ordonnées
Les émotions respirent ligne par ligne
Et ce carnet… est écrit en HTML.
Dans cet article, nous allons :
Utiliser HTML pour construire une structure
Apprendre l’esprit du journal avec des balises sémantiques
Créer un mini-projet qui a vraiment du sens dans la vie réelle
Pas de frameworks.
Pas de backend.
Juste HTML + CSS + toi.
🧠 Qu’est-ce qu’un Journal Numérique — et qu’est-ce qu’il n’est pas ?
Ce qu’un Journal Numérique EST :
- Une collection d’entrées datées
- Un espace personnel pour les pensées
- Clair et lisible
- Une structure de contenu basée sur le temps
Ce qu’un Journal Numérique N’EST PAS :
- Les réseaux sociaux ❌
- Obligé d’être un blog ❌
- Une démonstration de style ❌
Ce projet dit une chose très clairement :
« J’écris pour moi. »
🧩 Que t’apprend ce projet ?
Avec ce mini-projet, tu apprends vraiment :
- À construire une structure signifiante avec HTML
- Quand et pourquoi utiliser
<article> - Pourquoi
<time>vaut de l’or - La vraie puissance de
<p> - La logique de la lisibilité
- La discipline de ne pas tout faire avec
<div>😄
🧱 Concevoir la Page du Journal (Modèle Mental d’Abord)
Avant d’écrire du code, réfléchissons.
Une page de journal se compose de :
Page
├── Titre
├── Description
├── Entrées du journal
│ ├── Date
│ ├── Texte
│ └── (notes optionnelles)
Équivalents HTML :
| Objectif | Balise |
|---|---|
| En-tête de page | <header> |
| Entrée du journal | <article> |
| Date | <time> |
| Texte | <p> |
🧱 Squelette HTML (Départ Propre et Signifiant)
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Mon Journal Numérique</title>
<meta name="description" content="Journal numérique personnel créé avec HTML">
</head>
<body>
<header>
<h1>📓 Mon Journal Numérique</h1>
<p>Pensées du jour, sans filtre.</p>
</header>
</body>
</html>
📌 Astuce :
Dans les projets de journal :
- Les titres doivent rester simples
- Les descriptions doivent être personnelles
Ce n’est pas une landing page 😄
📅 Entrée du Journal = <article> (Le Personnage Principal)
Chaque jour = un contenu indépendant
C’est pourquoi <article> est le choix parfait.
<article>
<h2>
<time datetime="2025-01-10">10 janvier 2025</time>
</h2>
<p>
Aujourd’hui, j’ai réalisé que créer un journal numérique
avec HTML est bien plus agréable que je ne l’imaginais.
</p>
</article>
Pourquoi <article> ?
- Signifiant à lui seul
- Peut être partagé ailleurs
- Idéal pour un hybride blog + journal
🕰️ La Balise <time> : Petite mais Maligne
<time datetime="2025-01-10">10 janvier 2025</time>
Pourquoi elle est importante :
- Lisible par les machines
- Amie du SEO
- Indique que le contenu est lié au temps
📌 Règle d’or :
S’il y a une date → utilise <time>.
🧠 Comment Écrire le Texte du Journal ? (Stratégie <p>)
❌ Mauvais :
<p>
Aujourd’hui j’ai fait ceci puis cela puis je suis allé là-bas
et ensuite j’ai pensé à ça et puis...
</p>
✅ Bon :
<p>Je me sentais un peu fatigué aujourd’hui.</p>
<p>Mais écrire m’a aidé à clarifier mes idées.</p>
<p>Penser à travers HTML fait du bien.</p>
📌 Règle :
Un paragraphe = une pensée.
📚 Ajouter Plusieurs Jours (Un Vrai Journal)
<article>
<h2><time datetime="2025-01-09">9 janvier 2025</time></h2>
<p>Mon esprit était très chargé aujourd’hui.</p>
</article>
<article>
<h2><time datetime="2025-01-10">10 janvier 2025</time></h2>
<p>Mettre mes pensées par écrit m’a soulagé.</p>
</article>
HTML dit doucement :
« Le temps avance. »
🎨 Donner un Air de Carnet avec le CSS (Sans Exagérer)
body {
font-family: Georgia, serif;
background-color: #f4f1ee;
color: #333;
padding: 2rem;
}
header {
margin-bottom: 3rem;
}
article {
background: #fff;
padding: 1.5rem;
margin-bottom: 2rem;
border-radius: 10px;
}
time {
color: #777;
font-size: 0.9rem;
}
p {
line-height: 1.8;
max-width: 650px;
}
📌 Astuce pratique :max-width est la clé secrète de la lisibilité.
✨ Des Touches HTML qui Donnent de la Personnalité au Journal
🟡 Pensées Importantes
<p><mark>Aujourd’hui, je me suis senti fier de moi.</mark></p>
💬 Voix Intérieure (Comme une Citation)
<blockquote>
Aujourd’hui, il fallait s’arrêter et respirer.
</blockquote>
🤫 Pensées Cachées
<details>
<summary>Ce que je n’ai dit à personne aujourd’hui</summary>
<p>En réalité, j’avais un peu peur.</p>
</details>
HTML + émotion = ❤️
😱 Le Piège de la Fermeture Automatique de <p> (Erreur Réelle)
<p>Je me sentais bien aujourd’hui
<div>Bonjour</div>
Le navigateur dit :
« J’ai fermé la balise
<p>pour toi. De rien. »
📌 Leçon :
Les projets de journal exigent un HTML propre.
Ferme tes balises consciemment.
🧠 Le SEO ? Même les Journaux en Profitent
Google vérifie :
- Les paragraphes sont-ils séparés ?
- Les dates ont-elles du sens ?
- La structure est-elle propre ?
Cette structure peut :
- Devenir un blog
- Être archivée
- Grandir avec le temps
🧠 Une Analogie de la Vie Réelle
Un journal numérique en HTML, c’est comme :
- Un carnet verrouillé 🔐
- Un thérapeute 🛋️
- Un espace pour se parler à soi-même, pas à Internet
🏁 Conclusion : Le Code, Ce N’est Pas Que du Code
Ce que tu apprends avec ce projet :
- HTML est un langage de structure
- Même les émotions ont besoin d’ordre
- Peu de code peut porter beaucoup de sens
Parfois, écrire du code ne sert pas à créer des sites web —
mais à se reconstruire.
