15 balises HTML que les spécialistes du marketing numérique doivent connaître

15 balises HTML que les spécialistes du marketing digital doivent connaître

En tant que spécialistes du marketing digital , on nous apprend, à juste titre, à laisser le code à ceux qui l’ont étudié ou à risquer la colère de votre équipe de développement. Il s’agit d’une frontière claire et respectée; si vous ne réécrivez pas notre copie, nous ne toucherons pas à votre codage.

C’est le cas de la plupart des agences, qui ont la chance de posséder à la fois un service marketing et un service développement.

Le fait est que cela ne peut pas être dit pour nos frères et sœurs « internes » ou « côté client », qui n’ont souvent pas de soutien au développement sous la main. Si quelque chose ne fonctionne pas correctement sur le site Web de l’entreprise, ils peuvent tenter de résoudre les erreurs eux-mêmes.

Qu’est-ce que le HTML ?

HTML signifie Hyper Text Markup Language et c’est le langage de balisage standard pour les pages Web. Considérez les éléments HTML comme les blocs de construction des pages Web, chaque élément ajoute quelque chose de différent à la structure de la page.

Les éléments HTML se trouvent dans les balises <> . Ils ont une balise de début, telle que <p> pour le paragraphe, et une balise de fermeture, qui dans ce cas serait </p> .

Pourquoi les spécialistes du marketing digital doivent-ils connaître le HTML ?

Ce n’est pas que vous ayez besoin de connaître HTML, vraiment, certainement pas au niveau de la création d’un site Web et de devenir une encyclopédie d’éléments.

99% du temps, vous travaillez sur un site Web pré-construit avec un CMS, vous permettant d’ajouter ou de mettre à jour du contenu. Le CMS fait le travail pour vous.

Cependant, vous ne pouvez pas toujours compter sur ce système pour faire ce que vous voulez, il est donc pratique d’avoir une idée de ce qui pourrait mal se passer techniquement. En termes de référencement , cela peut vraiment améliorer votre compréhension de l’optimisation de contenu et du référencement technique, deux des quatre piliers de la pratique.

Grâce à notre travail de référencement technique au fil des ans, nous avons acquis des connaissances HTML très utiles, qui sont toutes applicables en utilisant les options CMS les plus populaires nous utilisons généralement WordPress , pour info.

Je ne dis pas que nous pouvons créer un site Web à partir de zéro, loin de là, mais cela signifie que nous n’avons pas à embêter nos développeurs pour obtenir de l’aide tout le temps.

Nous avons donc décomposé certains de nos codes HTML couramment utilisés en sections pratiques pour que vous puissiez, espérons-le, apprendre une ou deux choses.

  • Contenu
  • Structure
  • les tables
  • Formulaire
  • Header
  • Bonus
HTML pour le contenu
Web design

HTML pour le contenu

La plupart des systèmes de gestion de contenu permettent un formatage très simple d’un simple clic, d’une manière similaire à vos applications de traitement de texte standard. Cependant, ce n’est pas toujours le cas ; même un CMS aussi simple que WordPress a souvent des blocs/champs qui n’offrent pas cette fonctionnalité, donc si vous souhaitez formater correctement votre contenu, vous aurez besoin de connaissances de base sur les balises HTML.

Pour la plupart des balises de formatage, l’utilisation du HTML est assez simple. Au début du contenu auquel vous souhaitez que la mise en forme s’applique, vous insérerez quelque chose qui ressemble à <x> , avec le ‘x’ remplacé par le code pertinent (par exemple, ce serait un B pour du texte en gras ). À la fin du contenu que vous formatez, vous mettez à nouveau la même balise, mais cette fois avec une barre oblique avant le code pour signifier la fin de la section formatée : </x> .

Il y a beaucoup de choses différentes qui peuvent être insérées à la place du « x » – certaines juste une lettre, d’autres un morceau de code plus long. Ils ont tous des fonctions différentes et fournissent des méthodes utiles pour formater votre contenu là où les boutons habituels ne sont pas disponibles. Nous avons détaillé ci-dessous certaines des balises HTML de contenu les plus utiles, avec des informations sur comment et quand les utiliser.

