41Mag - HTML5 : En-tête et Corps d’une page web

HTML5 : En-tête et Corps d’une page web

Après avoir vu brièvement la définition du HTML5, nous allons nous penché sur la structure d’une page web. Comme nous vous l’expliquions précédemment, le HTML5 est un langage hérité du XML reposant sur le principe de balises imbriqués.

Certaines balises sont donc essentielles à la bonne compréhension de votre document par le navigateur. Après avoir déclaré le Doctype, vous ouvrirez une balise renfermant l’ensemble de votre code : la balise <html>. Elle indique, suite au doctype, le début du document codé en HTML5.

Vous pouvez appliquer différents styles CSS à cette balise comme pour toutes les autres. Si, par exemple vous souhaitez afficher un document sur fond noir, vous lui appliquerez un Background de couleur noir.

Il ne vous reste donc plus qu’à structurer l’intérieur de votre document HTML5 en deux parties : L’en-tête et le corps. Pour bien penser à refermer toutes les balises de votre documents, prenez l’habitude d’écrire une balise suivis immédiatement de sa balise de fermeture – si elle en as une – puis revenir ensuite placez les éléments entre celles-ci.

Certaines balises, comme la balise <html>, se referment à l’aide d’un balise de fermeture, </html>, portant le même nom mais précéder d’un anti-slash /. D’autre se referme seule en ajoutant l’anti-slash avant le symbole « > ». Par exemple la balise image <img /> ou la balise <meta /> dont nous reparleront un peu plus bas.

En-tête d’un document HTML5

1
2
3
4
5
6
7
8
<!DOCTYPE html>
<html>
 
  <head>
    <!-- En-tête du document  -->
  </head>
 
</html>

L’en-tête d’un document se situe donc entre les balises <head> et </head>. Dans l’en-tête, aucune ligne de code ne sera affiché par le navigateur. Il sert uniquement à fournir des informations relatives à votre document au navigateur.

Bien qu’obsolète à l’affichage, certaines balises reste néanmoins quasi obligatoire à être incorporer entre les balises <head>. Prenez par exemple la balise <title>, c’est une balise très importante pour votre référencement ! Ne l’oubliez surtout pas. Elle définiras le titre de votre page pour le navigateur (tout en haut) mais aussi pour Google.

Lors d’une requête Google, les pages sont affichés par liste ou le titre prend une place prépondérante. Les mots-clés de votre page doivent figurer à l’intérieur de la balise <title>.

Les balises META

C’est aussi entre ces balises <head> que vous placerez les fameuses balises <meta> censées améliorer votre référencement. Bien que leur importance diminue au fil du temps, je vous conseille malgré tout de les laisser. Parmi toutes les balises <meta>, les plus utilisées sont les suivantes :

Content-Type : Indique la nature du document et le jeux de caractères utilisés.

TITLE : Indique le nom de votre page web. Bien qu’il soit préférable d’utiliser la balise <title>.

DESCRIPTION : Contient la description de votre page. Bien qu’elle ne soit pas affiché, elle sera affiché dans les recherches Google, juste sous le titre de votre page. Nous vous conseillons de ne pas dépasser les 200 caractères pour cette description.

KEYWORDS : Vous mettrez dans cette balises tous les mots-clés ou expressions-clés de votre page. Ils devront être séparé d’une virgule. Cette balise à une importance très relative. Une liste de 15 à 20 mots sera le maximum conseillé.

ROBOTS : La balise meta robots sert à « communiquer » avec les robots des moteurs de recherches. En effet, Google, Yahoo, bing … ont des robots (petits programmes) qui parcourent le web et enregistrent les pages web des sites. Ils vont de site en site en suivant les liens. Dans cette balise <robots> vous pourrez justement indiquer à ces robots si vous souhaitez qu’ils enregistrent ou non votre page ainsi que s’ils doivent ou non suivent les liens de cette page. A noter que vous pourrez définir individuellement chaque lien et son suivis grâce à l’attribut « NoFollow » de la balise de lien <a> dont nous reparlerons un peu plus loin.

memo HTML5Pour tout retenir, CONSULTER ou TELECHARGER notre mémo HTML5 en .pdf

