Étape 1 : Déclaration du type de document et définition de la structure de base
Tout d’abord, créez un nouveau fichier texte et enregistrez-le avec l’extension .html. Par exemple : ma-page.html.
Ouvrez ce fichier dans un éditeur de texte (comme Notepad, Sublime Text ou Visual Studio Code) et commencez par déclarer le type de document en ajoutant la balise <!DOCTYPE html> en haut du fichier. Cette balise indique au navigateur que le fichier est une page web HTML5.
Ensuite, ajoutez les balises <html>, <head> et <body> pour définir la structure de base de la page :
<!DOCTYPE html>
<html lang="fr">
<head>
<!-- Métadonnées et autres informations ici -->
</head>
<body>
<!-- Contenu de la page ici -->
</body>
</html>NB : En HTML, les commentaires sont délimités par <!-- et -->. Tout ce qui se trouve entre ces marqueurs est ignoré par le navigateur et n’affecte pas l’affichage ou le comportement de la page.
Focus sur ces 3 balises fondamentales et obligatoires dans tout document html :
<html>: C’est la balise racine de tout document HTML. Elle englobe toutes les autres balises de la page. Cette balise indique au navigateur que le contenu qui suit est du code HTML. Elle contient deux parties principales :<head>et<body>.<head>: Cette balise contient des informations sur le document qui ne sont généralement pas visibles pour l’utilisateur. Cela inclut des éléments comme le titre de la page (balise<title>), les liens vers les feuilles de style CSS (balises<link>), les scripts JavaScript (balises<script>), les métadonnées (balises<meta>), et d’autres informations qui aident le navigateur à traiter correctement la page.<body>: C’est la partie du document HTML qui contient le contenu visible sur la page web. Tout ce qui est destiné à être affiché dans la fenêtre du navigateur et interactif avec l’utilisateur, comme les textes, images, liens, formulaires, etc., est placé à l’intérieur de cette balise.
N’oubliez pas d’ajouter l’attribut lang à la balise <html> pour indiquer la langue principale de la page (dans cet exemple, « fr » pour le français).
Étape 2 : Ajout des métadonnées et des informations essentielles
Les balises de métadonnées en HTML, qui doivent donc être déclarées dans l’en-tête <head></head> sont utilisées pour stocker des informations sur la page web qui ne sont pas affichées directement sur la page visible par les utilisateurs.
Ces informations peuvent être lues par les navigateurs, les moteurs de recherche et d’autres services web.
Nous allons ajouter quelques-unes des principales balises de métadonnée dans notre document html.
Dans la section <head>, ajoutez les balises suivantes :
<meta charset="UTF-8">: définit l’encodage des caractères de la page (UTF-8 est recommandé).<meta name="viewport" content="width=device-width, initial-scale=1.0">: définit la taille de la fenêtre d’affichage et le niveau de zoom initial pour les appareils mobiles.<meta name="description" content="Description courte et pertinente de la page">: fournit une description concise de la page, utile pour les moteurs de recherche et les utilisateurs.
C’est généralement cette description qui est utilisée dans les résultats de recherche – c’est pourquoi on essaie de faire en sorte que son contenu ne dépasse pas 150/160 caractères :
<title>Titre de la page - Nom de votre site</title>: définit le titre de la page, qui s’affiche dans l’onglet du navigateur et dans les résultats de recherche.
A ce stade, voici à quoi devrait ressemble l’en-tête de votre page web :
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Apprenez à créer une page HTML optimisée pour les moteurs de recherche">
<title>Créer une page HTML optimisée - Mon premier tutoriel</title>
</head>Étape 3 : Ajout du contenu et de la structure sémantique
L’utilisation des balises sémantiques
Pour créer une page HTML attrayante, il est essentiel de la diviser en différentes sections.
Chacun de ces blocs jouera un rôle spécifique dans la composition de la page. Cette approche permet d’envisager diverses structures pour une page HTML. Une configuration typique pourrait être la suivante :
Comme vous l’aurez probablement deviné, nous allons travailler sur la partie visible de la page html, donc dans la balise <body>.
Pour ce faire, et comme l’illustre l’image précédente, il va falloir utiliser des balises spécifiques, que l’on appelle également des balises sémantiques : <header>, <nav>, <main>, <article>, <section>, <aside> et <footer>
Pourquoi appelle-t-on cela des balises « sémantiques » ?
Tout simplement parce qu’elles ont été conçues de manière à indiquer aux lecteurs de la page (navigateurs / moteurs de recherche) une indication sur leur contenu.
Par exemple, la balise <header> (à ne pas confondre avec la balise <head> !) doit être utilisée pour définir l’en-tête de la page ou d’une section, et la balise <footer> pour le pied de page.
La balise <nav> est réservée aux éléments de navigation, tandis que <main> contient le contenu principal de la page.
À l’intérieur de <main>, on peut utiliser des balises <article> pour définir des éléments de contenu indépendants et <section> pour regrouper des contenus thématiquement liés.
Enfin, la balise <aside> est utilisée pour les contenus secondaires, tels que les barres latérales ou les encadrés.
Par exemple, pour créer un en-tête, un menu de navigation, un contenu principal et un pied de page, vous pouvez utiliser les balises suivantes :
<body>
<header>
<h1>Mon premier tutoriel</h1>
<nav>
<ul>
<li><a href="index.html">Accueil</a></li>
<li><a href="tutoriels.html">Tutoriels</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>Créer une page HTML optimisée pour les moteurs de recherche</h2>
<p>Le but de ce tutoriel est d'apprendre à créer une page HTML simple et efficace...</p>
</article>
</main>
<footer>
<p>© 2023 Mon premier tutoriel. Tous droits réservés.</p>
</footer>
</body>Les balises génériques
Il existe un autre type de balise pour structurer du contenu, que l’on appelle des balises « génériques ».
Contrairement aux balises sémantiques, elle ne donnent aucune info particulière sur leur contenu : elle permettent simplement de créer un conteneur neutre pour d’autres éléments HTML.
Les balises génériques sont généralement représentées par la balise <div>
<div> <!-- Contenu de la balise générique --> </div>Structurer le contenu
Comme vous l’avez sans doute remarqué, la balise <article> est utilisée pour définir un élément de contenu indépendant et potentiellement réutilisable dans une page web, comme un article de blog, une news ou un commentaire.
À l’intérieur de la balise <article>, on retrouve généralement une structure hiérarchique de titres, de paragraphes et d’autres éléments de contenu textuel :
<article>
<h2>Créer une page HTML optimisée pour les moteurs de recherche</h2>
<p>Le but de ce tutoriel est d'apprendre à créer une page HTML simple et efficace...</p>
</article>Voyons un peu plus en détail les différentes balises que vous pouvez utiliser dans le corps d’un article :
Les balises de titres (<h1>, <h2>, <h3>, etc.) :
Les balises de titres permettent de structurer le contenu textuel en sections et sous-sections, en définissant une hiérarchie.
La balise <h1> doit être utilisée pour le titre principal de la page ou de l’article, et les balises <h2>, <h3>, <h4>, <h5> et <h6> sont utilisées pour les titres de niveaux inférieurs. Il est important de respecter l’ordre des niveaux pour une bonne structuration du contenu et une meilleure compréhension pour les moteurs de recherche.
Aparté : balise <h1> vs balise <title>
Concernant la balise <h1>, vous remarquerez qu’elle est utilisée dans la partie <header> du contenu.
En réalité, cette balise a un statut particulier dans une page html : elle ne doit être présente qu’une seule fois, et fait office de titre officiel de la page pour l’utilisateur qui lit la page.
On fait souvent l’amalgame entre cette balise <h1> et la balise <title> d’une page, car les thèmes des CMS comme WordPress utilisent le même contenu pour les remplir.
Vous devez si possible distinguer les contenus de ces 2 balises, en gardant ceci à l’esprit : le contenu de la balise <h1> est fait pour les utilisateurs, et le contenu de la balise <title> pour les moteurs de recherche !
Des plugins comme Yoast SEO vous permettent de distinguer ce contenu de la balise <h1> et de la balise <title>, simplement en remplissant le champ « titre SEO » dans le formulaire dédié à l’apparence dans les moteurs de recherche :
Les balises de paragraphe (<p>)
La balise <p> est utilisée pour définir un paragraphe de texte. Les paragraphes sont des blocs de texte séparés visuellement les uns des autres par des marges ou des espacements.
Ils permettent d’organiser et de présenter le contenu textuel de manière claire et lisible.
La balise <img>
La balise <img> est utilisée pour intégrer une image dans une page web. Elle est auto-fermante et ne nécessite pas de balise de fermeture. L’attribut src est utilisé pour indiquer l’URL de l’image, et les attributs alt et title peuvent être ajoutés pour fournir une description textuelle de l’image et un titre qui s’affiche au survol de la souris. La description textuelle est importante pour l’accessibilité et le référencement, car elle permet aux utilisateurs malvoyants et aux moteurs de recherche de comprendre le contenu de l’image. Voici un exemple d’utilisation de la balise <img> :
<img src="exemple-image.jpg" alt="Description de l'image" title="Titre de l'image">La balise <a>
Comme nous l’avons vu précédemment, la balise <a> est utilisée pour créer des liens hypertextes, qui permettent aux utilisateurs de naviguer entre différentes pages web ou de télécharger des fichiers. L’attribut href est utilisé pour indiquer l’URL de la ressource liée, et le contenu de la balise <a> sert de texte d’ancrage pour le lien.
La balise <a> est utilisée pour créer des liens hypertextes, qui permettent aux utilisateurs de naviguer entre différentes pages web ou de télécharger des fichiers. L’attribut href est utilisé pour indiquer l’URL de la ressource liée, et le contenu de la balise <a> sert de texte d’ancrage pour le lien.
Les liens hypertextes sont essentiels pour la navigation sur le web et ont également un impact sur le référencement, car ils aident les moteurs de recherche à découvrir et à indexer les pages liées. Voici un exemple d’utilisation de la balise <a> :
<a href="https://www.exemple.com" target="_blank" rel="noopener noreferrer">Cliquez ici pour visiter le site exemple.com</a>Dans cet exemple, les attributs target="_blank" et rel="noopener noreferrer" sont ajoutés pour ouvrir le lien dans un nouvel onglet et améliorer la sécurité du lien.
💡 Rappel utile !
Le sujet a été abordé précédemment mais un rappel ne fait pas de mal tant le sujet est important : En SEO, une ancre de lien (ou anchor text) est le texte cliquable qui apparaît sur un lien hypertexte et qui pointe vers une autre page Web. Les moteurs de recherche utilisent les ancres de lien pour déterminer le sujet de la page vers laquelle le lien pointe.
Un exemple d’ancre de lien est le suivant :
<a href= »https://www.example.com« >Cliquez ici pour en savoir plus sur notre entreprise</a>
Dans cet exemple, le texte cliquable est « Cliquez ici pour en savoir plus sur notre entreprise« .
Lorsque les utilisateurs cliquent sur ce lien, ils seront dirigés vers la page Web spécifiée dans l’attribut href de la balise.
Les moteurs de recherche considèrent le texte de l’ancre de lien comme une indication du sujet de la page vers laquelle le lien pointe. Par conséquent, les propriétaires de sites Web utilisent souvent des ancres de lien pertinentes et descriptives pour aider les moteurs de recherche à comprendre le contenu de leurs pages.
Il est important de noter que l’utilisation abusive d’ancres de lien peut entraîner une pénalité de la part des moteurs de recherche.
La règle d’or à respecter en 2023 semble être la suivante : créez des ancres de lien optimisées (= utilisant des mots clés) pour faire des liens internes vers d’autres pages de votre propre site, mais utilisez plutôt des ancres de lien génériques lorsque vous pointez vers des sites externes (= en reprenant par exemple des termes génériques comme “voir la page”, “cliquez ici pour lire la suite”, ou reprendre l’url du site en guise d’ancre de lien)
Enfin, les balises <img> et <a> peuvent être combinées pour créer des liens d’image, en plaçant la balise <img> à l’intérieur de la balise <a>. Par exemple :
<a href="https://www.exemple.com">
<img src="exemple-image.jpg" alt="Description de l'image" title="Titre de l'image">
</a>Dans ce cas, l’image sert d’ancrage pour le lien, et lorsqu’un utilisateur clique sur l’image, il est redirigé vers l’URL spécifiée dans l’attribut href de la balise <a>.
Autres balises de contenu textuel
Il existe d’autres balises HTML pour décrire et structurer le contenu textuel dans un <article> :
<blockquote>: Utilisée pour citer un extrait de texte provenant d’une autre source, généralement avec une indentation pour le distinguer du reste du contenu.
<q>: Utilisée pour une citation courte en ligne dans un paragraphe.
<cite>: Utilisée pour indiquer la source d’une citation ou la référence d’une œuvre (livre, article, etc.).
<pre>et<code>: Utilisées pour afficher des blocs de code ou des exemples de code source avec une mise en forme fixe et une police monospace.
<strong>et<em>: Utilisées pour mettre en évidence des parties importantes ou spécifiques du texte, respectivement en gras et en italique.
<ul>et<ol>: Comme mentionné précédemment, ces balises sont utilisées pour créer des listes à puces ou numérotées.
Voici un exemple de code que vous pouvez tester pour voir l’utilisation des différentes balises présentées : (à insérer entre vos balises <body> et </body> bien sûr 😉 )
<article>
<h1>Titre principal de l'article</h1>
<p>Introduction à l'article, présentant le sujet et les objectifs de l'article, ainsi qu'un <a href="https://www.exemple.com">lien vers un article connexe dans la même thématique</a></p>
<section>
<h2>Titre de la première sous-section</h2>
<p>Ceci est un paragraphe détaillant le premier point abordé dans l'article.</p>
<ul>
<li>Un élément de la liste à puces</li>
<li>Un autre élément de la liste à puces</li>
</ul>
<p><strong>Mot important</strong> et <em>mot à accentuer</em> dans ce paragraphe.</p>
</section>
<section>
<h2>Titre de la deuxième sous-section</h2>
<blockquote>
<p>Ceci est une citation tirée d'une autre source pour appuyer les propos de l'article.</p>
<cite>Auteur de la citation, Source de la citation</cite>
</blockquote>
<p>Explication et commentaire de la citation précédente, avec une image de son auteur : <img src="img/lien-vers-limage.webp" alt="portrait de l'auteur"/>.</p>
</section>
<section>
<h2>Titre de la troisième sous-section</h2>
<p>Présentation d'un exemple de code :</p>
<pre><code>Exemple de code source</code></pre>
<p>Explication et analyse de l'exemple de code présenté.</p>
</section>
<footer>
<p>Conclusion de l'article, résumant les points abordés et éventuellement proposant des pistes pour de futurs articles ainsi que des liens externes complémentaires sous forme de liste.</p>
<ul>
<li><a href="https://sitecomplementaire1.com">Lien vers le site complémentaire 1</a></li>
<li><a href="https://sitecomplementaire2.com">Lien vers le site complémentaire 2</a></li>
<li><a href="https://sitecomplementaire3.com">Lien vers le site complémentaire 3</a></li>
</ul>
</footer>
</article>Les listes en html
En HTML, les listes sont utilisées pour organiser et structurer des éléments de contenu sous forme de séquences ou de groupes. Il existe trois principaux types de listes en HTML : les listes à puces, les listes numérotées et les listes de description.
- Listes à puces (
<ul>) :
Les listes à puces, ou listes non ordonnées, sont utilisées pour présenter des éléments sans ordre particulier. Chaque élément de la liste est représenté par un point (puce) ou un autre marqueur. Les listes à puces sont créées à l’aide de la balise <ul> (unordered list) et chaque élément de la liste est défini par la balise <li> (list item). Voici un exemple :
<ul>
<li>Élément 1</li>
<li>Élément 2</li>
<li>Élément 3</li>
</ul>2. Listes numérotées (<ol>) :
Les listes numérotées, ou listes ordonnées, sont utilisées pour présenter des éléments dans un ordre séquentiel. Chaque élément de la liste est précédé d’un numéro ou d’une lettre. Les listes numérotées sont créées à l’aide de la balise <ol> (ordered list) et chaque élément de la liste est également défini par la balise <li>. Voici un exemple :
<ol>
<li>Étape 1</li>
<li>Étape 2</li>
<li>Étape 3</li>
</ol>3. Listes de description (<dl>) :
Les listes de description sont utilisées pour présenter un ensemble de termes et leurs définitions ou descriptions. Les listes de description sont créées à l’aide de la balise <dl> (description list). Chaque terme est défini par la balise <dt> (description term) et chaque définition ou description est définie par la balise <dd> (description definition).
Voici un exemple :
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language, un langage de balisage pour créer des pages web.</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets, un langage de feuilles de style pour décrire l'apparence et la mise en forme des pages web.</dd>
</dl>Dans l’exemple fourni précédemment, nous avons utilisé une liste à puces pour créer un menu de navigation :
<nav>
<ul>
<li><a href="index.html">Accueil</a></li>
<li><a href="tutoriels.html">Tutoriels</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>Ici, chaque élément <li> contient un lien hypertexte <a> vers une autre page du site. Cette liste à puces permet d’organiser et de structurer le menu de navigation de manière claire et accessible.