Bold ou strong

<b>, ou <strong>

Commençons simplement.

Les balises bold et strong vous permettent de mettre en évidence des mots ou des sections de texte importants. Comme on pouvait s’y attendre étant donné leurs noms.

Alors que l’élément <b> était à l’origine destiné à afficher le texte en gras , les nouvelles versions de HTML ont changé sa signification.

L’ élément <strong> est pour le contenu qui est d’une plus grande importance, tandis que l’élément <b> est utilisé pour attirer l’attention sur le texte sans indiquer qu’il est plus important. Le texte en gras peut signifier deux choses différentes, il y a donc deux balises différentes. Un peu déroutant, en cas de doute, nous allons simplement avec <b> dans le contenu.

Italique

<i>, ou <em>

L’ élément HTML <i> est utilisé pour définir des parties de texte qui représentent unalternervoix, tout comme la façon dont vous lisez alternativement dans votre tête à ce moment-là. Le contenu à l’intérieur de <i> est généralement affiché dansitalique.

L’ élément HTML  <em>  est utilisé pour définir le texte mis en évidence, le contenu à l’intérieur de cette balise étant également affiché dans italique.

Liens hypertexte

<a>

Pouvoir ajouter des hyperliens à un élément de contenu est l’un des outils les plus importants de l’arsenal HTML d’un spécialiste du marketing numérique. Lorsqu’il est correctement ancré, le fait d’avoir plusieurs liens vers et depuis chaque page Web s’avérera extrêmement bénéfique pour une campagne de référencement, et en tant que tel, la plupart des systèmes de gestion de contenu rendent l’ajout de liens très simple.

Il existe cependant un certain nombre de circonstances où, même sur d’énormes plateformes comme WooCommerce, les champs de contenu sont limités au shortcode uniquement. Dans ces situations, il est important que vous sachiez comment ajouter des liens à l’ancienne.

Le premier segment de la balise de lien hypertexte est <a href= . Ce court morceau de code définit que vous commencez un lien hypertexte ( <a ) et que vous créez un lien vers une URL ( href= ). Pour obtenir une liste des autres attributs de balise <a>, cliquez ici .

Ensuite, nous allons ajouter l’URL cible et fermer la balise <a> initiale . <a href= » https://www.pixelkicks.co.uk « > . Cela a maintenant donné une destination au lien hypertexte, et il ne reste plus qu’à lui donner une ancre.

Le texte d’ancrage est le texte visible sur la page qui, lorsqu’il est cliqué, dirigera l’utilisateur vers l’URL cible. En shortcode, il est ajouté après la fermeture de la balise <a> initiale, et avant la balise </a> finale pour compléter le lien hypertexte. Voici un exemple de lien hypertexte rempli en shortcode :

<a href=" https://digirank.fr”>Bienvenue sur Digirank !</a>

Cet exemple terminé s’affichera désormais sous le nom Bienvenue sur Digirank ! sur le front-end de votre site.

Html insérer images

Images

<img>

Les images sont un autre élément essentiel de tout contenu en ligne. Presque toutes les pages en contiennent et, comme pour les hyperliens, la plupart des CMS vous permettent de les télécharger très facilement. Mais comment télécharger une image sur une page ou une publication où il n’y a pas de bouton « Ajouter une image » ?

Nous commençons par la balise <img , qui définit la ligne suivante en tant qu’image. Ensuite, nous devons indiquer à la page où trouver l’image choisie. Ce qui doit être tapé ici dépendra du CMS utilisé, mais pour la plupart, il s’agira d’une URL vers l’élément dans la médiathèque. Dans tous les cas, vous devez utiliser le préfixe <img src= < suivi de l’URL ou du nom du fichier.