1
2
3
4
5
6
7
8
9
10
11
12
<head>
 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 
  <meta name="title" content="Titre de la page" />
  <meta name="description" content="description de la page"
  <meta name="keywords" content="mots-clé1, mots-clé2, ..."
 
  <!-- Indexer et suivre -->
  <meta name="robots" content="index,follow" />
 
<head>

Ajouter le CSS

A l’intérieur des balise <head>, nous allons ajouter différents styles CSS. Le CSS est un langage autre que le HTML5. Il permet de mettre en page votre document. Pour faire simple, c’est grâce au CSS que vous définirez la couleur, la police, les emplacements … Le HTML5 et le CSS sont les deux langages de base à connaitre pour savoir créer un site web. Ils sont complémentaires et s’apprennent bien souvent en parallèles.

Pour relier une Feuille de Style – CSS pour Cascading Style Sheet, il vous faut placer la balise <link> entre les balises <head>. Donné à cette balise les attributs correspondant et leurs informations relatives. Dans l’exemple ci-dessous, Link est la balise et, Rel, href et type sont des attributs.

1
2
3
4
5
<head>
 
 <link rel='stylesheet' href='votre-fichier.css' type='text/css' />
 
</head>

Relier une feuille de Style – CSS – indépendante est plus pratique, car si votre site à plusieurs pages, une seule ligne de code suffit pour l’insérer dans chacune. Si par la suite vous souhaitez modifier votre CSS, alors vous ne changerez que le code de la feuille indépendante plutôt que de modifier le code de chaque page. Et chaque page sera modifier. Cependant, sachez qu’il est possible d’écrire du code CSS sur une page html. Ce code ne sera donc valable que pour cette page. Il s’écrit de la manière suivante :

1
2
3
4
5
6
7
<head>
 
  <style type="text/css" media="screen">
  p { color:red; }
  </style>
 
</head>

Rappelez-vous, lors du cours d’introduction, nous vous expliquions que le HTML5 fonctionnais par balises imbriqués. Et qu’entre les balises <p> et </p> se trouve un paragraphe. Dans l’exemple ci-dessous, nous avons donc appliquer, en CSS, un style à tous les paragraphes de la page. Ces paragraphes s’écriront de la couleur rouge.

Relier les Scripts

Entre les balises <head>, vous pourrez également inserer des scripts. C’est un autre sujet que je n’aborderais qu’en survol car il est important de le savoir même si vous ne comprenez pas tout.

Notre tutoriel ne concernant que le HTML5 nous n’étudieront donc pas ce point en détails. Comme pour le CSS, la manipulation est quasi identique pour les scripts. Vous pourrez soit relier un script indépendant, sois l’écrire sur votre page html. Ne soyez donc pas surpris si vous croisez une ligne de code similaire à celle-ci dessous.

1
<script type="text/javascript" src="votre-script.js"></script>

Le JavaScript est un langage de script, comme son nom l’indique, qui agit avec le navigateur. Par exemple, vous pourrez ouvrir une petite fenêtre d’alerte vous demandant de confirmer votre choix lors d’un click sur un lien.

Penser à toujours refermer la balise <script> même si elle ne contient rien en apparence. Contrairement au CSS, les scripts ne s’incorporent pas toujours entre les balises <head>. Tout dépends de leur fonctionnement relatif au DOM (comprenez ceci par chargement et exécution de la page). Ne vous inquiétez pas si vous ne comprenez pas. Notre cours ce base sur le HTML5 mais d’autre langage interagissent avec lui. Il est normale de les aborder sans forcement les comprendre. Retenez juste que cette possibilité existe.

1
2
3
4
5
6
7
8
9
  <!-- Exemple d'un script JavaScript incorporer -->
  <script type="text/javascript">
    alert("Voici un message d\'alerte!");
  </script>
  <noscript>La balise SCRIPT s'accompagne souvent
  de sa balise inverse : NOSCRIPT. Cette dernière contient
  un message à afficher si le script n'est pas supporté.
  Vous n'est pas obligé de mettre cette balise.
  </noscript>

Corps d’un document HTML5

