Formatage des articles de blog et HTML de base

Le formatage des articles de blog ne nécessite pas que vous connaissiez beaucoup de HTML, mais il aide certainement !

Si vous voulez que votre blog soit pris au sérieux, alors vous devez maîtriser le formatage de vos articles de blog.

Cela signifie également apprendre quelques astuces HTML de base pour aider à rendre vos articles intéressants et stylisés de manière cohérente.

Maintenant ne vous inquiétez pas, je ne dis pas que vous devez devenir un programmeur ou quoi que ce soit pour créer des articles de blog attrayants et non informés, mais ramasser quelques compétences essentielles aidera beaucoup.

WordPress est un CMS (Content Management System) et en tant que tel, il ne nécessite pas que vous codiez tout vous-même.

Il existe des outils pour cela.

La plupart du code est caché pour éviter que quelque chose ne soit cassé et vous avez un éditeur WYSIWYG (What You See is What You Get) pour écrire et formater les articles et les pages du blog.

Si vous utilisez WordPress depuis un certain temps, alors vous saurez qu’il y a à la fois un onglet Visuel et Texte en haut à droite de l’éditeur de contenu qui vous permet de passer de la version stylisée de votre article et du HTML brut.

Pour les novices.

Visuel = WordPress Visual Editor

Texte = WordPress HTML Editor / Texte brut

La plupart des débutants sont dépassés et effrayés lorsqu’ils voient le HTML brut sur l’onglet texte pour la première fois et reviennent rapidement en arrière.

Mais cela n’a pas besoin d’être le cas et vous deviendrez un bien meilleur blogueur en prenant le temps d’être à l’aise pour travailler et éditer dans ce mode.

Avec un peu de pratique, vous pouvez facilement maîtriser certaines des bases, la syntaxe est en fait assez logique.

Syntaxe (définition informatique) : La structure des déclarations dans un langage informatique.

So what is HTML?

HTML signifie Hypertext Markup Language et est le langage de programmation utilisé pour créer des pages et des applications web.

HTML vous permet de créer des fonctionnalités de base que vous pouvez ensuite styliser avec CSS (Cascading Style Sheets).

Il a été créé en 1990 par Tim Berners-Lee, un de mes héros personnels à qui l’on attribue également l’invention d’internet, mais je ne vais pas tout vous apprendre sur le HTML et son histoire mais si vous êtes du genre curieux, vous pouvez continuer à lire sur Wikipedia.

Nous sommes juste ici pour regarder comment le HTML se rapporte à l’écriture et à l’édition des articles et des pages WordPress.

Lorsque vous voyez un code inconnu dans l’onglet Texte de l’éditeur WordPress, vous regardez du HTML et dans certains cas, il peut inclure certains styles CSS en ligne.

Exemple de HTML

<h2>This is a title</h2>

Les parties qui sont surlignées en rouge sont du HTML et dans cet exemple, vous voyez une balise ouvrante de titre h2 au début et la balise fermante de titre h2 à la fin.

Vous remarquez la seule différence est que la balise fermante a une barre oblique inverse avant le nom de la balise ? C’est ainsi que vous pouvez voir rapidement quand votre HTML a été ouvert et fermé.

C’est une excellente astuce pour repérer les erreurs ou le HTML cassé.

HTML avec CSS en ligne Exemple

<h2 style="color:red;">This is a title</h2>

Dans l’exemple ci-dessus, nous avons utilisé le même h2, cependant, cette fois, nous avons utilisé le HTML pour appeler un morceau de CSS pour changer la couleur en rouge. Remarquez que la seule partie qui est réellement CSS est surlignée en rouge.

En fait, vous ne verrez pas beaucoup de CSS en ligne car la meilleure façon est de styliser vos éléments HTML avec des fichiers CSS externes, c’est la façon typique dont les thèmes WordPress appliquent automatiquement les styles à votre page de blog.

Je ne conseille personnellement pas de styliser votre HTML en ligne dans l’éditeur de WordPress, mais il est important d’en être conscient au cas où vous auriez besoin de modifier ou de nettoyer du code qui s’est frayé un chemin depuis d’autres sources comme un plugin ou un copier-coller d’une autre source.

Inévitablement, vous bénéficierez de la possibilité de nettoyer les choses lorsque des gremlins (ce n’est pas un terme technique) trouvent leur chemin dans votre contenu.

Donc, regardons comment ajouter du HTML aux articles, aux posts et aux pages WordPress et ce que vous devez savoir.

WordPress Basic HTML Essentials

Lorsque vous ajoutez du HTML pour styliser votre contenu, vous devez vous rappeler d’envelopper votre contenu avec les balises d’ouverture et de fermeture pertinentes.

Exemple:

<p>Paragraphs should be wrapped with p tags</p>