Avec la source définie, vous devez maintenant fournir un texte alternatif pour l’image, à afficher si l’image ne peut pas. Pour les spécialistes du marketing numérique, il s’agit d’une étape importante, car une balise alt peut être une bonne occasion d’inclure des mots-clés pour un meilleur référencement. Pour ajouter le texte alternatif, vous devez écrire ce qui suit : <img src= » www.example.com ” alt= »Example keyword »

La dernière étape clé pour ajouter une image consiste à définir la taille. Lorsque vous ajoutez une image à une page ou à une publication, vous ne mettez pas réellement l’image sur la page, mais créez plutôt un espace pour qu’elle soit liée et affichée. Pour cette raison, nous devons nous assurer que la page laisse assez de place à l’image. En vérifiant au préalable les dimensions en pixels de l’image, vous pouvez désormais désigner un espace de cette taille à réserver. <img src= » www.example.com  » alt= »Example keyword » width= »100″ height= »100″>.

Il existe de nombreux attributs stylistiques que vous pouvez donner à une image, qui sont définis en ajoutant style= après les dimensions, mais comme il existe de nombreuses variantes, nous n’entrerons pas dans les détails dans cet article. Si vous souhaitez consulter la liste complète des attributs disponibles, cliquez ici .

Vidéo

<vidéo>

Ce n’est un secret pour personne, la vidéo est un élément précieux de toute stratégie de marketing de contenu. De plus en plus d’entreprises utilisent la vidéo pour atteindre leur public cible d’une manière qui rend le contenu facile à digérer et augmente finalement l’engagement.

La vidéo est non seulement idéale pour atteindre les clients et créer le profil en ligne de votre marque, mais elle est également incroyablement bénéfique pour stimuler vos efforts de référencement. L’ajout de vidéos à votre contenu sur site peut augmenter les taux de clics, réduire les taux de rebond et augmenter vos chances d’obtenir des backlinks de haute qualité.

Ainsi, en tant que spécialiste du marketing numérique, vous voudrez savoir comment intégrer du contenu vidéo dans vos articles ou pages de blog.

La clé ici est de vous assurer que vous ajoutez des vidéos d’une manière qui permet la lecture dans la page pour garder l’utilisateur sur votre site Web. L’élément vidéo HTML <video> fait exactement cela.

Nous commençons par la balise <video , qui définit la ligne suivante comme une vidéo. Ensuite, nous l’ouvrons avec la taille de pixel correcte dans laquelle nous voulons afficher la vidéo, donc : <vidéo width=”320″ height=”240″ contrôles>

Semblable à la balise img ci-dessus, nous définirons la source de la vidéo sur la ligne de code suivante, c’est-à-dire : <source src= »/uploads/media/video.mp4″ type= »video/mp4″> avant de fermer avec la balise </video> .

Dans son intégralité, le code ressemblera à ceci :

<video width="320" height="240" controls
     <source src="movie.mp4" type="video/mp4">
</video>

Il s’agit d’une vidéo dans sa forme la plus simple, et de nombreux attributs différents peuvent être ajoutés à vos vidéos, que vous pouvez visualiser ici .

Paragraphe

<p>

De loin la balise HTML la plus simple et sans doute la plus importante, <p> définit un morceau de texte comme un paragraphe ou un corps de texte. La grande majorité du texte standard, simple et courant sera mis entre crochets par <p> et </p> sur une page ou un article donné.

Pour les spécialistes du marketing numérique, il est important que vous compreniez ce que signifie cette balise, car le texte des paragraphes est le dernier échelon de l’échelle SEO et le dernier type de texte que les robots des moteurs de recherche remarqueront. Pour cette raison, assurez-vous que lors de l’ajout de contenu, il y a suffisamment de mots-clés dans vos balises d’en-tête et qu’ils ont été utilisés pour décomposer efficacement les masses de texte de paragraphe en sections pertinentes.

Intégrer

<embed>

Si vous souhaitez créer un contenu riche, attrayant et visuellement attrayant, alors savoir comment intégrer des publications sur les réseaux sociaux dans vos articles de blog change la donne. L’intégration est essentiellement un moyen d’insérer un élément de contenu externe dans votre blog.