Après avoir détaillé l’en-tête situé entre les balise <head> et </head>, intéressons-nous au corps de notre page web. Ce sujet étant si vaste que le reste du cours ou tutoriel HTML5 y sera dédié.

Représentée entre les balises <body> et </body>, vous placerez tout le contenu de votre page web à l’intérieur de celle-ci. Contrairement à l’en-tête, le corps du document s’affichera sur le navigateur de vos visiteurs.

Nous apprendrons à placé des texte structuré en paragraphe, avec des titres, des images, de la musique et de la vidéo. Nous aborderont également l’architecture spécifique au HTML5 avec ses nouvelles balises tel que ASIDE, SECTION, ARTICLE, NAV … dans nos prochains cours.

Retenez ou comprenez le code source suivant pour ce chapitre :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html>
 
 <head>
 
<!-- En-tête du document  -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 
  <!-- Balise meta  -->
  <meta name="title" content="Titre de la page" />
  <meta name="description" content="description de la page"
  <meta name="keywords" content="mots-clé1, mots-clé2, ..."
 
  <!-- Indexer et suivre -->
  <meta name="robots" content="index,follow" />
 
  <!--  Relier une feuille CSS externe  -->
  <link rel='stylesheet' href='votre-fichier.css' type='text/css' />
 
  <!-- Incorporez du CSS dans la page  -->
  <style type="text/css" media="screen">
  p { color:red; }
  </style>
 
  <!-- Relier un fichier JavaScript  -->
  <script type="text/javascript" src="votre-script.js"></script>
 
  <!-- Incoporez du JavaScript dans la page  -->
  <script type="text/javascript">
    alert("Voici un message d\'alerte!");
  </script>
  <noscript>La balise SCRIPT s'accompagne souvent
  de sa balise inverse : NOSCRIPT. Cette dernière contient
  un message à afficher si le script n'est pas supporté.
  Vous n'est pas obligé de mettre cette balise.
  </noscript>
 
 </head>
 
 
 <body>
 
  <!-- CORPS DE LA PAGE  -->
  <p>Bienvenue sur ma page web</p>
 
 </body>
</html>

[cadreHTML5]

Article du même thême : ....

  • http://twitter.com/Sventovit Philippe Le Mesle

    Faux ! type= »text/javascript » ne doit pas figurer.
    Syntaxe nulle + fautes de grammaire et d’orthographe. Lamentable.

  • Pingback: Apprendre le HTML5 – Tutoriel complet « TAKACLIKE //

  • Pingback: HTML5 & CSS3 by bouche42 - Pearltrees

  • Imasoulchild

    Merci pour vos conseils et votre travail ! Par contre, le ne me semble pas validé par W3C…

  • Pingback: Convertir son thème Wordpress au HTML5

  • Pingback: Tutoriel : Un cadre de partage qui s’affiche lorsque la page défile vers le bas – Animation jQuery

  • L Serge

    Belle article, mais demanderait à être mis à jour, car énormément d’erreurs :
    - Dans HEAD, les balise META, LINK… ne doivent plus obligatoirement être fermées.
    - Toujours dans HEAD, le TYPE d’une balise n’est plus à renseigner.
    - Le  » / » pour fermer une balise, n’est plus obligatoire comme en XHTML.
    - La META ROBOT « index, follow » est celle user par défaut par les moteurs de recherche, donc inutile.
    - Pour l’encodage du texte, la balise  suffit.
    PS : la langue utilisée est à renseigner dans la balise avec l’attribut : lang= »fr » soit  pour un site en français.
    Et pas un mot sur les balise HEADER, NAV, ARTICLE, FOOTER…
    Dommage.

    • L Serge

      Mon commentaire ci-dessus n’affiche pas toutes mes indications, certainement une sécurité contre l’injection de code. Mais les « experts » comprendront :)

  • Jean

    Merci infiniment pour ce rafraîchissement ! Article très clair et essentiel.

    Tout particulièrement pour le mémo en pdf qui a trouvé place sur mon bureau !
    Bonne continuation.

Copyright © 2013 | 41Mag. All rights reserved. Contact.
Integrated by Créa-troyes. Powered by WordPress.