Ceci est une ancienne révision du document !
Les bases de HTML
Introduction
Qu'est ce que le HTML ?
Le HTML (HyperText Markup Language) est un format de présentation de données permettant de créer des pages web pouvant être lues dans les navigateurs (ex : Chrome, Firefox, Internet Explorer, …). L'ensemble de ses pages web constitueront votre site.
Qu'est ce qu'une balise HTML ?
Une balise HTML est un élément que l'on va ajouter au texte de départ pour dire au navigateur de quelle manière l'afficher. Cette balise ne sera pas affichée telle quelle par le navigateur mais sera interprétée par celui-ci. Une balise est toujours délimitées par les signes < et >.
Exemple de balise : // \\ Une balise peut être constituer d'attributs. Les attributs sont des informations complémentaires qui caractérisent la balise. Un attribut se présente sous la forme **nomattribut="valeur"**.\\ \\ > Exemple de balise avec attribut : //ici la balise est html avec un attribut lang ayant pour valeur fr.//\\ \\ Chaque balise doit être fermée de cette façon , mais il existe des exceptions, les balises simples.
==== Les balises simples ==== Ce sont des balises qui sont dites « vides », c'est à dire qu'elles ne vont pas contenir d'autre balise.
> Exemple : <img src="/url/de/image" /> Quelques balises courtes :
<br />, <hr />, <img />, <input />, <meta />, <link />, <base />
==== Les balises imbriquées ==== Il est possible d'imbriquer des balises HTML, par contre il est très important de respecter la hiérarchie. C'est à dire que la première balise ouverte soit la dernière fermée.
> Exemple : <p><strong>Ceci est en gras</strong> et ceci est normal</p>
==== Structure d'un document HTML ==== Avant de commencer le développement d'une page, il est important d'en connaître la structure.
Voici le modèle de base possédant la structure minimale obligatoire.
<code html> <!DOCTYPE html>Titre de la page < !-- Ici votre site - - > </code> La première ligne de cet exemple s'appelle le DOCTYPE. C'est la balise la plus importante de votre page. Elle permet de conserver la compatibilité du rendu de votre page sur les différents navigateurs. Il en existe plusieurs, ici c'est le modèle de DOCTYPE pour les documents HTML5.
Ensuite vient la balise <html>. Elle encadre l'ensemble des autres balises.
La balise <html> contient deux grandes balises :
<head> qui contient l'en-tête de la page, cette partie ne s'affiche pas à l'écran et indique aux navigateurs les spécificités de la page en cours. <body> qui contiendra le corps de votre document. C'est à dire ce qui s'affichera à l'écran de votre visiteur.Petite précision importante, les balises <html>,<body> et <head> sont uniques. C'est à dire que le code source de votre page ne doit en contenir qu'une. Si votre page possède deux balises <body>, vous aurez des surprises à l'affichage.
==== Le DOCTYPE en détail ==== Le DOCTYPE sert à déclarer quelle norme s'applique à notre page.
Il indique aux navigateurs de quelle manière interpréter telle balise ou telle propriété CSS. En cas d'absence de DOCTYPE ou simplement en cas d'erreur de frappe, le navigateur passera en mode « Quirk » (ou en français non conforme).
En mode Quirk le navigateur est seul maître à bord est fait ce qu'il veut, cela impactera l'affichage de votre page. L'image ci-contre montre quelques différences entre le mode « QUIRK » de Internet Explorer et le mode « normal ».Le DOCTYPE se choisi en fonction de vos besoins. La liste des principaux DOCTYPE est disponible sur cette page.
==== Les commentaires ==== Les commentaires permettent de laisser des informations ou des descriptions et sont utilisables à n'importe quel endroit de votre document. Ces commentaires ne seront pas affichés à l'écran mais seront présent dans le code source de votre page. Il est donc important de ne pas y mettre des informations confidentielles.
> Ils sont délimités par < !– et –> et peuvent être multi-lignes.
Par soucis de compatibilités entre les navigateurs, il est fortement conseillé de se limité à 2 traits d'unions
Exemples : <code html> <!– Voici un premier commentaire sur une ligne. –> <!– Voici un deuxième commentaire. Celui-ci est multilignes. –> <!—————— Cette méthode est déconseillée ! —————–> </code> ===== Le <head> en détails. ===== ==== La balise <title> ==== Cette balise permet d'indiquer le nom de votre page. C'est une des balises les plus importantes de votre document. C'est son contenu qui sera affiché en titre des résultats de la recherche dans les moteurs de recherche.
Exemple : <code html> <title>Cours HTML – Les bases</title> </code>Conseils SEO : Chacune de vos pages de votre site devront posséder un titre unique, toujours en rapport avec le contenu de la page et contenant les mots clés importants présents dans votre contenu.
==== Les balises META ==== === A quoi servent-elles ? === Les balises META sont obligatoirement placées au niveau de la balise <head>. Elles permettent d'apporter aux navigateurs (et aux moteurs de recherche, même si cela à un impact minime) des informations sur la page en cours d'affichage comme son auteur, la date de création, son jeu de caractères (encodage), etc.
Il y a deux grandes familles de balises META : * les META name qui apportent des informations simple (auteur, outils utilisés, etc.) * les META http-equiv qui communiquent directement avec le navigateur et qui peuvent influencer celui-ci.
Conseils SEO : Depuis quelques années, GoogleBot (Robot indexant les pages web pour Google) prend de moins en moins en compte le contenu des balises META. Un grand nombre de celles-ci sont donc désuètes. GoogleBot se focalise, notamment pour les pages en HTML5, sur les micro-données. Mais, et oui il y a un mais, GoogleBot, pour mesurer la pertinence de la page fera une comparaison rapide avec certaines balises META et le contenu de votre document.
=== La balise <meta content-type > === Cette balise est obligatoire pour passer la validation W3C (certification de l'organisme éditeur des normes Web). Elle permet d'indiquer aux navigateurs le type MIME de la page et son encodage (évite que les lettres accentuées soient remplacées par des ? Ou d'autres caractères bizarres.
Exemple : <code html> <meta http-equiv="content-type" content="text/html; charset=utf-8"> </code>