Dans le marketing digital , il est important de s’assurer que vos stratégies multiplateformes fonctionnent toutes ensemble en tandem. Cela signifie que si vous avez créé un contenu social pertinent pour votre dernier blog, l’intégrer dans le message lui-même peut non seulement enrichir votre contenu écrit, mais également renforcer vos profils sociaux. Alternativement, la fonctionnalité peut être utilisée pour intégrer du contenu provenant d’une source externe que vos utilisateurs peuvent trouver utile.

La balise HTML embed suit les mêmes principes que ceux dont nous avons parlé précédemment, ouvrant avec <embed> et </embed> pour fermer. Cependant, il est peu probable que vous ayez besoin de coder la source vous-même, car les sites Web de médias sociaux la généreront pour vous. Astuce : lorsque vous cherchez à intégrer une image ou une vidéo, il est préférable d’utiliser les balises <img> ou <video> ci-dessus.

Facebook, Twitter, Instagram et YouTube fournissent tous une fonctionnalité qui fournit un code d’intégration pour une publication individuelle. Copiez et collez simplement ce code dans votre blog et le message apparaîtra.

Blockquote

<blockquote>

L’utilisation de l’élément de citation de bloc peut aider à distinguer une citation du contenu du corps principal. Il peut être utilisé pour insérer une critique ou une citation d’une source externe, et est généralement conçu pour avoir un aspect visuel différent via l’indentation, éventuellement avec un format de texte ou un arrière-plan différent pour le faire ressortir.

Nous commençons une citation de bloc avec la balise d’ouverture <blockquote> . Celui-ci est précédé de la balise de paragraphe <p> avant d’insérer le guillemet et de se terminer par </p></blockquote>.

Voici un exemple :

<blockquote>
     <p>"Insérez une citation ici"</p>
</blockquote>

Si vous souhaitez lier la citation à une source externe, vous pouvez citer le lien avant la citation elle-même, en changeant l’ouverture en <blockquote cite= ”source.com” > . Vous pouvez voir plus d’attributs blockquote ici .

Conception de sites Web

Structure du contenu

Bien structurer votre contenu est crucial à la fois pour la convivialité et à des fins de référencement. En ajoutant des en-têtes, des sauts de ligne et en décomposant votre contenu en listes, vous améliorez non seulement la lisibilité des informations, mais constitue également un facteur de classement de grande valeur aux yeux de Google.

Vous trouverez ci-dessous quelques-unes des balises HTML les plus courantes qui peuvent vous aider à organiser et à structurer votre contenu.

Rubriques H1-H6

<h>

Les en-têtes HTML sont utilisés pour structurer votre contenu en sections et vont de H1 à H6. Ils sont utiles pour optimiser votre page pour les termes de recherche clés et mettre en évidence des mots-clés ou des questions importants qui conduisent ensuite à répondre à la requête des utilisateurs.

H1 est l’en-tête le plus important, et c’est celui qui devrait être tout en haut de la page pour mettre en évidence l’en-tête principal. Il ne doit y avoir qu’un seul en-tête H1 sur une page, et celui-ci doit être suivi des en-têtes H2, H3, etc., en fonction de la hiérarchie de votre contenu et de l’importance de chaque en-tête.

Les en-têtes HTML sont facilement définis par une balise d’ouverture <h> et de fermeture </h> . Par exemple:

<h2> Ceci est la rubrique 2 </h2>
<h4> Ceci est la rubrique 4 </h4>

sauts de ligne

<br>

La balise HTML de saut de ligne est utilisée pour insérer un seul saut de ligne entre le corps principal du texte.

Cela ne devrait pas être utilisé pour séparer les paragraphes afin de styliser le texte, mais devrait plutôt être réservé aux occasions où chaque ligne du même conteneur de texte doit être sur une nouvelle ligne, c’est-à-dire lors du formatage d’une adresse ou d’un poème. La mise en forme d’un saut de ligne est simple :

