Tutos sur le dév web

HTML 5

Le HTML pour Hyper Text Markup Language est le language de balise standard pour les pages web.
Les éléments HTML sont représentés par des balises <>. Ils nous servent à décrire les différents contenus d'une page.
La dernière version est le HTML 5 sorti le 1er novembre 2016.

1) Type de Balises

Il existe deux types de balises :

  • balises génériques
  • balises sémantiques

La 1ère catégorie sert de conteneur, indiquant au navigateur comment le contenu doit être affiché. Ces balises ne renseignent pas d'informations sur le rôle du contenu englobé. En voici un exemple :

<div
>
<span
>

La seconde catégorie permet d'indiquer un rôle clairement défini concernant l'élément englobé, exemple ci-dessous :

<header
>
<footer
>
<nav
>

Certaines balises sont des balises paires telles que :

< h1 >Mon titre de niveau 1

</h1>

< p >Mon paragraphe

</p>

Ou alors orphelines comme celles-ci :

<br
>
<img
src="http://via.placeholder.com/640x360"
>

Voici une liste non exhaustive des balises largement utilisées :

<h1
>
<p
>
<a
>
<img
>
<div
>
<nav
>
<footer
>

2) Structure d'une page

Une page HTML contient :

  • une déclaration du type de la page, pour que le navigateur et les robots d'indexation reconnaissent que la page est écrite en HTML.
  • la langue de la page (optionnelle)
  • la balise head, l'en-tête de notre page. On y retrouve l'encodage, le titre de la page, une description et autres informations utiles pour le SEO. Mais également des éléments essentiels pour notre rendu, avec une référence aux fiches CSS et aux scripts JS servant à rendre plus dynamique notre page.
  • la balise body qui contient toute la description de notre page HTML, avec toutes nos balises, qui permettent en lien avec le CSS d'indiquer au navigateur comment afficher notre page.

Voici un exemple de la structure d'une page web classique :

<!doctype html>

<html lang='fr'>

<head>

<meta charset="utf-8">
<title>Titre de la page</title>
<meta name="description" content="description de la page" />
<link rel="stylesheet" href="css/style.css" />
<script src="js/script.js" />

</head>

<body>

<nav> ... </nav>
<main> ... </main>
<footer> ... </footer>

</body>

</html>

3) Le DOM

Le DOM est une réprésentation de notre document HTML source. Il est le résultat d'une conversion de la structure et du contenu de notre document HTML. Il en découle un modèle objet utilisable par différents programmes.

La structure de cet objet est représenté par une "arborescande de noeuds (node tree). On peut ainsi le considérer comme un arbre qui se ramifie en plusieurs branches enfants, qui peuvent elles aussi avoir des branches. L'élément parent est la balise racine <html>, les enfants sont ses éléments imbriqués.
Voici un exemple ci-dessous de la représentation du DOM de la page ci-dessus :

Voici le DOM de la page sur laquelle vous êtes, le DOM est accessible via l'outil inspecter l'élément (clique droit puis inspecter l'élément sur Chrome ou Ctrl + Maj + I).

C'est fréquent que nous ayons besoin de modifier le DOM en Javascript. Par exemple pour la gestion du menu d'un site tel que celui sur lequel vous êtes.
En ajoutant ou supprimer une classe CSS a la barre de navigation et l'aside qui apparaît quand on clique sur l'icône du menu. Le CSS est notre prochain chapitre.

Sources

Ci-dessous vous retrouverez mes sources avec des liens pour aller plus loin dans la compréhension de ce qu'est le HTML.