Qu'est-ce que le HTML - Définition du langage de balisage

HTML, ou Hypertext Markup Language, est un langage de balisage pour le Web qui définit la structure des pages Web.

Il s’agit de l’une des composantes de base de tout site Web, qu’il est donc essentiel d’apprendre si vous souhaitez faire carrière dans le développement Web.

Dans cet article, je vais vous expliquer en détail ce qu’est le HTML,
comment il fonctionne sur les pages Web,
et nous allons également aborder une partie vraiment cool du HTML – le HTML sémantique.

Qu’est-ce que le HTML ?

Pour comprendre le « HTML » de A à Z, examinons chaque mot qui compose l’abréviation :

Hypertexte : texte (souvent accompagné d’éléments tels que des images) qui est organisé de manière à relier des éléments connexes.
Balisage : guide de style pour la composition d’un document destiné à être imprimé sur papier ou sur support électronique.
Langage : un langage qu’un système informatique comprend et utilise pour interpréter des commandes.

Le langage HTML détermine la structure des pages web. Cette structure seule ne suffit pas pour qu’une page Web soit belle et interactive. Vous utiliserez donc des technologies assistées telles que CSS et JavaScript pour rendre votre HTML beau et ajouter de l’interactivité, respectivement.

Dans ce cas, j’aime décomposer les trois technologies – HTML, CSS et JavaScript – de la manière suivante : elles sont comme un corps humain.

HTML est le squelette,
CSS est la peau,
et JavaScript est le système circulatoire, digestif et respiratoire qui donne vie à la structure et à la peau.

Vous pouvez également considérer HTML, CSS et JavaScript de cette manière :

HTML est la structure d’une maison,
CSS est la décoration intérieure et extérieure,
et JavaScript est l’électricité, le système d’eau et de nombreuses autres caractéristiques fonctionnelles qui rendent la maison habitable.

Balises HTML

Puisque le langage HTML définit le balisage d’une page Web particulière, vous voudrez que le texte, les images ou d’autres éléments apparaissent de certaines façons.

Par exemple, vous pouvez vouloir que certains textes soient grands, d’autres petits, et d’autres encore en gras, en italique ou sous forme de puces.

Le langage HTML comporte des « balises » qui vous permettent de réaliser ces opérations. Ainsi, il existe des balises pour créer des titres, des paragraphes, des mots en gras, des mots en italique, etc.

Éléments HTML

Un élément se compose d’une balise d’ouverture, d’un caractère, du contenu et d’une balise de fermeture. Certains éléments sont vides, c’est-à-dire qu’ils n’ont pas de balise de fermeture mais comportent une source ou un lien vers le contenu que vous souhaitez intégrer à la page Web.

Un exemple d’élément vide est <img>, que vous utilisez pour intégrer des images sur une page Web.

Les éléments HTML sont souvent utilisés de manière interchangeable avec les balises, mais il y a une petite différence entre les deux. Un élément est une combinaison de la balise ouvrante et de la balise fermante, puis du contenu situé entre les deux.

Attributs HTML

Les balises HTML prennent également ce que l’on appelle des attributs. Ces attributs sont placés dans la balise d’ouverture et vont du style aux classes en passant par les ids. Ils prennent des valeurs, qui transmettent plus d’informations sur l’élément et vous aident à faire des choses comme le style et la manipulation avec JavaScript.

Dans l’infographie ci-dessous, la balise d’ouverture contient un attribut class dont la valeur est « text« . Cet attribut peut être utilisé pour styliser l’élément ou le sélectionner avec JavaScript pour l’interactivité.

Voici l’anatomie d’une page HTML de base :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Definition of HTML</title>
  </head>
  <body>
    <!--Page content such as text and images goes in here-->
  </body>
</html>

Examinons les bits de code importants ici :

<!Doctype html> : Spécifie que nous utilisons HTML5 dans ce code. Avant l’introduction de HTML5, vous deviez indiquer explicitement dans quelle version de HTML vous codiez avec la balise <!Doctype>. Par exemple, HTML4.0, 3.2, et ainsi de suite. Mais maintenant, nous n’en avons plus besoin. Lorsque « html » est écrit dans le code, le navigateur suppose automatiquement que vous codez en HTML5.
<html></html> : la racine, ou élément de niveau supérieur de tout document HTML. Tous les autres éléments doivent être enveloppés dans cet élément.
<head></head> : l’une des parties les plus cruciales du document HTML. Les robots d’exploration du Web regardent à l’intérieur des balises head pour obtenir des informations importantes sur la page. Elle contient des informations telles que le titre de la page, les feuilles de style, les méta-informations pour le SEO, et bien d’autres choses encore.
<meta /> : il s’agit d’un élément vide qui transmet des méta-informations sur la page. Ces informations peuvent inclure l’auteur, le type d’encodage utilisé (presque toujours UTF-8), la réactivité, la compatibilité et bien d’autres choses encore. Les robots d’exploration du Web regardent toujours la balise méta pour obtenir des informations sur la page Web, qui joueront un rôle crucial dans le SEO.
<title></title> : elle définit le titre de la page web. Il est toujours affiché dans l’onglet du navigateur.
<body></body> : tout le contenu du document HTML se trouve à l’intérieur de la balise body. Il ne peut y avoir qu’une seule balise <body> sur l’ensemble de la page.