Voici la première ligne de texte. <br> Cette deuxième ligne de texte apparaîtra sur la ligne ci-dessous. <br> Ce sera la troisième ligne de texte, apparaissant sous la seconde.

Il n’est pas nécessaire de fermer une balise de saut de ligne comme nous le faisons avec d’autres codes HTML.

Listes

Il existe deux manières différentes d’ajouter des listes à votre contenu via HTML :

  • <ol> Ceci spécifie une liste ordonnée, où les éléments de la liste seront affichés sous forme de nombres
  • <ul> Ceci spécifie une liste non ordonnée, où les éléments de la liste seront affichés sous forme de puces.

Dans ces deux types de liste, chaque élément de la liste sera défini comme un élément de liste <li> . Les éléments de liste et les types de liste doivent inclure des balises d’ouverture et de fermeture.

>Voici à quoi devrait ressembler votre liste HTML :

Liste ordonnée

<ol>
   <li>Contenu</li>
   <li>Images</li>
   <li>Vidéo</li>
</ol>

Liste non ordonnée

<ul>
   <li>Contenu</li>
   <li>Images</li>
   <li>Vidéo</li>
</ul>

les tables

Les tableaux vous permettent d’organiser les données en lignes et en colonnes. La balise <table> définit un tableau HTML, puis vous créez votre tableau une ligne à la fois.

  • Chaque ligne du tableau est définie avec une balise <tr> .
  • Chaque en-tête de tableau est défini avec une balise <th> .
  • Chaque donnée/cellule du tableau est définie avec une balise <td> .

Voici un exemple de tableau vraiment basique pour les informations sur le nom et l’âge :

<tableau>
   <tr>
      <th>Prénom</th>
      <th>Nom</th>
      <th>Âge</th>
   </tr>
   <tr>
      <td>Jason</td>
      <td>Smith</td>
      <td>26</td>
   </tr>
   <tr>
      <td>Carla</td>
      <td>Jackson</td>
      <td>32</td>
   </tr>
</table>

Et cela produit un tableau qui ressemble à ceci :

First NameLast NameAge
JasonSmith26
CarlaJackson32

Formulaire

La grande majorité des sites Web sur lesquels un spécialiste du marketing numérique travaillera utiliseront des formulaires de contact comme l’une des principales méthodes de réception des demandes de renseignements des visiteurs du site. Les formulaires peuvent être créés de différentes manières, parfois codés dans une page par un développeur, et d’autres fois construits dans une application de création de page visuelle telle qu’Elementor.

Cependant, lorsque vous travaillez sur un site WordPress, les formulaires sont le plus souvent créés à l’aide du plugin du site Contact Form 7. Le plugin est assez simple à utiliser pour ceux qui n’ont pas les meilleures capacités techniques, avec des boutons vous permettant de sélectionner les champs pertinents. et les paramètres, générant automatiquement les balises HTML requises pour créer votre formulaire.

Malgré cela, la vue d’édition du formulaire n’est pas aussi conviviale que la même vue d’un article ou d’une page, vous nécessitant des connaissances HTML pour comprendre ce qui est quoi. Il n’y a pas que la modification de votre formulaire qui nécessite un peu de savoir-faire HTML… l’ajouter à la page appropriée implique également du HTML. Plus précisément, chaque formulaire que vous créez sur CF7 a son propre shortcode – copiez-le simplement et collez-le dans la fenêtre d’édition HTML de la publication ou de la page que vous souhaitez qu’il apparaisse.

Header en-tête

La balise <head> est utilisée en haut de toute page donnée et contient toutes les métadonnées (données sur les données) fournies aux navigateurs Web. Il existe toute une cacophonie d’outils de développement qui peuvent être inclus dans le <head> comme <style> , <base> , <script> et <noscript> , mais pour le référencement, il y a deux domaines principaux à traiter.

Titre

<tête>
<title>15 balises HTML que les spécialistes du marketing digital doivent connaître</title>
</head>

