Codes HTML de base que chaque utilisateur de WordPress doit connaître

Publié: 2019-04-24

Le HTML est à la base de presque tout sur Internet. C'est la pierre angulaire sur laquelle le contenu Internet est construit, et ce depuis des décennies. Sans une solide compréhension du HTML, tout ce que vous faites avec WordPress ou toute autre conception et développement Web sera retardé. Heureusement pour vous, il existe une multitude de codes HTML de base que chaque utilisateur de WordPress, du débutant au vétéran, utilise presque quotidiennement. Décomposons-les et mettons-nous au courant.

Abonnez-vous à notre chaîne Youtube

Qu'est-ce que le HTML ?

Voici la version rapide : HTML signifie langage de balisage hypertexte , ce qui signifie que ce n'est pas tout à fait un langage de programmation. HTML ne commande pas à votre ordinateur d'exécuter des choses via un script. Au contraire, il prend le texte que vous avez sur votre page et le marque. Italique, gras, alignement, taille, etc. HTML vous donne également la possibilité d'inclure des images et des liens, et avec HTML5, la dernière version les manipule, ainsi que le texte, de nouvelles manières passionnantes.

Le code HTML est contenu dans des drapeaux et est assez facile à lire. Une simple page HTML peut ressembler à ceci : 

<html>
  <head>
    <title>The title of the webpage would go here.</title>
  </head>
  <body>
    <h1>This is the page's title that shows up to people</h1>
      <p>Content</p>
      <p>More content</p>
      <p>Even more content</p>
    <h2>Section break</h2>
      <p><img src="https://www.elegantthemes.com/blog/wp-content/uploads/2019/04/tagline-featured-image.jpg"></p>
      <p><a href="https://elegantthemes.com/divi">A link to our Divi page</a></p>
  </body>
</html>

Une fois rendu dans un navigateur, cela ressemblerait à ceci :

Codes HTML de base

Comme vous pouvez le voir, HTML n'est pas si déroutant. En fait, même si vous n'avez jamais vu de code HTML auparavant, je parie que vous pouvez comprendre ce que signifie chacune de ces balises simplement par le contexte. Cela étant dit, examinons les codes HTML de base les plus courants que vous utiliserez tout au long de votre carrière sur le Web.

Gras

Lorsque vous placez votre texte dans les balises <strong> , vous dites au navigateur de mettre le texte en gras. Vous pouvez également utiliser simplement <b> , mais avec Google et d'autres moteurs de recherche ayant une préférence pour le codage sémantique, vous êtes plus en sécurité avec <strong>

You can make <strong>text bold</strong> by using this tag.

Italique

<Em> signifie emphase , et c'est la manière sémantique d'utiliser l'italique en HTML. Vous pouvez également utiliser <i> pour le faire.

You can put <em>text in italics<em> by using this tag.

Souligner

Il en va de même pour <u> et le soulignement. En général, celui-ci est très peu utilisé car les liens sont soulignés et le texte souligné sur lequel vous ne pouvez pas cliquer donne une mauvaise expérience utilisateur.

You can <u>underline</u> by using this tag.

En-têtes

Les différents en-têtes sont probablement les codes HTML de base les plus utilisés. Utilisez <h1>, <h2>, <h3>, <h4>, <h5>, <h6> pour diviser votre contenu en sections.

Assurez-vous de les utiliser dans l'ordre hiérarchique. Google veut que vous imbriquiez les en-têtes, alors assurez-vous d'utiliser <h2> uniquement en dessous de <h1> , pas en dessous de <h3> .

Alors que la plupart des pages n'auront qu'un seul <h1> , Google ne vous pénalise plus pour en avoir plus. Gardez simplement à l'esprit que l'utilisation d'un <h1> réinitialise votre imbrication pour la page (ou au moins cette section de la page).

<h2>H2 is the most commonly used header tag.</h2>

Tous les en-têtes des éléments HTML de cette page sont h2 .

Image

L'insertion d'images est l'une des choses les plus utiles du HTML. Il a fait sortir Internet de ses styles brutalistes et s'est engagé sur la voie de ce qu'il est aujourd'hui. Tout ce que vous avez à faire est d'avoir l'URL de l'image que vous voulez, et de mettre un seul <img src> (pour balise source de l'image . Comme ceci :

