HTML - les premières balises

Article écrit par : sandy

Catégorie(s) de cet article : - La conception de site web

Mot(s)-clef(s) de cet article : - HTML

Introduction

Dans l'article précédent, nous avons vu la syntaxe du HTML5. Vous savez maintenant que c'est un langage de balisage.
Dans cet article, nous allons voir les premières balises de votre page.

Le Doctype

La première balise à connaître est le DOCTYPE :

<!DOCTYPE html>

Cette balise vous permet de dire aux navigateurs que cette page internet respectera les standards du web. Elle doit être la première balise de votre document HTML et elle est obligatoire.

Pour en savoir plus sur les différentes possibilités de cette balise, je vous conseille cet article du site hsivonen .

La balise HTML

La balise « <html> » indique que le code html commence ici. Elle possède une balise fermante et peut avoir des attributs. On dit qu'il s'agit de la balise « racine » de notre code, et c'est une balise de premier niveau.

Il existe plusieurs attributs possibles et nous les verrons dans d'autres articles (class, id, xmlns, etc.) Dans un document classique, nous allons utiliser la balise « lang » qui nous permet d'indiquer la langue utilisée dans la page.

<html lang="fr"> </html>

Ici, "fr" indique que le document sera en français. Cette balise se place après celle du Doctype.
Cette balise va permettre de changer l'affichage de votre texte. Par exemple, si vous précisez que la langue est en français, les guillemets seront des guillemets dits à la française, et si vous mettez l'anglais, vos guillemets seront différents, à l'anglaise.

Pour en savoir plus :
- Déclarer la langue en HTML ;
- lang - HTML

Nous allons donc avoir :

<!DOCTYPE html> <html lang="fr"> Votre trouver le reste de votre code HTML entre ces lignes </html>

La balise head

Cette balise va permettre d'indiquer aux robots (bots), et aux explorateurs internet, que c'est à cet endroit qu'ils vont pouvoir récupérer des informations sur le contenu de votre site et/ou de votre page. On appelle ces informations des métadonnées. Cela permet aux moteurs de recherche de personnaliser l'affichage de votre page ou encore, avec certaines balises spécifiques, de suivre le trafic de votre page via Google par exemple.

Attention, elle doit être présente sur toutes vos pages.
Ces données ne sont pas faites pour être vues par les utilisateurs "humains" de votre site. Cependant, elles seront visibles dans le code source.

<head> </head>

Ok, mais quelles sont ces métadonnées ?
C'est par exemple le titre de la page, le lien vers les feuilles de style (CSS par exemple), certaines feuilles de script, l'encodage de la page, etc.
Ces informations seront dans des balises meta, link, title, script, ou encore style, etc. Ne vous inquiètez pas, ces notions seront vues au fur et à mesure.

Voici un petit récapitulatif de ce que l'on a vu jusqu'à présent :

<!DOCTYPE html> <html lang="fr"> <head> Nous allons mettre d'autres balises ici </head> </html>

La balise Title

La balise Title est très importante, et même obligatoire. C'est elle que va utiliser Google est d'autres moteurs de recherche pour vous référencer. C'est elle aussi qui apparaît dans l'onglet de l'explorateur internet.

<title>Titre de mon article</title>

Un title ne devrait pas dépasser les 55 caractères pour être utilisés par les moteurs de recherche.

Cela donnera :

<!DOCTYPE html> <html lang="fr"> <head> <title> Titre de mon article </title> </head> </html>