Le titre d’une page est la métadonnée donnée au navigateur à afficher dans les résultats de recherche, sur les onglets du navigateur, dans les signets ou à tout autre endroit où le titre de la page est affiché. Le méta-titre est important pour les spécialistes du marketing numérique, car il s’agit d’un domaine clé pour informer les moteurs de recherche de l’objet de votre page, alors insérez-y ces mots-clés prioritaires !

La description

<tête>
<title>15 balises HTML que les spécialistes du marketing digital doivent connaître</title>
<meta name="description" content="Découvrez toutes les balises HTML que les spécialistes du marketing numérique doivent connaître avec Digirank ">
</head>

Comme le titre, une méta-description est utilisée pour informer les moteurs de recherche de votre page et les aide à décider si elle est pertinente par rapport au terme de recherche. Pour cette raison, il est très important pour votre référencement que votre méta description contienne les mots-clés souhaités.

Cependant, vous ne pouvez pas simplement taper une chaîne de charabia, car bien que la méta-description ne soit pas affichée sur la page elle-même, elle est affichée sur certains liens vers la page. Le plus courant d’entre eux est lorsqu’une page est partagée sur des sites de médias sociaux comme Facebook, où la description du lien affichera à la fois votre méta-titre et votre description, alors ne pensez pas que personne ne va le lire ! Assurez-vous que vos mots-clés sont inclus et que la description a du sens.

Intégration de Google Analytics

Selon votre site, vous devrez peut-être également télécharger un code de suivi Google Analytics dans la section <head> d’une page donnée, afin de suivre correctement le trafic vers et depuis votre site. Prenez un moment pour regarder cette vidéo utile sur la façon d’ajouter le code à vos pages.

Bonus

Deux outils sans lesquels nous ne pourrions pas travailler.

Outils de développement Chrome

Google est vraiment utile, et ils ont mis en place Chrome DevTools en 2008 pour aider les développeurs à jeter un coup d’œil aux écrous et boulons des sites Web.

Si vous appuyez sur F12 (Windows) lors de la navigation sur Google Chrome, vous ouvrirez le code de la page sur laquelle vous vous trouvez. DevTools vous permet d’apporter des modifications à ce code et vous montre à quoi les choses ressembleraient si vous le faisiez. Il vous aide à diagnostiquer rapidement les problèmes, ce qui vous aide finalement à aller plus vite à la racine des problèmes.

Pour les spécialistes du marketing comme nous, nous pouvons utiliser DevTools pour inspecter certains éléments d’un site Web. Il peut être particulièrement pratique de vérifier que les images affichent leur balise alt, par exemple.

Cela nous aide à résoudre les problèmes qui peuvent ensuite être envoyés à un développeur pour qu’il les corrige.

Assistant de balises Google

Vous voulez vous assurer qu’une balise que vous avez installée sur un site ou une page spécifique fonctionne réellement et est active ? Google Tag Assistant est un plugin de navigateur gratuit qui peut répertorier toutes les balises installées et leur statut sur un site. Une fois installé, vous accédez simplement à la page que vous souhaitez inspecter, activez le plugin et actualisez la page. Une fois cela fait, vous obtiendrez une liste de choses, y compris les conteneurs Google Tag Manager installés et les propriétés Google Analytics pour le site.

Le plugin Tag Assistant est cependant progressivement supprimé et remplacé par un débogueur sur site , qui combine les fonctions de l’assistant actuel avec le mode de prévisualisation de Google Tag Manager.

Au lieu d’activer un plugin, vous collez l’URL d’un site dans le débogueur. Le site s’ouvrira dans un nouvel onglet, vous permettant d’avoir une session de test. Si vous vérifiez simplement que Analytics est installé, il vous suffit de charger une page avant de revenir aux résultats. Mais si vous testez quelque chose, comme le suivi des conversions de soumission de formulaire, vous pouvez remplir un formulaire de test pendant la session, avant de revenir aux résultats du débogueur pour vérifier que votre action de conversion a été correctement déclenchée.