Base

Le langage de balisage hypertexte est le centre du Web. Il fournit le contenu, ainsi que la structure de ce contenu. Chaque page affiché sur internet est du html.

Origine

L'html est le résultat d'une request client à un serveur.

• Le navigateur web ( client ) fait une demande
• Donne moi la page index.html de https://grafikart.fr
• https://grafikart.fr est résolut par un serveur dns sous forme d'adresse ip
• Le pc qui est derrière cette adresse ip va recevoir la demande
• Cette demande arrive sur son port 80 ( ou 443 si https )
• Sur ce port tourne un programme en continue qui écoute les demandes arrivante
• Ce programme est un serveur web ( apache, nginx, etc ) qui va se charger d'executer la demande
• Il va chercher le contenue qui coorespond à la demande ( ici la page d'accueil )
• Si ce fichier est du html il peut le renvoyer directement
• Il renvoi l'html sous forme d'une response http
• Le client recevant cette réponse ( cad notre navigateur ) va pouvoir la lire et l'afficher
• Notre navigateur comprend le contenu html et peut donc crée l'affichage
• L'utilisateur derrière son écran voit le résultat non pas comme du html brute mais mit en forme

L'html est une réponse structuré est affichable par un navigateur web

Language ?

Bien qu'Html porte dans son acronyme le mot de language il n'est pas un language au sens de la programation.

En java, c, python, php, ... j'ai des boucles, des conditions, des functions methodes etc. Html n'a rien de tout ça.

Si je veux écrire 10 X salut avec un language de programmation je ferais une boucle

for( $i = 0; $i < 10; $i++)
{
echo 'salut';
}

En html, je vais devoir l'écrire 10 x mois même !

<p>salut</p>
<p>salut</p>
<p>salut</p>
<p>salut</p>
....

C'est là ou la notion de server est importante. On peut demander à notre serveur de faire le travail de répétition. Donc pour ça on va utiliser un language coté serveur ( PHP, Java, Ruby, Nodejs, ... ). Et ce language va travailler et c'est lui qui va crée le contenu html que le serveur va renvoyer.

On reprend notre exemple de répétition ce qui donne:

for( $i = 0; $i < 10; $i++)
{
echo'<p>salut</p>'; // on met nos balise html
}

HTML c'est simple, c'est basique mais c'est essentiel. Cn va pouvoir le générer avec d'autre language et pouvoir crée des pages plus complexe mais de façon facile grace à l'association avec un language de programation.

Remarques

Dans le web on va avoir des spécialisation et avoir des développeurs front ou back. Par front en entent toute la partie visible ( cad celle coté client ). Back c'est la partie que l'utilisateur ne verat pas, l'accès base de données, mise en forme des données génération du html, ...

On parle de développeur fullstack lorsque celui ci va se charger du back et du front.

Il existe aussi des spécialisation par exemple coté front on peut parler d'un ux designer. Il va avoir pour mission d'améliorer l'expérience utilisateur (User Experience ) en travaillant sur le visuel, facilité et plaisir d'utilisation.

Coté back on peux avoir un DBA qui est spécialisée dans la gestion de la base de données, optimisation du serveur de db etc.

Voici un site qui donne un listing des compétences selon les profiles de développeurs https://roadmap.sh

Pas un language

On va plutot parler de language de balise ( Markup language ). Son but est de permettre de structurer/organiser des données à l'aide de balises. Il va utiliser une syntaxe facile à lire qui définit la structure, le type, les attributs, les relations entre les parties, l'affichage et la signification des données.

Syntax

Balises

Les balises sont désignées par des symboles comme < et >. Elles fournissent une structure et un type aux éléments. Elles définissent le début ( < balise ouvrante ) et la fin ( > balise fermante ) de chaque élément de contenu.

<p>Je suis une balise p qui contient, encadre un contenu texte</p>

Historiquement les tags autofermant étaient indiquer avec </> comme <img src="https://plus.unsplash.com/premium_photo-1688137881227-91b6322c5fe3?q=80&w=1926&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="nice image"/>

Actuellement ce n'est plus nécessaire. On peut le vérifier en consultant la documention et constater que l'usage est maintenant ( pour les balise autofermantes ):

<img src="pic_trulli.jpg" alt="Italian Trulli">

Attributs

Les attributs fournissent plus d'informations sur un élément, comme l'URL d'une image. En HTML et XML, les attributs d'un élément sont définis à l'intérieur de la balise d'ouverture.

ex:

<img href="https://en.wikipedia.org/wiki/HTML5#/media/File:HTML5_logo_and_wordmark.svg" alt="html 5 logo">

Ici la balise est img elle à un attribut href à qui on indique l'url et un autre attribut alt à qui on donne un texte descriptif de l'image. On connait les attributes accepter par un tag en consultant directement la doc sur W3School

Structure bien définie

Les documents HTML doivent respecter les règles de syntaxe du langage donné pour un traitement correct. Un document qui respecte les règles est considéré comme un document bien formé. Un document bien formé nécessite les éléments suivants :

• Un seul élément racine
• Balises de fermeture (ou d'auto-fermeture) pour tous les éléments
• Imbrication correcte avec les balises incluses dans d'autres balises
• Description correcte des caractères spéciaux, tels que & pour le symbole &

Cette structure peut se voir comme un une arboresence.

On retrouve bien un élement racine ( root en anglais ), la balise html. Ensuite se trouve dans cette element deux autres: head et body.

Exemple d'une arboresence débutant avec la balise html qui elle mm contient:

• une balise head
• une balise body
• elle même contenant une balise p

<html lang="en">
<head>
</head>
<body>
<p>Hello</p>
</body>
</html>

Une analogie cinématographique serait de dire que html c'est une balise dans une balise etc jusqu'a remonter à la balise root. C'est Inception avec un reve, au sein d'un autre etc jusqu'à remonter à la réalité ( notre balise root ).

Head

La balise head permet d'indiquer des données destinée au navigateur. On parle de metadata. Des données qui parlent/définissent des données de la page html. head n'as pas vocation à être visible par l'utilisateur.

Par exemple je peux ajouter des mot clé qui seront lue par un robot d'indexation.

<head>
    <meta charset="UTF-8">
    <meta name="keywords" content="HTML, CSS, JavaScript">
</head>

Cette balise meta n'accepte de contenir qu'un certains nombre d'autres balise ( balise enfant ). On en retrouve la liste facilement sur la documentation officiel.

Body

C'est la balise 'soeur' de head ( au sens où elle se trouve au mm niveau dans l'arboresence). Son role est de contenir toutes les autres balises destinées à l'affichage de contenu.

<body>
<h1>Mon titre</h1>
<p>texte 1</p>
</body>

L'essentiel

En résumant, on a besoin au minimun d'une balise root et ses deux filles head et body. Les balises ouvrante ( < ) devant être fermé ( > ) on se retrouve avec des balises imbriqué les unes dans les autres. Ce qui nous donnes la structure minimal suivant:

<html>
<head>
</head>
<body>
</body>
</html>

Pour s'assurer que notre navigateur web comprenne bien les choses on lui précise de lire noter contenu comme étant du html.

<!DOCTYPE html>

Les balises

Il en existe une liste importante qu'on peut retrouver sur le site officiel W3school A l'heure actuelle la pluspart des balises sont comprises par tous les navigateur web. En cas de doute on peux toujours vérifier la compatibilité par rapport aux navigateurs principaux. On voit aussi qu'internet explorer n'est plus supporté et est remplacé par edge qui à une bien meillieur compatibilité.

On peut regrouper les balises en catégories selon leur usages.

Metadata

Les éléments appartenant à cette catégorie modifient la présentation ou le comportement du reste du document, insèrent des liens vers d'autres documents ou comportent des informations sur la structure même des données.

ex:

• link : pour ajouter un lien vers une ressources css
• meta: pour indiquer le charset utilisé ( le type d'encodage du fichier, UTF-8 actuellement)
• title: donne un nom à notre page dans l'onglet du navigateur

Contenu

Ce sont des balises qui vont contenir du texte ou du contenu intégré ( cad contient du contenu issut d'une autre balise).

ex:

• img: pour ajouter une image
• address: indique les informations de contact

Section

Permet de créer de nouvelles partie au sein du document html.

ex:

• section: représente un groupement de contenu sur une mm thématique
• article: pour ajouter une element d'information autonome
• nav: destiné à rassembler des liens vers d'autres pages ( menu )

Intégré

Intègre dans la structure html une ressource externe.

ex:

• audio: ajout de l'audio avec un media player.
• embed: intégration d'un cotenu externe ( sans type distinction de type)
• video: spécialisé pour l'intégration d'une vidéo

Quelle balise utilisé ?

Il en existe beaucoup et il n'est pas toujours facile de savoir quelle balise utilisé. Avec l'habitude se sont souvent les mêmes balise qu'on utilise. Comme html est très répandue il est facile de demander à google quoi utiliser. Par exemple si je veux un tableau je vais demander html table. Les sites de références sont W3School et MDN. On va y trouver toute la liste des balises ainsi que de la documentation ( parfois même en français ).

Attention que certains site peuvent donner des réponses pertinente mais qui date d'ancienne version ou au sujet de vieux navigateur web. En cas de doute on vérifie sur MDN ou W3C.

Semantique

Html à évoluer et de facon à donner plus de sens à certains balise. Le HTML sémantique donne un sens et une structure claire au contenu, ce qui est bénéfique pour l'accessibilité, le référencement et la compréhension du contenu par les machines. Par exemple une balise form va intuitivement indiquer qu'il s'agit d'un formulaire. Ca simplifie le choix des balises pour le dévéloppeur et apporte une information en plus pour le navigateur qui va interprété cette balise.

Cette approche semantiques est à préférer. Par exemple on pourrait utiliser une balise div qui est générique mais si je désire écrire un informations sur le sport je pourrais faire ainsi:

<section>
    <article>
        <p>mon texte au sujet du sport</p>
    </article>
    <article>
        <p>un autre texte au sujet du sport</p>
    </article>
</section>

L'ensemble se retrouve dans une section qui regroupe les articles sur un sport commun. Ici la structure à plus de sens que si on avait tout mit dans une balise générique.

<div>
    <div>
        <p>mon texte au sujet du sport</p>
    </div>
    <div>
        <p>un autre texte au sujet du sport</p>
    </div>
</div>

Vérifier

Pour être sur d'avoir utiliser les bonnes balises au bon endroits on peut directement utiliser le verificateur de W3C. Le validateur va vérifier la cohérence de notre html et nous indiquer les erreurs avec un peut d'explication afin de corriger.

La validation peut sembler sans importance surtout que la plus part des navigateurs moderne vont réussir à afficher correctement la page. Mais une page valide serat mieux référencée. Donc si vous êtes un site commercial et désirez apparaitre dans les premiers résultat de google c'est important de penser à ça. Evidement d'autre critères rentrent en compte dans le référencement cette compétence s'appel le Search Engine Optimisation ( SEO )

Certain navigateur permet d'installer un plugin qui va valider le html et simplifier la vie du développeur. Par exemple pour chrome HTML Validator

C'est moche !

Non c'est structuré. Html n'a pas vocation à faire de jolie chose. L'aspect esthétique est assuré par le CSS ( Cascading Style Sheets )