Il y a des exemples d’éléments HTML utiles qui ne nécessitent pas de balise fermante parce qu’ils sont auto-fermants.

Un exemple est le saut de ligne <br> qui fonctionnera sans balise fermante, c’est parce que les sauts de ligne ne contiennent pas et ne peuvent pas contenir de contenu à l’intérieur.

Balises de titre &Sous-titres

Il existe différents types de titre sur un article WordPress, tout d’abord, vous avez le titre de l’article, c’est un <h1> et ensuite vous avez la possibilité d’ajouter des titres de titre à votre contenu pour vous aider à regrouper vos pensées.

Ces titres vont de h1 (Heading 1) à h6 (Heading 6) et votre thème les stylisera généralement pour qu’ils aient une taille appropriée.

Puisque votre page ou votre titre de post est automatiquement un h1, vous voulez éviter de l’utiliser dans votre contenu car toutes les autres instances entreront en concurrence avec le titre principal qui est le nom de votre post.

Au lieu de cela, suivez le processus d’ordonnancement sémantiquement correct et la première fois que vous devez utiliser un titre de section descendez vers le titre h2.

Bien que vous puissiez facilement les définir en utilisant la liste déroulante en haut à gauche de l’éditeur de post WYSIWYG, il est utile de savoir comment ils fonctionnent au format HTML afin de pouvoir corriger toute erreur.

Voici quelques exemples

<h1>This is a heading 1, you won't need to use me in your content</h1>
<h2>This is a heading 2, I'm very useful, you can use me to organize your articles into sections.</h2>
<h3>This is a heading 3, Only use me if you already have h2 section headings and you need to divide those sections into sub-sections.</h3>
<h4>This is a heading 4, I'm similar to the above, only use me if you have already used h3's</h4>

Espérons que vous commencez à voir un modèle ici avec la syntaxe HTML.

Tous les éléments HTML commencent par une balise d’ouverture <

Ils se ferment également par une balise de fermeture >

Les éléments d’ouverture peuvent simplement contenir le nom de l’élément.

Les balises de fermeture contiennent une barre oblique avant après leur balise d’ouverture < et avant le nom de l’élément HTML qu’elles ferment.

Le fait de vous familiariser un peu plus avec ce qui précède vous mettra à des longueurs d’avance sur la plupart des blogueurs utilisant WordPress.

Gros ou italique

Lorsque vous voulez souligner un point et attirer l’attention sur certains mots, vous pouvez utiliser le gras ou l’italique pour les faire ressortir.

Je préfère nettement cette approche aux TOUTES LES MAJUSCULES, qui pour moi passent pour des cris.

Le HTML pour le gras est <strong> et pour l’italique c’est <em>.

Fun fact : Strong est facile à retenir pour rendre quelque chose en gras, mais pourquoi l’élément italique utilise-t-il em ? Em est une abréviation de emphasis. Cela pourrait aider à le retenir.

<em>This text is italicized, I am for gentle emphasis</em>

<strong>This text is bold, I am for strong emphasis</strong>

En outre, vous pouvez utiliser le WYSIWYG de WordPress bien sûr ou le raccourci clavier CTRL + B pour le gras et CTRL + I pour l’italique après avoir mis en évidence le texte que vous voulez modifier.

Pour une liste complète des raccourcis clavier de WordPress et d’autres méthodes de formatage, allez ici.

Il y a quelques règles sur la façon dont vous devriez et ne devriez pas les utiliser, notamment en les gardant mutuellement exclusives, en les réservant aux phrases courtes et en les utilisant avec parcimonie.

La typographie pratique a un excellent article expliquant l’importance de ces règles.

Si vous écrivez une copie pour vraiment engager les gens, comme une copie de vente, alors ces règles peuvent être pliées, mais pas brisées.

emphasis

Rappellez-vous, si tout est souligné, alors rien n’est souligné !

Listes – ordonnées &non ordonnées

Il existe deux types de listes que vous pouvez ajouter en utilisant le HTML et qui sont également supportées par le WYSIWYG de WordPress.

Ce sont :

Listes ordonnées – <ol>

Les listes ordonnées s’affichent comme une série d’éléments numérotés. Ceci est utile pour écrire une liste où l’ordre a de l’importance.

<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>

Le code ci-dessus se transforme en :

1. Item 1
2. Item 2
3. Item 3

Listes non ordonnées – <ul>

Les listes non ordonnées sont essentiellement des listes à puces.

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

Et celle-ci se transforme en la liste à puces ci-dessous.

• Item 1
• Item 2
• Item 3

Nous savons tous à quel point les listes sont utiles et elles aident également à briser votre contenu et à le rendre plus intéressant.

Une différence clé que vous remarquerez ici est qu’il y a des éléments de liste individuels <li> et qu’ils sont enveloppés dans leur intégralité avec un wrapper <ol> ou <ul>.

