Le CV classique est-il mort ? Non.
Mais le CV HTML a clairement passé un niveau.
Imagine un CV :
Pas en Word ❌
Pas en PDF ❌
Scrollable ✔️
Adapté au mobile ✔️
Construit avec du code ✔️
Et surtout :
« Ce CV montre ma façon de penser en HTML. »
Un CV HTML, surtout dans le monde du frontend / du logiciel, veut dire :
« Je ne me contente pas de parler — je construis. »
HTML sémantique + accessibilité + structure = un flex discret 😎
🎯 POURQUOI UN CV HTML A DU SENS ?
Regardons ça du point de vue des RH 👀
Que t’apporte un CV HTML ?
✅ Tes compétences en code deviennent concrètes
✅ Ta compréhension de la hiérarchie HTML est visible
✅ Montre ta sensibilité au SEO et au sémantique
✅ Fonctionne comme un portfolio
✅ Facile à partager en ligne (un seul lien)
Mais soyons réalistes :
❗ Certaines entreprises demandent encore un PDF
👉 Solution : CV HTML + version PDF
CV HTML = personnage bonus débloqué 🎮
🧱 LA STRUCTURE DE BASE D’UN CV HTML
(Si cette base est solide, le reste coule de source)
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Cansu Porsuk | Développeuse Frontend</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="CV Développeuse Frontend - HTML, CSS, JavaScript">
</head>
<body>
</body>
</html>
🧠 Les héros discrets ici :
lang="fr"→ accessibilitéviewport→ compatibilité mobiledescription→ SEO + aperçu lors du partage
📌 Même un CV HTML peut penser au SEO.
🧑💼 EN-TÊTE : « VOICI QUI JE SUIS »
(La règle des 5 secondes)
<header>
<h1>Cansu Porsuk</h1>
<p>Développeuse Frontend</p>
<address>
<a href="mailto:cansu@example.com">cansu@example.com</a><br>
<a href="https://github.com/cansuporsuk">GitHub</a> |
<a href="https://linkedin.com/in/cansuporsuk">LinkedIn</a>
</address>
</header>
Pourquoi cette structure ?
<h1>→ Titre principal du CV (un seul)<p>→ Description du rôle<address>→ Sémantiquement correct pour les contacts
❌ <div class="contact">
✅ <address>
HTML est content, les lecteurs d’écran aussi 😄
📝 À PROPOS DE MOI
Court, clair, efficace
<section>
<h2>À propos</h2>
<p>
Je suis une développeuse frontend qui aime créer
des interfaces propres, accessibles et orientées performance.
</p>
</section>
🧠 Conseil en or :
N’écris pas ce que tu fais
Explique comment tu penses
❌ « Esprit d’équipe »
✅ « L’accessibilité et la lisibilité sont mes priorités »
🧠 COMPÉTENCES
Liste-les — mais sois honnête
<section>
<h2>Compétences</h2>
<ul>
<li>HTML5 (HTML sémantique, accessibilité)</li>
<li>CSS3 (Flexbox, Grid)</li>
<li>JavaScript (ES6+)</li>
<li>Design responsive</li>
</ul>
</section>
🎯 Astuces :
- Pas 30 compétences
- Écris « utilisé », pas juste « connu »
- CV HTML = CV honnête
💼 EXPÉRIENCE
Ici, <article> brille ⭐
<section>
<h2>Expérience</h2>
<article>
<h3>Développeuse Frontend – XYZ Company</h3>
<time datetime="2022-01">2022</time> –
<time datetime="2024-06">2024</time>
<p>
Développement d’interfaces utilisateur
et amélioration des performances et de l’accessibilité.
</p>
</article>
</section>
Pourquoi <time> ?
- Les dates sont compréhensibles par l’humain et la machine
- Les systèmes de tri de CV adorent ça
📌 Même les bots RH peuvent lire ce CV 🤖
🎓 FORMATION
Simple et propre
<section>
<h2>Formation</h2>
<article>
<h3>Génie informatique</h3>
<p>Université ABC — 2018–2022</p>
</article>
</section>
❌ Longues listes de cours
✅ Diplôme + école + années
🧩 PROJETS (LA VRAIE VITRINE)
La partie qui fait toute la différence 💥
<section>
<h2>Projets</h2>
<article>
<h3>Blog personnel</h3>
<p>
Blog personnel développé avec
HTML, CSS et JavaScript.
</p>
<a href="https://example.com">Voir en ligne</a>
</article>
</section>
🧠 Pour décrire un projet :
- Qu’as-tu construit ?
- Avec quelles technologies ?
- Y a-t-il un lien ?
❗ Pas de lien → projet suspect 😄
🧱 MINI PROJET RÉEL
Tout-en-un
<article>
<h2><strong>Exemple de CV HTML</strong></h2>
<p>
Ce CV est <em>spécialement</em>
conçu pour les <mark>développeurs frontend</mark>.
<small>(Inspiration bienvenue)</small>
</p>
<p>
<del>Mémoriser</del>
<ins>Comprendre</ins>
</p>
</article>
Ce code est :
- Sémantique ✔️
- Lisible ✔️
- Optimisé SEO ✔️
🚫 ERREURS LES PLUS COURANTES DANS UN CV HTML
❌ Utiliser <div> partout
❌ Utiliser <h1> cinq fois
❌ Étouffer la page avec du CSS inline
❌ Oublier le responsive
❌ Liens de projets cassés
🧠 RÈGLES D’OR (À SAUVEGARDER)
- HTML = sens
- CSS = apparence
- CV = honnêteté
- Projets = preuve
🎯 TABLEAU RÉCAPITULATIF RAPIDE
| Section | Balise |
|---|---|
| Structure de page | html, body |
| En-tête | header |
| Sections | section |
| Expérience | article |
| Dates | time |
| Contact | address |
| Listes | ul, li |
