Pages de blog : initiation au codage HTML pour les débutants !

Coucou les filles, je suis très heureuse de vous retrouver afin de vous initier au codage HTML (HyperText Markup Language) pour vos pages de blog.

---

 

J’espère que vous allez très bien ! C’est fou ce que ça me manque mon blog : la publication des articles et les sauts vers vos univers respectifs. Je vous ai déjà expliqué pourquoi cette absence : ça fait presque plus d’un mois que j’ai commencé à enseigner à l’université. Ce qui fait qu’entre les préparations des supports de cours et des examens, les présentations de cours en salles… je suis débordée. Du coup, je ne trouve presque plus le temps pour mon bébé blog. Rassurez-vous ! Je serais de retour très prochainement dès que tout est bien en place, car je ne compte pas laisser tomber mon blog. Mais, pour l’heure, je ne peux pas m’empêcher de faire un p’tit saut par ici, car en enseignant l’ « e-Commerce » depuis la semaine dernière, j’ai initié mes étudiants au codage HTML. Je me disais, « tiens, c’est une bonne occasion d’en parler sur mon blog, sans entrer dans les détails du développement web, mais juste aborder les points essentiels pour les débutants ». Je vous l’ai toujours dit qu’au fur et à mesure où je blogue, j’apprends des choses (codage HTML : je ne suis pas experte en la matière, mais je la serais ! J’aime fourrer mon nez sur des trucs plus compliqués que ça, hyper autodidacte que je suis 🙂

---

 

Pourquoi parler de codage HTML pour des pages de blog ? Tout simplement parce que les pages web sont le principal élément de référence pour les moteurs de recherche. Il est donc recommandé de bien structurer vos pages de site (blog) pour gagner en visibilité (il ne s’agit pas seulement de la page d’accueil, mais toutes les pages ayant aussi des contenus intéressants).Pour cela, vous n’avez pas besoin de maîtriser ce langage (au début, c’est comme du chinois) pour devenir un(e) blogueur(euse) efficace. Mais, sachez qu’au fur et à mesure où le code devient omniprésent sur le web, il est nécessaire de savoir lire la base pour ne pas rester dans l’ignorance totale. En fait, ce concept vous aidera à créer votre propre site (blog), à modifier certains trucs sur votre plateforme même si, des fois, tout n’est pas facile (heureusement que wordpress.com nous donne la chance de développer notre blog sans avoir à toucher sur les codes. Sinon, une autre option existe : celle de payer un développeur web, mais qui peut nous coûter les yeux de la tête). Donc, pourquoi ne pas le faire vous-même en commençant par le codage HTML ? (En fait, dans le jungle qu’est le domaine de la programmation web, il existe 4 bases assez facilement accessibles que tout(e) blogueur(euse) doit apprendre :

1. HTML et

2. Javascript : paire de codes qui se charge de tout ce qui s’affiche sur votre écran. Figurez-vous que le HTML est la base de votre site ou blog tandis que le javascript, comme l’indique son nom, permet de lancer des scripts sur votre page lorsque votre visiteur la visionne. Une fois que vous compreniez ces deux codes, vous pouvez moduler et afficher tout ce que vous voulez sur la page de votre plateforme.

3. CSS. S’il y a un langage qui vous permet de créer l’interface de votre blog et de faire la mise en page, c’est ce code.

4. PHP. Envie de communiquer avec une database ou un service extérieur ? Eh bien, vous devez apprendre à lire le code PHP, car il s’exécute sur le serveur et renverra les informations aux visiteurs de votre blog (site) ^^^^ une fois que j’aurai fini avec HTML et Java, j’attaquerai CSS et PHP).

Sachez qu’apprendre le codage n’est pas une obligation, mais dans le monde technologique dans lequel nous évoluons, connaître un tel langage nous aide à exceller dans l’univers du blogging.

Je me rends compte qu’apprendre le HTML n’est pas si compliqué que ça en a l’air en l’adoptant sur des pages de blog : depuis la balise Meta passant par les balises de titres H1 (pour une échelle de 6) jusqu’aux contenus. Et c’est parti !

---

 

Pour que votre site (blog) soit bien référencé par les moteurs de recherche, vous devez soigner les contenus de vos pages (et donc de vos articles). Autrement dit, vous devez n’afficher que des pages bien structurées (et donc des articles bien structurés ^^^^ je ne me lasse pas de le répéter). Comment organiser les pages de votre site (blog) et donc vos contenus suivant le codage HTML ?

 

Balises importantes du codage HTML : les meta

---

 

Les balises meta rassemblent la balise title, la balise méta description et la balise keywords (cette dernière n’est plus prise en compte par Google, mais il est conseillé de signaler les principaux mots-clés de votre site (blog)). Parlons de la :

 

Balise title

La balise title est la plus importante, car c’est le titre principal de votre page (ou de votre article) que vous retrouvez en haut du navigateur. Plus précisément, c’est le nom du lien que vous voyez s’afficher dans les résultats des moteurs de recherche. Elle est différente de la balise de titre de niveau 1 ou H1. Et, pour un meilleur référencement, cette balise doit :

• Comporter 9 à 11 mots càd 63 à 70 caractères.
• Inclure un ou des mots-clés les plus importants (évitez trop de répétition qui renvoie à une sur-optimisation SEO pénalisée par Google et tâchez de bien les positionner).
• Comprendre un groupe de mots pouvant inciter les internautes à y cliquer en formulant un titre inédit.

Le format de la balise title en langage HTML est le suivant :

<title>Tutoriel complet sur la balise title</title>

Mot-clé de cet exemple : balise title

 

 

Balise méta-description

Cette balise située peu après le titre principal sert à décrire votre page ou votre article. Il est recommandé d’y glisser un ou des termes clés. Vous devez constituer des méta-descriptions pour vos pages (contenus) et les soigner même si elles n’ont pas d’impact direct sur le positionnement aux moteurs de recherche. Encore fallait-il souligner que la balise méta description doit :

• Décrire tout ce qui se trouve sur votre page,
• Comporter un ou des mots-clés,
• Comprendre à peu près 20 mots ou 155 caractères ?

En codage HTML, la balise méta description s’écrit :

<head>
<title>Tuto sur la balise meta description</title>
<meta name= »description ».content= »Ce tutoriel vous apprend à faire une bonne balise meta description. Vous y trouverez également des explications sur l’impact en référencement Google (SEO). » />
</head>

Mots-clés de cet exemple : balise méta description, référencement Google, SEO

 

Balise keywords

Même si les moteurs de recherche n’accordent plus d’importance à cette troisième balise meta, vous avez intérêt à signaler les mots-clés principaux de votre site (blog) qui permettent de le positionner. Les mots-clés doivent être variés pour que Google ne pense pas à une quelconque sur-optimisation. À l’intérieur de vos paragraphes, les mots-clés sont détectables par les balises : <strong>mot-clé</strong> (càd en gras).

<meta name= »keywords » content= »balise meta description, méta description, référencement Google,référencement naturel, codage HTML,SEO » />

 

Balises de titres H1 à H6

---

 

Les balises de titres H1 H2 H3 H4 H5 H6 (échelle de 6) servent à donner une mise en forme différente à vos titres de pages (d’articles) pour une bonne lisibilité. En outre, elles définissent l’importance de vos titres (les titres H2 ont beaucoup moins d’importance dans le référencement que les titres H1, pareil pour H3 face à H2, H4 par rapport à H3, H5 face à H4 et H6 vis-à-vis de H5). Vous pouvez utiliser plusieurs balises H2 à H6, mais il vous est conseillé de n’utiliser qu’une seule balise H1 pour le titre principal de vos contenus.

<h1>Titre de niveau 1</h1>
<h2>Titre de niveau 2</h2>
<h3>Titre de niveau 3</h3>
<h4>Titre de niveau 4</h4>
<h5>Titre de niveau 5</h5>
<h6>Titre de niveau 6</h6>

 

 

Vous devez savoir que ces balises de titres :

• Servent à découper le contenu en sous-parties càd à le hiérarchiser.
• Doivent comporter des mots-clés.
• Ont un impact sur le référencement naturel de votre site (blog).
• Doivent avoir une taille ne dépassant pas 80 caractères.

Le nombre de ces balises dépend de la longueur de votre texte. Vous devez éviter le saut de niveau (de H1, vous passez tout de suite à H3 sans qu’il y ait H2), la balise isolée (vous avez deux titres H2. À l’intérieur du premier H2, il y a deux H3 tandis que dans le deuxième H2, il n’y a qu’une balise isolée H3) et la balise vide (vous avez écrit une balise de titre H2 sans qu’il y ait un texte ou un contenu dedans). Enfin, la balise H1 n’est pas forcément identique à la balise title (le mieux c’est d’essayer de varier ces 2 titres).

 

Contenu suivant la norme HTML

---

 

Créer un contenu de qualité est une chose. Concocter un contenu bien référencé en est une autre. Pour cela, vous devez soigner les textes de vos pages en commençant par le :

 

Chapô pour votre contenu !

Nombreux sont les internautes qui ne finissent pas un contenu jusqu’au bout, mais se contentent juste de lire le chapô. Il doit être accrocheur pour les inciter à terminer leur lecture till the end. Beaucoup plus important qu’une introduction, le chapeau a pour rôle de susciter l’attention des lecteurs et d’optimiser le référencement de votre plateforme. Tâchez de dévoiler dès le début les éléments essentiels de la rédaction pour finir aux moins importants : c’est la méthode du pyramide inversé. Vous avez le choix entre un :

• Chapô informatif qui consiste à répondre à 7 questions : « Qui ? Quoi ? Où ? Pourquoi ? Quand ? Comment ? Combien ? » càd la méthode QQOPQCC (ou le fameux 5W2H : who ? What ? Where ? Why ? When ? How ? How much ?) Le but c’est de délivrer une information concrète aux visiteurs.
• Chapô incitatif appelé aussi accroche, car vous devez attirer l’attention des internautes à l’aide des éléments percutants dans les différentes angles abordées.
• Chapô de rappel pour un contenu qui s’inscrit comme une suite des autres articles précédents (dossier web).
• Chapô interrogatif qui pose une question et dévoile une partie de la réponse.

Le chapô doit comporter à peu près 300 caractères ou moins de 50 mots avec des phrases claires et simples. N’oubliez pas d’insérer les principaux mots-clés dans cet élément déterminant de votre contenu.

 

 

Différents paragraphes

Les textes à l’intérieur de ces balises doivent être uniques et soignés pour un meilleur référencement naturel avec des mots-clés variés. Chaque paragraphe est reconnu à travers la balise <p> :

<h1>Titre de premier niveau</h1>
<p>Paragraphe de texte</p>
<p>Paragraphe de texte</p>
<h2>Titre de deuxième niveau</h2>
<p>Paragraphe de texte</p>
<p>Paragraphe de texte</p>

 

 

Dans vos paragraphes, vous pouvez insérer des liens hypertextes (entrants et/ou sortants), des images, des sons, des vidéos…

 

Liens hypertextes en langage html

---

 

L’insertion des liens hypertextes dans vos contenus peut améliorer votre référencement à condition de bien les faire. Vous devez distinguer les liens entrants des liens sortants qui doivent être utilisés avec attention.

 

Liens entrants

Appelés aussi backlinks, ce sont des liens reçus par votre site (blog) fruit d’un partenariat avec un autre site de qualité (blog de qualité), donc c’est souvent payant. Ils pointent vers ce dernier et intéressent le plus les webmasters. En effet, ce sont ces liens entrants qui permettent d’obtenir du trafic et d’augmenter la popularité de votre plateforme. Ainsi, vous ne devez pas accepter n’importe quels liens entrants, car un tel abus peut nuire au référencement naturel de votre site (blog). Le nombre idéal de backlinks est limité à 5 sinon votre plateforme soit considéré comme un annuaire.

 

Liens sortants

Les liens sortants externes sont des liens qui pointent vers un autre site (blog) sans qu’il y ait forcément partenariat entre vous. Ces liens externes sont donc gratuits (exemple : insertion du blogroll sur la barre latérale de votre blog).

 

 

Or, les liens sortants internes sont des liens au sein de votre site (blog) renvoyant vers une autre page de celui-ci. Ces liens internes sont importants, car ils permettent une bonne navigation sur le site et permettent de retenir vos visiteurs le plus longtemps possible sur votre plateforme.

 

 

Pour le codage HTML, vous devez insérer la portion de texte concernée entre deux balises <a> et renseigner l’attribut href de cette balise avec l’url de la ressource vers laquelle vous souhaitiez faire pointer ledit lien :

<a href= »portion-de-texte »>
Texte sur lequel vous faites le lien vers le paragraphe
</a>

 

Images, sons et vidéos codés HTML

---

 

En insérant des images, sons et vidéos de qualité sur vos pages, le but c’est toujours d’optimiser le référencement naturel en codant les :

 

Images

Les images doivent être de qualité et en lien avec le thème abordé. Pour insérer une ou des images en langage HTML, vous devez utiliser le code suivant :

<img src= »images/paysage.jpg » alt= »Baie-de-Somme » title= »Baie de Somme » />

 

 

La balise img a deux attributs obligatoires que sont l’attribut scr (source) et l’attribut alt (texte alternatif très utile pour le référencement, car il affiche un texte si l’image ne s’affiche pas). Mais, vous devez aussi marquer le titre de votre image, car cet attribut permet d’afficher une info-bulle lors du passage de la souris sur l’image.

 

Sons

Il en est de même pour les sons en les encodant au format mp3 ou ogg :

<audio controls= »controls »> <!–Permet d’ajouter la barre de contrôle–> <source src= »audio/fichierson.mp3″ type= »audio/mp3″/>
<source src= »audio/fichierson.ogg » type= »audio/ogg »/>
</audio>

 

Vidéos

Pour insérer le code html de vidéos, vous devez renseigner les attributs width et height que sont respectivement la largeur et la hauteur de la vidéo. Et, l’attribut scr indique bien évidemment la source de votre vidéo.

 

 

<video width= »640″ height= »360″ src= »http://www.youtube.com/demo/google_main.mp4&Prime; controls autobuffer>
<p> Essayez cette page avec Safari 4 ! Ou vous pouvez <a href= »http://www.youtube.com/demo/google_main.mp4″&gt; télécharger la vidéo</a> à la place.</p>
</video>

 

Mots de la fin…

Apprendre le langage HTML c’est comme du chinois au début, mais une fois dans le bain, vous allez voir que c’est pas si compliqué que ça en a l’air. Le but c’est de soigner vos contenus comme il se doit pour optimiser le référencement naturel de vos pages. Mais, au fur et à mesure où vous appreniez le codage HTML, vous pouvez exceller en la matière et qui sait un jour, vous pouvez créer vous-mêmes des sites (blogs) et diverses applications (il me reste encore d’apprendre des tonnes de trucs dans ce domaine, car jusqu’ici ce n’est qu’un tout ‘tit début, mais l’essentiel c’est de débuter).

 

Ça vous arrive t-il  de penser au codage HTML pour le référencement naturel de votre blog ? Ou êtes-vous du genre  » bloguer sans prise de tête  » ?

Bisous ❤