C’est important d’en être conscient, car si le wrapper <ol> ou <ul> est manquant, les éléments de liste ne seront pas rendus.

Images

Un autre aspect important de la mise en forme d’un article de blog ou de toute page avec WordPress est l’utilisation d’images et vous ne devriez avoir aucun mal à trouver des photos intéressantes que vous pouvez obtenir sur Yahoo images et d’autres sites d’images libres de droits. Certaines de ces options sont payantes mais beaucoup d’entre elles sont gratuites à condition de donner du crédit avec une mention et un lien Source.

Un petit prix à payer pour avoir des visuels professionnels sur votre site web ou votre blog.

Une image vaut mille mots, comme on dit, elles fournissent également à vos lecteurs des stimuli visuels ainsi que des pauses pour l’aider à briser votre contenu en morceaux digestes.

Cela aide à garder vos lecteurs engagés et bien que vous n’ayez pas besoin de coder les images vous-même, comprendre la syntaxe est utile.

Voici un exemple de code d’image et comment il apparaîtra lorsque vous regarderez l’onglet Texte de votre éditeur.

<img src="https://mazepress.com/image.png">

Une image n’a pas besoin d’une balise de fermeture parce que toutes les informations dont elle a besoin sont contenues dans les crochets ouvrants et fermants de l’élément HTML. Le src appelle simplement l’emplacement de l’URL.

WordPress vous permet de faire flotter vos images à gauche, à droite ou vous pouvez les centrer. Si vous le faites et vérifiez le code dans l’onglet Texte, vous verrez que des classes ont été ajoutées qui sont utilisées pour styliser les images en conséquence.

C’est un exemple où le CSS externe est utilisé pour appliquer différents styles à différentes images. Utile à savoir !

Important : avant d’ajouter des images à vos articles et à vos pages, assurez-vous qu’elles sont optimisées pour la vitesse et les moteurs de recherche.

Embeds

Inévitablement, vous voudrez utiliser des codes d’intégration de sites Web externes.

Un exemple est lorsque vous voulez ajouter une vidéo de YouTube ou Vimeo, vous allez à partager et il vous donne un long code que vous pouvez copier.

La principale chose à retenir est que vous ne pouvez pas coller du HTML ou tout autre code sur l’onglet visuel de l’éditeur de contenu. Faire cela brouillera le code et le rendra inutile lorsque vous appuyez sur enregistrer.

Assurez-vous d’aller dans l’onglet texte et ensuite de le coller là où vous voulez qu’il apparaisse.

Vous trouverez ci-dessous un exemple de code embarqué de YouTube.

<iframe width="560" height="315" src="https://www.youtube.com/embed/ssxCQuv3KzE" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

Alors que WordPress vous permet de simplement coller une URL YouTube dans votre article pour l’afficher comme une vidéo, cela peut ne pas vous donner un contrôle total sur les dimensions de la vidéo et les autres paramètres d’intégration.

Pour cette raison, et parce que je suis de la vieille école, j’utilise toujours le code d’intégration des iframes.

La plupart des sites web qui proposent des codes d’intégration ne sont pas nativement pris en charge par WordPress et vous devrez donc toujours connaître les codes d’intégration, les iframes et leur fonctionnement pour pouvoir ajouter du multimédia à vos articles.

Shortcodes

Les shortcodes ne sont pas du HTML. En fait, ils ne sont même pas un langage de programmation, ils sont une fonction native de WordPress qui permet aux développeurs de plugins et de thèmes de créer des moyens simples pour vous et moi d’ajouter des éléments à nos pages web et à nos articles.

L’exemple le plus simple qui figure sur à peu près tous les blogs est un shortcode de formulaire de contact, mais il y a des centaines, voire des milliers d’utilisations potentielles pour les shortcodes qui incluent la capacité d’ajouter :

• Tableaux
• Galeries
• Packages de prix
• Vidéos
• Lead Magnets / Email Opt-in forms
• Podcast Episodes

Voici un shortcode pour un formulaire de contact généré par le plugin Contact Form 7, l’un des plugins recommandés que nous installons sur 90% de nos sites et blogs.

Note : j’ai dû ajouter des espaces après les parenthèses ouvrantes et avant les parenthèses fermantes pour l’empêcher d’afficher réellement le formulaire de contact, alors imaginez-le sans les espaces.

Notez que la syntaxe d’un shortcode est différente. Ils commencent par une parenthèse ouvrante au lieu de < et >.

Ils sont ensuite formatés par le développeur du shortcode pour vous permettre d’ajuster et de modifier facilement les paramètres essentiels.

Lorsque la page Web se charge, ce formulaire de contact charge en fait environ 20 lignes de HTML désordonné, donc c’est beaucoup plus facile pour vous lorsque vous pouvez accéder à un shortcode.

La seule mise en garde est que vous ne voulez pas surutiliser les shortcodes car ils ralentiront vos pages Web.