<img src="https://elegantthemes.com/picture.png" alt="a picture from elegant themes">

Notez que vous n'avez pas besoin de fermer la balise d'image et que les guillemets ne sont pas nécessaires pour que l'image s'affiche. Beaucoup de gens les utilisent encore pour rendre le code plus lisible.

L'attribut <alt> est le texte qui s'affiche à des fins d'accessibilité, et il est également indexé par les moteurs de recherche. Pour les personnes disposant de lecteurs d'écran et d'autres appareils, le texte alternatif est absolument nécessaire pour utiliser Internet. Il est toujours préférable d'avoir un texte alternatif pour vos images.

Liens

D'accord. Liens. Il se passe beaucoup de choses avec les liens. Ou plutôt, il y a beaucoup de choses que vous pouvez faire avec des liens. À la base, vous le combinerez avec une balise <a href> . Le <a> indique qu'il s'agit d'un lien, et le <href> est littéralement la référence hypertexte (l'URL) vers laquelle vous créez un lien.

<a href="http://elegantthemes.com/divi">A link to our Divi page, and this is the anchor text.</a>

Vous fermerez le code du lien avec simplement un </a> , et vous pourrez utiliser n'importe quel texte entre ceux-ci. Ce sera le lien cliquable lui-même et s'appelle le texte d'ancrage .

Il s'affiche sur la page comme ceci : Un lien vers notre page Divi, et c'est le texte d'ancrage.

De plus, vous pouvez également imbriquer du code HTML. Vous pouvez rendre une image cliquable en insérant une balise <img src> entre les indicateurs de lien.

<a href="http://elegantthemes.com"><img src="https://elegantthemes.com/picture.png"""></a>

Vous pouvez voir le rendu d'un lien d'image cliquable ici :

Codes HTML de base pour le lien hypertexte d'images

Plus d'attributs de lien

Vous pouvez également inclure plusieurs attributs différents aux liens afin qu'ils se comportent de certaines manières (par exemple, masquer votre URL en tant que référent ou ouvrir le lien dans une nouvelle fenêtre). Certains des plus utiles pour vous seront

  • rel indique une sorte de relation entre le lien et sa cible. Tels que noreferrer pour éviter que le trafic de référence ne soit retracé jusqu'à vous.
  • target indique au navigateur où ouvrir le lien : _blank l'ouvrira dans un onglet vide, par exemple.
  • nofollow va de pair avec rel et indique aux moteurs de recherche que vous ne voulez pas transmettre de jus de lien au site cible. C'est bien lorsque vous créez un lien vers un contenu controversé, etc. Cela empêche également les gens de spammer des liens dans vos commentaires et fait en sorte que votre contenu puisse être considéré comme impartial, puisque vous ne fournissez aucun bonus à être présenté autre que l'exposition et les clics.

Il y en a plus, mais ce sont ceux que vous verrez probablement le plus souvent.

<a href="https://www.elegantthemes.com/blog/divi-resources/get-a-free-mortgage-broker-layout-pack" rel="nofollow" target="_blank">Free Mortgage Broker Layout</a>

Texte barré

Si tu es comme moi, parfois tu avoir besoin voulez faire une blague en utilisant des mots barrés. Ou peut-être avez-vous besoin de marquer des choses sur une liste (ou de les supprimer, comme le dit le code lui-même). Ou toute autre chose pour laquelle vous auriez besoin d'une ligne dans le texte.

C'est à ce moment-là que vous utilisez <del> autour du texte que vous souhaitez barrer. Pour certaines personnes, il s'agit d'un code incroyablement courant, tandis que d'autres peuvent ne jamais l'utiliser. Quoi qu'il en soit, c'est facile à retenir.

You can use <del>this code</del> for strikethrough text in HTML.

Listes

Les listes sont une autre partie importante du contenu Web de nos jours. Non seulement ils vous donnent des tonnes d'espaces blancs et brisent les murs de texte, mais ils vous permettent également d'organiser vos pensées en morceaux digestes.

Il existe deux types de listes que vous pouvez créer avec des codes HTML de base. Listes ordonnées numérotées 1, 2, 3 et ainsi de suite. Les listes non ordonnées utilisent des puces ou des symboles (selon la conception de votre site) au lieu de chiffres.

Vous enveloppez chaque liste avec <ul> ou <ol> pour les listes non ordonnées ou ordonnées respectivement. Et chaque élément de la liste doit être encapsulé dans <li> .

<ul>
  <li>This is part of an unordered list.</li>
  <li>So is this.</li>
</ul>

<ol>
  <li>And this is how you set up an ordered list.</li>
  <li><a href="https://elegantthemes.com">This is a link in a list.</a></li>
  <li><strong>And this link text is bold</strong>, but this part isn't.</li>
</ol>

Et ces codes s'affichent comme ceci pour montrer la différence :

  • Cela fait partie d'une liste non ordonnée.
  • C'est ainsi.
  1. Et c'est ainsi que vous établissez une liste ordonnée.
  2. Ceci est un lien dans une liste.
  3. Et ce texte de lien est en gras , mais cette partie ne l'est pas.

Vous pouvez également imbriquer d'autres codes dans les listes. Ainsi, vous pouvez mettre du texte en gras, insérer des liens, etc.

Bloquer les citations

Vous devrez, à un moment donné de votre carrière WordPress, citer le site Web de quelqu'un d'autre. C'est là qu'intervient <blockquote> . Entourez simplement le texte que vous copiez/collez (et attribuez) avec les balises d'ouverture et de fermeture <blockquote> , et vous êtes prêt à partir.

<blockquote>This text will appear with special styling to indicate that it's a quote./blockquote>

Voici à quoi cela ressemblera sur une page :

Ce texte apparaîtra avec un style spécial pour indiquer qu'il s'agit d'une citation.

Paragraphes

Le paragraphe HTML est un peu bizarre. Selon le CMS et le générateur que vous utilisez, chaque saut de ligne peut être automatiquement rendu dans un paragraphe distinct. WordPress le fait lorsque vous tapez du HTML. Cependant, tout ne fait pas cela. Donc, si vous devez séparer vos paragraphes et ne pas avoir de mur de texte, enveloppez chacun de <p> . Le navigateur saura alors afficher chaque bloc de texte comme un paragraphe séparé au lieu d'un bloc continu. Par défaut, les navigateurs ignorent les sauts de ligne, sauf indication contraire.

<p>This is my first paragraph.</p>
<p>This is my second paragraph.</p>

Lignes et sauts de ligne

Vous voudrez peut-être d'autres séparations entre vos paragraphes et vos sections. C'est alors que vous pouvez utiliser les balises <hr> et <br/> .

<hr> insère une ligne de séparation partout où elle se trouve. De nombreuses personnes l'utilisent pour séparer les widgets dans une barre latérale ou des sections principales d'une page Web.

La balise <br/> est un saut de ligne. Vous pouvez utiliser le <br/> au milieu d'un <p> pour couper une ligne sans entrer dans un nouveau paragraphe (pour le style des blocs et l'organisation). <br/> est une balise à fermeture automatique, ce qui signifie qu'aucun contenu ne peut s'y trouver. Ceci est indiqué par la barre oblique à la fin du code.

Bien que vous puissiez l'utiliser pour diviser du texte et des paragraphes en les insérant là où vous le souhaitez, ce n'est pas une bonne pratique, et au fur et à mesure que vous progresserez avec HTML, CSS et JavaScript, vous devrez cibler le paragraphe élément pour faire certaines choses. Vous pouvez en savoir plus sur la distinction ici.

Emballer

HTML est absolument nécessaire pour interagir avec Internet. Tout le monde les utilise de la même manière, que vous débutiez dans le développement et la conception Web ou que vous soyez un vétéran de l'époque où JavaScript n'existait pas. Nous utilisons toujours les codes HTML de base pour exécuter les fondations de tous nos sites. Peu importe à quel point le site est sophistiqué ou à quel point ses fonctionnalités sont avancées, lorsqu'un lien se brise ou que des éléments audacieux ne devraient pas l'être, vous allez toujours chercher pour voir si les balises <a href> ou <strong> sont ça va.

Quels sont vos codes HTML de base les plus utilisés de nos jours ?

Article présenté en image par enterlinedesign / shutterstock.com