La structure de base d'une page en HTML 5

A une époque, la création manuelle de pages HTML était difficile. L'utilisation du XHTML a compliqué la syntaxe et les débutants devaient systématiquement recourir à un éditeur WYSWYG pour éviter de taper le code. Même si le HTML 5 possède une structure particulière, on peut voir rapidement qu'elle est plus simple à implémenter.

Le Doctype en HTML 5


Pour créer une page web, il faut déclarer la balise Doctype permettant d'identifier la norme du HTML qu'on utilise. Avec les anciennes versions du HTML, vous utiliseriez un code tel que :


Le code ci-dessus permet de dire au navigateur que la page utilise la norme XHTML transitionnelle. Taper ce code à la main est difficile et la plupart des webmestres font juste copier et coller à partir d'une autre page. Et maintenant, voyons sont équivalent en HTML 5 :




Et c'est tout ! Si le navigateur peut interpréter correctement le HTML 5 alors il validera la page qui contiendra ce code. Premièrement, le Doctype a été simplifié au maximum, mais il faut faire attention à la balise meta pour l'encodage. Dans les anciennes versions, on mettait en guillemet le type d'encodage alors que le HTML 5 n'en a pas besoin. Toutefois, vous pouvez mettre les guillemets et le code sera toujours valide.

Le Header


Quand on parle du Header, on parle de la nouvelle balise HTML 5 qui est dédiée à l'en-tête. On ne doit pas la confondre avec header qui contient des liens vers les fichiers CSS ou JavaScript. Le Header contient des éléments propres à l'en-tête de la page. Cela peut être le titre et la description du site, les menus de navigation et les logos du site. Une norme est d'utiliser des balises allant de H1 jusqu'à H6 pour créer les titres, mais ce n'est pas obligatoire. Si votre site possède un titre et une description, vous pouvez grouper ces deux éléments avec la balise hgroup qui définit ce secteur. Par exemple, le code suivant :

École du HTML 5>

Apprenez facilement le HTML 5 !


Définit un en-tête avec un premier titre en H1 et sa description en H2 et ces deux éléments sont groupés. Vous pouvez mettre les logos avant ou après les titres. L'organisation des éléments est à la discrétion du webmestre.

La navigation avec Nav


La balise HTML 5 nommée Nav indique les menus et la navigation de votre site. Il contiendra principalement des liens vers les différentes parties de votre site. Notez que cette balise peut être placée globalement sur le site ou même dans un article individuel. Par exemple, vous avez crée article très long et donc, vous pouvez mettre une Nav pour créer une table des matières. Voici un exemple de la balise Nav :



Ce code affiche simplement deux liens sur différentes pages web. Notez que l'idée de base est similaire au HTML 4 et on ne voit quasiment aucune différence. Même l'affichage de la page n'est pas différent, mais c'est juste une meilleure organisation du code à des fins sémantiques. Une utilisation standard serait d'utiliser trois balises Nav sur votre site. Le premier serait pour le menu principal, le second pour la table des matières et le troisième pour afficher des articles similaires ou populaires.

La balise Article en HTML 5


Selon le W3C, l'élément Article est un composant d'une page qui peut être traité de manière indépendante à des fins de promotion ou de syndication. Derrière cette expression complexe, cela indique simplement que cette balise contient le contenu principal de la page, mais elle est plus polyvalente que n'importe quelle autre balise. Par exemple, le code suivant :

Titre de l'article

Le corps de votre page avec beaucoup de texte

Publié dans Technologie

Le code ci-dessus est correct, mais ce n'est qu'une partie de la puissance de la balise Article, car on pourrait aussi écrire un code du genre.

Titre de l'article

Le corps de votre page avec beaucoup de texte

Publié dans Technologie

Vous êtes peut-être perplexe, mais c'est la définition exacte de cette balise, à savoir, un composant qui peut être traité indépendamment. Il ne faut pas comprendre qu'une balise Header ou Footer est unique à chaque page, car on parle ici d'éléments de la page. De ce fait, la balise Article peut avoir son propre header qui contient son titre et son propre Footer qui contient des informations propres à l'article et non au site.