Ils sont utiles à connaître et peuvent rendre le processus d’édition de votre post beaucoup moins encombrant lorsque vous n’avez pas à utiliser de grandes quantités de HTML que vous ne comprenez pas et que vous devez travailler prudemment autour.

Divers conseils de formatage

Il y a plusieurs autres conseils que je conseille aux nouveaux étudiants de WordPress de garder à l’esprit et que je vais couvrir brièvement.

Ceux-ci incluent :

• N’ajoutez pas de sauts de ligne inutiles. Cela signifie que vous devez essayer de ne pas utiliser la balise HTML <br> et éviter d’appuyer deux fois sur la touche Entrée entre les paragraphes et les sections, sauf si vous devez absolument le faire. Cela donne à vos articles un aspect désordonné et vous êtes tenu de créer des incohérences.
• N’ajoutez pas de familles de polices, de tailles et de couleurs spécifiques à une page – Encore une fois, cela donne à vos articles un aspect horrible et comme s’ils avaient été créés en 1995. Vous pourriez penser que ce titre vert de taille personnalisée avec une police unique attire l’attention alors qu’en fait, il ressort comme incohérent, et non professionnel. Votre thème devrait dicter ces styles.
• N’ajoutez jamais de code HTML ou embarqué dans l’onglet visuel – Cela peut conduire à des résultats inattendus, impliquer beaucoup de nettoyage ou casser entièrement votre page.
• Ne téléchargez jamais de vidéos sur WordPress – L’hébergement de votre site n’est pas construit pour diffuser du contenu vidéo. Heureusement, YouTube et Vimeo fournissent de toute façon un hébergement vidéo super rapide et 100% gratuit. C’est pourquoi il est préférable d’intégrer les vidéos de YouTube même lorsqu’elles sont les vôtres.

Rien de bien compliqué mais je vois souvent des gens faire ces erreurs et se compliquer la vie.

Mais bientôt, les choses pourraient être différentes, très différentes en fait !

Gutenberg, l’avenir du blogging ?

Gutenberg est un nouvel éditeur de contenu construit de A à Z par WordPress et qui arrivera très bientôt dans une installation près de chez vous.

Est-ce l’avenir du blogging ? Qui sait ? Mais c’est définitivement l’avenir de WordPress, alors il est temps de s’y mettre.

Gutenberg est une bête différente.

Si vous avez déjà utilisé Medium.com pour le blogging, alors lorsque vous essayerez Gutenberg pour la première fois, il se sentira étrangement similaire.

À mon avis, c’est une bonne chose, l’éditeur de contenu sans distraction de Medium est magnifiquement facile à utiliser et voir WP en prendre note est un point positif pour tous ceux qui sont impliqués dans la gestion des blogs et des sites Web fonctionnant sur WP.

L’éditeur Gutenberg est également modulaire et vous permet de glisser et de déposer des blocs dans votre contenu qui ont chacun un but différent.

C’est similaire à la façon dont les plugins de constructeurs de pages et certains thèmes fournissent actuellement ce type de solution de glisser-déposer, mais maintenant ces fonctionnalités arrivent à WordPress par défaut.

S’il y a un aspect de WordPress qui n’a pas beaucoup évolué au fil des ans, c’est l’éditeur TinyMCE, donc j’accueille cette innovation à bras ouverts.

Si vous avez du mal à formater les articles de blog avec l’éditeur actuel, vous pouvez déjà essayer Gutenberg en le téléchargeant et en l’installant en allant dans les plugins dans votre tableau de bord et en recherchant « Gutenberg ».

Formatage des articles de blog & HTML de base Word final

Si vous passez un peu de temps à pratiquer ce qui précède, vous obtiendrez un bien meilleur contrôle de votre contenu et de la façon dont il est présenté.

Espérons que vous vous sentiez un peu plus à l’aise maintenant avec le formatage des articles de blog et l’utilisation du HTML de base.

Ces compétences peuvent vous faire économiser beaucoup de temps, d’argent et de prises de tête lorsque le formatage de votre contenu ne va pas ou ne rend pas correctement.

Bien que les bases ci-dessus soient suffisantes pour la plupart des blogueurs et des propriétaires de sites Web WordPress, si vous êtes curieux d’en apprendre davantage, il existe d’excellents sites Web gratuits où vous pouvez apprendre le HTML, notamment CodeAcademy et w3Schools.

Maintenant, allez rendre votre contenu joli ! 🙂

Si vous avez trouvé cet article utile, pensez à consulter certains de nos autres guides utiles sur le blogging, comme notre Liste de contrôle des articles de blog : Guide essentiel ou Comment repenser le contenu et si vous êtes fan de ce genre de guides, inscrivez-vous à ma newsletter et je partagerai avec vous par email mes meilleurs contenus et découvertes.

.