Vous souhaitez développer des pages web optimisées sur votre site internet ?
Vous manquez d’idées pour remplir vos pages web ?
Alors, vous êtes au bon endroit !
Afin d’améliorer l’UX de vos pages web, il est possible d’afficher son contenu sous diverses formes : Tableaux, images, listes à puces.
Dans cet article, Kevin Benabdelhak, graphiste indépendant chez K-Graphiste, vous propose simplement de (re)découvrir 10 éléments HTML à publier sur votre site web pour optimiser votre référencement naturel et enrichir votre contenu.
Table des matières
Qu’est-ce qu’un élément HTML ?
Si vous êtes débutant dans le développement web, alors voici une introduction aux éléments HTML.
En maîtrisant les balises du langage HTML, vous pouvez :
- Gagner du temps sur les aspects techniques
- Optimiser chaque type de contenus
Définition
Un élément HTML est une balise utilisée pour structurer le contenu d’une page web. Il s’agit d’un élément de code qui définit une partie spécifique du contenu et lui donne du sens…
Les éléments HTML incluent des titres, des paragraphes, des listes, des liens, des images, des tableaux et des formulaires.
Bien sûr, chaque élément HTML dispose d’un objectif bien précis sur une page web.
C’est ce que nous allons voir ensemble.
Comment fonctionnent les balises HTML ?
Chacune des balises HTML se compose d’un nom, d’un ou plusieurs attributs et d’un contenu spécifique.
Par exemple, pour insérer une image sur une page web, vous utilisez la balise <img>.
Il est possible de lui spécifier des options supplémentaires sous la forme d’attribut HTML.
Les attributs HTML sont simplement des informations supplémentaires sur l’élément et peuvent inclure des informations de style, de classe et de contenu.
Par exemple, voici comment afficher notre image :
<img alt=”description” src=”dossier/image-1.jpg”>
Cet exemple contient :
- L’attribut “src” pour renseigner l’emplacement du fichier de l’image,
- Ainsi que l’attribut “alt” pour indiquer la description.
Quels sont les 8 types de balises HTML fondamentales ?
Il existe plusieurs types de balise HTML, certaines sont dédiées à la structure de votre page, et d’autres propres aux contenus.
Voici les types de balises HTML utilisées très fréquemment et accompagnées de quelques exemples.
Note : il en existe plein d’autres, voici guide complet des éléments HTML de Mozilla.
Balises de structure de base
Les balises de structure de base sont essentielles pour la création d’un document HTML.
Elles définissent les principales sections du document et contiennent des informations telles que le titre et les métadonnées.
C’est ainsi que les navigateurs web déchiffrent le contenu de la page et l’affichent correctement.
Exemples
- <html> encadre tout le contenu de la page et indique au navigateur qu’il s’agit d’une page HTML.
- <head> contient des informations concernant le document HTML, comme le titre de la page, les métadonnées et les liens vers les feuilles de style externes.
- <title> spécifie le titre de la page web, qui est affiché dans le titre de la fenêtre du navigateur et dans les résultats des moteurs de recherche.
- <body> contient tout le contenu visible de la page web, comme le texte, les images, le contenu multimédia et les liens.
Balises de section
Avec les balises de section, le développeur web organise son contenu en plusieurs sections logiques, telles que des articles, un contenu principal ou des informations supplémentaires.
Ces balises servent à donner une structure à un document HTML et à organiser son contenu en différents blocs qui peuvent être facilement identifiés par les navigateurs web.
Exemple
- <section> regroupe des contenus liés qui forment une section logique d’un document HTML.
- <article> encadre un contenu autonome qui peut être réutilisé ou redistribué indépendamment du document HTML dans lequel il se trouve.
- <main> encadre le contenu principal d’un document HTML.
- <nav> encadre le contenu de la navigation principale d’un document HTML.
- <aside> encadre des contenus qui ne sont pas directement liés au contenu principal d’un document HTML, comme des informations supplémentaires ou des liens vers des pages externes.
- <header> encadre le contenu du haut de la page, comme le titre, la navigation, les logos et les liens vers des pages externes.
Balises de titre
Les balises de titre servent à ajouter du texte au document HTML qui apparaît comme un titre ou sous-titre sur la page web affichée par un navigateur web.
Les balises H1, H2, H3 et H4 sont les principales balises de titre pour organiser le contenu avec différents niveaux de titres.
Exemples
- <h1> encadre le titre principal d’un document HTML.
- <h2> encadre des titres secondaires qui sont des sous-titres de niveau 2.
- <h3> encadre des titres tertiaires qui sont des sous-titres avec un niveau inférieur aux titres secondaires.
- <h4> encadre des titres quaternaires qui sont des sous-titres avec un niveau inférieur aux titres tertiaires.
Balises de liste
Les balises de liste servent à ajouter des listes au document HTML. Elles permettent aux codeurs web d’organiser le contenu en groupes logiques pour faciliter la lecture et la navigation.
Il existe 3 principales balises de liste :
- ul (liste non-ordonnée),
- ol (liste ordonnée),
- et dl (liste de définitions).
Exemples
- <ul> crée une liste non-ordonnée. C’est une liste dont les éléments ne sont pas numérotés.
- <li> encadre chaque élément d’une liste.
- <dl> crée une liste de définitions. C’est une liste qui contient des définitions ou des explications.
- <ol> crée une liste ordonnée. C’est une liste dont les éléments sont numérotés.
Balises d’image
Les balises d’image servent à insérer des images ou des contenus multimédias au document HTML.
Grâce à ces balises, les codeurs web ajoutent du contenu visuel à une page, ce qui peut être utile pour attirer l’attention sur un produit ou service ou tout simplement pour rendre une page plus attrayante.
La balise img est généralement utilisée pour insérer des images, tandis que la balise figure est utilisée pour encadrer des contenus multimédias comme des vidéos.
Exemples
- <img> insère une image dans un document HTML.
- <figure> encadre un contenu multimédia, comme une image ou une vidéo.
Balises de texte
Les balises de texte servent à ajouter du contenu textuel au document HTML.
Ainsi, les développeurs web organisent le texte en paragraphes lisibles et metent en évidence certains mots ou phrases.
Les principales balises de texte sont :
- p (paragraphe),
- span (mots ou phrases),
- strong (texte mis en évidence).
Exemples
- <p> encadre un paragraphe de texte.
- <span> encadre des éléments de texte plus petits qu’un paragraphe, comme des mots, des phrases ou des lignes.
- <strong> met en évidence un texte, en le rendant plus visible ou plus important.
Balises de formulaire
Les balises de formulaire servent à créer des formulaires HTML qui peuvent être remplis par les utilisateurs.
Les codeurs web définissent les champs et zones de saisie au document, ce qui s’avère utile pour recueillir des informations telles que le nom, l’adresse e-mail ou les informations bancaires d’un utilisateur.
Les principales balises de formulaire sont form, input et textarea.
Exemples
- <form> crée un formulaire. C’est l’ensemble des champs qui sont renseignés par un utilisateur.
- <input> crée un champ dans un formulaire dans lequel un utilisateur va saisir ses informations.
- <textarea> crée un champ de texte dans un formulaire dans lequel un utilisateur peut entrer un bloc de texte.
Balises de médias
Les balises de médias servent à intégrer des médias tels que des vidéos ou des fichiers audio au document HTML.
Grâce aux balises de médias, un développeur peut ajouter du contenu multimédia à une page web, ce qui peut être utile pour montrer un produit ou service en action ou simplement pour ajouter un peu plus d’interactivité à une page.
La balise video est généralement utilisée pour insérer des vidéos, tandis que la balise audio est utilisée pour insérer des fichiers audio.
Exemples
- <video> insère une vidéo dans un document HTML.
- <audio> insère un fichier audio dans un document HTML.
10 éléments HTML à mettre en place
Quel que soit l’objectif de votre site internet, il est nécessaire d’inclure plusieurs éléments HTML pour mettre en forme vos pages web.
Enrichissez le contenu de vos pages web en publiant ces 10 éléments HTML :
- Titres et sous-titres (h1, h2, h3, etc.)
- Paragraphes
- Listes (numérotées et non numérotées)
- Liens
- Images
- Formulaires
- Tableaux
- Vidéos
- Audio
- Boutons
Voyons tout ça en détail…
1. Titres (h1, h2, h3…)
<h1>Titre principal du contenu</h1>
Les titres sont un moyen efficace de structurer le contenu de votre site web et de le rendre plus lisible.
Les balises h1 à h6 vous aide à faire passer votre message et à mettre en évidence les parties importantes de votre contenu.
2. Paragraphes
<p>Un paragraphe descriptif</p>
Les paragraphes sont essentiels pour rédiger du texte descriptif ou informatif. En utilisant des paragraphes, vous pouvez organiser votre contenu et le rendre plus facile à lire et à comprendre.
Veillez toutefois à sauter des lignes afin d’améliorer la lisibilité du texte.
3. Listes à puces
Les listes sont un moyen pratique pour la mise en forme de vos idées ou d’informations importantes.
Les types de listes <ol> et <ul> sont utiles pour hiérarchiser le contenu et le rendre plus accessible à lire et à comprendre.
Exemple
<ul>
<li>Élément 1</li>
<li>Élément 2</li>
<li>Élément 3</li>
</ul>
4. Liens
<a href= »url-du-site »>Lien vers le site</a>
Les liens sont essentiels pour relier votre contenu à d’autres pages de votre site ou à d’autres sites.
Lier vos pages web entre elles améliore également votre référencement naturel et amène plus de visiteurs sur votre site internet.
5. Images
<img src= »url-de-limage.jpg » alt= »Description de l’image »>
Une image vaut mille mots !
Et c’est d’autant plus vrai sur une page web.
Les images ajoutent du contexte et du visuel à votre contenu, ce qui le rend plus intéressant et le démarque.
6. Formulaires
Les formulaires sont un moyen pratique de recueillir des informations auprès de vos utilisateurs.
Recueillez des informations utiles telles que des noms, des adresses e-mail et des commentaires.
Exemple
<form action= »url-du-formulaire »>
<input type= »text » name= »nom » placeholder= »Votre nom »>
<input type= »email » name= »email » placeholder= »Votre email »>
<input type= »submit » value= »Envoyer »>
</form>
7. Tableaux
Les tableaux HTML sont utiles pour afficher des informations ou des données en lignes et en colonnes.
Les tableaux sont un outil pratique pour organiser et présenter votre contenu de manière attrayante et facilement lisible.
Un super moyen pour comparer des données en fonction de leurs caractéristiques ou des propriétés distinctes.
Les tableaux HTML sont également utiles pour créer des formulaires et des systèmes de navigation.
Vous pouvez par ailleurs utiliser des tableaux pour organiser des images, des liens et des informations connexes.
Exemple
<table>
<tr>
<th>Nom</th>
<th>Age</th>
</tr>
<tr>
<td>Jean Dupont</td>
<td>35 ans</td>
</tr>
<tr>
<td>Louise Martin</td>
<td>25 ans</td>
</tr>
</table>
8. Vidéos
Les vidéos sont une excellente façon de présenter votre contenu de manière dynamique et interactive.
Par ailleurs, les vidéos sont utilisées pour améliorer le référencement de votre site web et pour encourager les visiteurs à rester plus longtemps sur votre site.
Exemple
<video width= »400″ controls>
<source src= »url-de-la-video.mp4″ type= »video/mp4″>
Votre navigateur ne supporte pas les vidéos HTML
</video>
9. Audio
Les fichiers audio sont un moyen pratique de transmettre votre message à vos utilisateurs.
Les fichiers audio peuvent être utilisés pour créer des podcasts, des conférences en ligne et bien plus encore.
Exemple
<audio controls>
<source src= »url-du-fichier-audio.mp3″ type= »audio/mpeg »>
Votre navigateur ne supporte pas les fichiers audio HTML
</audio>
10. Boutons
<button type= »submit »>Envoyer</button>
Les boutons HTML sont un moyen efficace de guider vos utilisateurs à travers votre site web et de leur donner des moyens d’interaction.
Les boutons peuvent être utilisés pour créer des liens, des formulaires, des boutons d’appel à l’action (CTA)…
Conseil supplémentaire : pensez à tester votre code HTML sur W3C. Cet outil gratuit vous permettra de découvrir les erreurs de hiérarchie et de syntaxe dans votre code. Idéal pour trouver ce que vous pourriez améliorer sur vos pages web !
audrey : merci Kévin sur cette introduction aux principaux éléments HTML. Je permets d’ajouter qu’il est utile d’avoir des notions sur les principaux éléments de HTML même si vous n’êtes pas développeur. Ainsi, vous comprenez comment les pages web sont construites. Vous allez communiquer de manière plus efficace avec les développeurs web, voire créer des pages web simples par vous-même.
FAQ – 3 questions courantes sur les éléments HTML
Pourquoi respecter les balises HTML ?
Les balises HTML sont importantes pour bien organiser le contenu du site internet de votre entreprise. Cela le rend plus agréable pour les utilisateurs et plus accessible aux robots d’explorations des moteurs de recherches. En respectant les balises HTML, vous optimisez donc le référencement de votre site internet pour le rendre plus visible sur les moteurs de recherche.
Quels sont les autres éléments HTML que je peux publier ?
En plus des éléments HTML mentionnés dans l’article, il existe d’autres éléments HTML tels que les blocs de citation, les commentaires, les marqueurs de code, les sauts de ligne, les légendes, les entrées cachées, les balises meta, les blocs de code HTML et bien d’autres.
Comment utiliser correctement les balises HTML ?
Pour utiliser correctement les balises HTML, vous devez vous assurer que vous respectez les normes HTML et que vous respectez la syntaxe correcte. Vous devriez également vérifier que vos balises HTML sont correctement fermées et que vous utilisez le bon type d’élément HTML pour le contenu que vous souhaitez publier.
Conclusion sur les éléments HTML nécessaires pour enrichir
En Marketing Digital, il est important de rendre votre contenu plus efficace et plus facile à lire.
C’est pourquoi les balises HTML sont essentielles pour structurer et organiser le contenu de votre site web.
Un dernier conseil : n’intégrez pas forcément toutes les balises HTML possibles sur vos pages… Le plus important est de respecter son objectif ainsi que l’intention de recherche.
Ainsi, vous pourrez améliorer le référencement de votre site et encourager les visiteurs à rester plus longtemps sur votre site.
Assurez-vous de respecter correctement les balises HTML et d’améliorer continuellement votre code HTML !
Encore un petit effort et vous disposerez de votre propre thème WordPress.
Avez-vous déjà manipulé du code HTML ? Si oui, à quelle occasion ?
