Introduction au HTML :les bases du HTML ,structure et syntaxe.
Published: 2023-08-08 09:35:38


Introduction au HTML
Dans son cœur, HTML est un langage vraiment simple, composé d'éléments appliquables à des fragments de texte dans un document pour leur donner un sens différent (est-ce un paragraphe ? est-ce une liste à puces ? est-ce une partie de tableau ?), pour structurer un document en sections logiques (a‑t‑il un en-tête ? est-il sur trois colonnes ? a-t-il un menu de navigation ?) et pour intégrer du contenu 
comme images ou vidéos dans une page. Ce module est une introduction aux deux premiers concepts ; il présente les notions fondamentales et la syntaxe à connaître pour comprendre le HTML.
Cet article porte sur les fondements du HTML, pour prendre un bon départ — nous définissons les éléments, les attributs et tout autre terme important que vous avez peut‑être entendu, ainsi que leur emplacement adéquat dans le langage. Nous montrons comment un élément HTML est structuré, comment une page HTML classique est structurée et expliquons les autres importants traits de base du langage. Dans ce parcours, nous jouons avec certains HTML pour exciter votre intérêt.

![cool](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8yrmewmdfar5z1asvxzl.png)
Les parties principales de notre élément sont :

La balise ouvrante : celle-ci se compose du nom de l'élément (ici p), entre deux chevrons (le premier ouvrant < et le second fermant >). Cela indique le début de l'élément, ici cela indique où le paragraphe commence.
La balise fermante : à la différence de la balise ouvrante, une barre oblique (slash) est ajoutée avant le nom de l'élément. Cela indique la fin de l'élément. Dans notre exemple, c'est l'endroit où le paragraphe s'arrête. Oublier cette balise fermante est une erreur qu'on fait souvent au début et qui peut déclencher des effets étranges et indésirables.
Le contenu : le contenu de l'élément. Pour cet exemple, il s'agit uniquement de texte.
L'élément : l'ensemble formé par la balise ouvrante, la balise fermante et le contenu constitue l'élément.
Les éléments peuvent aussi avoir des attributs comme ceci :
`<div class="container">isaac matone</div>`
Les attributs contiennent des informations supplémentaires à propos de l'élément et qui ne sont pas affichées avec le contenu. Ici, class correspond au nom de l'attribut et editor-note correspond à la valeur de l'attribut. L'attribut class permet de donner un identifiant non unique qui peut être utilisé pour cibler l'élément (et tous les autres éléments qui partagent la même valeur d'attribut pour class), notamment pour la mise en forme ou la manipulation avec des scripts.

Certains attributs n'ont pas de valeur, comme required.

Les attributs qui ont une valeur observent ces règles :

Il y a un espace entre le nom de l'attribut et le nom de l'élément (ou le précédent attribut si l'élément a déjà un ou plusieurs attributs).
Le nom de l'attribut est suivi par un signe égal (=).
La valeur de l'attribut est délimitée par des doubles (") ou simples (') quotes.
nous pouvons aussi avoir des élément vide comme par exemple:
Éléments vides
Certains éléments n'ont pas de contenu, on les qualifie d'éléments vides. Prenons l'exemple de l'élément <img> que nous avons sur notre page HTML :
```html
<img src="images/firefox-icon.png" alt="Mon image de test" />
```
Anatomie d'un document HTML
Voilà ce qu'on peut dire individuellement sur les éléments HTML. En revanche, un élément HTML seul n'a pas vraiment d'intérêt. Nous allons donc voir comment sont assemblés les éléments pour former une page HTML complète.
```html
<!doctype html>
<html lang="fr">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Ma page de test</title>
  </head>
  <body>
    <img src="images/firefox-icon.png" alt="Mon image de test" />
  </body>
</html>
```
Voici ce qu'on y trouve :

<!DOCTYPE html>
Le « doctype ». Il s'agit d'un préambule obligatoire. Aux débuts de HTML (en 1991/1992), les doctypes servaient de liens vers des ensembles de règles qu'une page HTML devait suivre pour être considérée valides (avec des fonctionnalités de vérifications d'erreur et autres). Aujourd'hui, ils ne sont plus utilisés ainsi et ce marqueur sert uniquement au bon comportement du document. C'est tout ce qu'il y a à savoir là-dessus pour le moment.

<html></html>
L'élément <html> est celui qui contient tout le reste de la page. On l'appelle aussi l'élément racine. Il contient ici l'attribut lang qui indique la langue principale du contenu du document.

<head></head>
L'élément <head> sert de conteneur pour tout ce qu'on veut inclure dans une page HTML qui n'est pas du contenu à afficher à l'écran. Cela inclut les mots-clés et une description de la page destinée aux moteurs de recherches, les liens vers le CSS qui mettra en forme notre contenu, les déclarations pour les jeux de caractères utilisés, etc.

<meta charset="utf-8">
Cet élément définit le jeu de caractères utilisé pour le document, ici UTF-8 (qui inclut la plupart des caractères pour un grand nombre de langues écrites). Ce jeu de caractères permettra de gérer n'importe quel contenu textuel placé dans le document. Inclure cette information ne coûte rien et permet d'éviter des problèmes d'encodage par la suite.

<meta name="viewport" content="width=device-width">
Cet élément viewport permet que la page soit affichée avec la bonne largeur par rapport à la zone d'affichage, empêchant les navigateurs sur mobile d'afficher la page plus largement que la zone d'affichage avant de la réduire.

<title></title>
L'élément <title> définit le titre de la page, qui apparaîtra dans l'onglet sur lequel la page est chargée. Il sert aussi à décrire la page lorsqu'on l'ajoute aux favoris ou qu'elle est listée dans les résultats d'un moteur de recherche.

<body></body>
L'élément <body> contient tout le contenu qu'on veut afficher aux utilisatrices et utilisateurs web lorsqu'ils visitent la page, que ce soit du texte, des vidéos, des jeux, des pistes audio, etc.