Qu’est-ce que le HTML sémantique ?

Le HTML sémantique signifie que vos balises HTML transmettent la signification réelle de ce pour quoi elles sont utilisées.

La sémantique fait partie intégrante du HTML depuis sa création au début des années 90. Mais elle n’a jamais pris une importance particulière avant la fin des années 90, lorsque les CSS ont commencé à fonctionner dans la plupart des navigateurs.

Avec le HTML sémantique, les balises sémantiquement neutres telles que <div> et <span> sont mal vues puisque des balises sémantiquement plus descriptives telles que <header>, <nav>, <main>, <section>, <footer> et <article> peuvent faire la même chose qu’elles.

Un avantage notable de l’utilisation de balises sémantiques est que les robots d’exploration du Web sont en mesure d’indexer facilement la page Web ou le site Web, ce qui améliore le SEO en retour.

De même, un site Web qui utilise la sémantique devient plus informatif, plus adaptable et plus accessible à ceux qui utilisent des lecteurs d’écran pour accéder aux sites Web.

Examinons quelques-unes des balises sémantiques HTML les plus couramment utilisées

<header> : L’élément <header> définit la section d’introduction d’une page Web. Il contient des éléments tels que le logo, la navigation, le sélecteur de thème et la barre de recherche.
<nav> : L’élément <nav> spécifie les éléments de navigation de la page tels que accueil, contact, à propos, FAQ, etc.
<main> : L’élément <main> est conventionnellement traité comme le descendant immédiat de la balise. Il contient les sections principales du document HTML en dehors de <header> et <footer>. Idéalement, il ne devrait y en avoir qu’un seul dans l’ensemble du document HTML.
<section> : L’élément <section> définit une section particulière de la page Web. Il peut s’agir de la section vitrine, de la section à propos, de la section contact, ou autres. Vous pouvez utiliser de nombreuses sections dans un seul document HTML.
<article> : L’élément <article> représente une certaine partie d’une page Web qui transmet des informations particulières. Ces informations peuvent être une combinaison de texte, d’images, de vidéos et d’éléments intégrés. Regardez cet élément comme un article de blog autonome sur une page contenant des extraits d’autres articles de blog.
<aside> : Comme son nom l’indique, cet élément représente une barre latérale sur une page Web. Il s’agit généralement d’une partie de la page Web qui n’est pas directement liée au contenu principal.
<footer> : L’élément <footer> accueille des éléments tels que des liens rapides, des informations sur le droit d’auteur ou toute autre donnée relative à l’ensemble du site ou de la page web.

Notez que puisque les éléments sémantiques transmettent une signification réelle et ce que fait réellement un contenu particulier (comme nav pour la navigation, aside pour une barre latérale, et ainsi de suite), ces éléments ne sont pas automatiquement positionnés là où ils sont censés être. ), ces éléments ne sont pas automatiquement positionnés là où ils doivent l’être. Vous devez toujours le faire avec CSS.

Un document HTML sémantique super simple ressemble à ceci

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Definition of HTML</title>
  </head>

  <body>
    <header>
      <h1 class="logo">LOGO</h1>
      <nav>
        <ul>
          <li>Home</li>
          <li>About</li>
          <li>Contact</li>
          <li>FAQs</li>
        </ul>
      </nav>
    </header>
    <main>
      <section class="about-me">
        <article>
          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Optio magni
          est asperiores nemo, adipisci minus itaque quam, rem libero aliquam
          nesciunt, nisi inventore assumenda earum repellat labore ratione
          architecto eos quis. Soluta mollitia cupiditate dolorem. Consequatur a
          soluta laudantium nihil. Molestias, officiis ut! Nobis adipisci
          voluptatem quam at officia beatae!
        </article>
      </section>
      <section class="contact-me">
        You can find me on
        <a href="https://twitter.com/koladechris">Twitter</a> You can find me on
        <a href="https://Instagram.com/koladechris">Instagram</a>
      </section>
      <aside class="address">My Address</aside>
    </main>
    <footer>© 2020 All Rights Reserved</footer>
  </body>
</html>

Voici à quoi cela ressemble dans le navigateur :

Vous pouvez voir que le contenu à l’intérieur de la balise <aside> n’est pas dans la barre latérale et que le contenu à l’intérieur de la balise <nav> n’est pas automatiquement disponible comme barre de navigation. C’est pourquoi vous devez encore leur donner l’apparence qu’ils sont censés avoir avec CSS.

Conclusion

J’espère que cet article vous a permis d’apprendre les bases du HTML et de ses fonctions. Vous pouvez maintenant commencer à apprendre des technologies plus avancées telles que CSS et JavaScript, puis commencer à vous forger une solide carrière dans le développement Web.

Merci beaucoup pour votre lecture et passez un bon moment.