Construire une page en HTML5

Pour créer une page HTML5 il ne suffit pas de connaitre les différentes balises disponibles encore faut-il les utiliser correctement.

Création d’une page en HTML5

Prenons comme base départ une page proposé par le consortium W3C, comme modèles structurel et sémantique.

<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta charset=utf-8>
<title>Exemple de page HTML5 structuré</title>
</head>
<body>
<div id="container">
<header>
<h1>Exemple de page HTML5 structuré</h1>
<nav>
<ul>
<li><a href="#">accueil</a></li>
<li><a href="#">à propos</a></li>
</ul>
</nav>
</header>
<section>
<h1>section principale</h1>
<h2>Sous titre h2</h2>
<article>
<p>contenu d'un paragraphe</p>
</article>
<article>
<p>encore un paragraphe</p>
</article>
</section>
<footer>
<p>et le pied de page (footer)</p>
</footer>
</div>
</body>
</html>

Attention : si cette page est effectivement un modèles en HTML, elle n’est pas un bon exemple SEO car il est préférable d’avoir une seule balise h1 dans une page.

Description des balises

Voyons en détails les balises sur la page est leurs fonctions.

!Doctype

Le doctype est une nouveauté introduite par le HTML5, ce doit être impérativement la première informations du document. Ce n’est pas une balise au sens strict du terme, mais une instruction destiné au navigateur pour l’informer du type du document.

Le doctype n’est pas sensible à la case.

<html>

La balise html est une des balises absolument indispensable ! Elle contient les informations de la page et elle doit être la première balise du document, celle qui contiendra toutes les autres.

<html lang="fr">

Ici on remarque que notre balise html a un attribut lang de valeur fr. Cela permet de définir la langue utilisé dans la page.

<head>

<head>
<meta charset=utf-8>
<title>Exemple de page HTML5 structuré</title>
</head>

La balise head contient les informations qui ne seront pas directement affiché par le navigateur. Elle peut contenir les balises suivantes :

  • <title> Obligatoire en HTML5 contient le titre de la page.
  • <style> Les régles de style de la page c.f : CSS.
  • <base> Défini l’url de base pour les liens de la page.
  • <link> Cible une des ressources de la page, comme les fichiers CSS ou Js.
  • <meta> Les informations de la page (comme la description, les mots clé l’auteur etc.).
  • <script> Contient du code JavaScript.
  • <noscript> Affiche le contenu de la balise en cas incompatibilité du navigateur.
A lire  JavaScript

<meta>

La balise meta est assez complexe à appréhender mais les métadonnées sont les informations qui caractérisent la page, la syntaxe est simple mais il faut connaitre les différents usages de la balise.

<meta name="nom de la meta-donnée" content="valeur(s)">
3 méta données indispensables

Il existe quantité de méta données l’objectif n’est pas les connaitres toutes, la syntaxe étant simpliste il suffit de comprendre le fonctionnement pour implémenter celle dont vous aurez besoin.

description

La balise méta description permet de décrire le contenu de la page, c’est ce qui sera utilisé par les moteurs de recherche pour afficher un extrait de la page (pas systématiquement mais nous y reviendrons avec le SEO)

<meta name="description" content="construction d'une page en HTML5">

La description doit être etre 50 et 300 caractéres (la longueur maximum à augmenté en décembre 2017).

author

Avec la balise author on défini l’auteur de la page ^^.

<meta name="author" content="Occitaweb">
viewport

Le viewport est une balise qui défini le niveau de zoom de la page, cela permet aux appareils mobile d’adapter le contenu au format de l’écran.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Si cette méthode ne suffit pas à rendre un site responsive cela permet de grandement améliorer l’expérience utilisateur sur mobile.

<body>

La balise body est la seconde balise absolument indispensable, elle contiendra les informations qui seront affiché par le navigateur.

<div>

Les div sont des balises block génériques. Une balise block s’affichera de façon à occuper tout l’espace disponible sur sa ligne.

<span>

Les span sont des balises inline génériques. Les balises inline occupe l’espace nécessaire à l’affichage de son contenu et s’affiche les uns à la suite des autres.

A lire  HTML

<header>

L’header c’est l’entête de la page, par convention l’header est généralement semblable sur toutes les pages du votre site, il permet de naviguer sur le site avec un menu <nav>. Elle contient généralement le H1 de votre page.

<header>
<h1>Exemple de page HTML5 structuré</h1>
<nav>
<ul>
<li><a href="#">accueil</a></li>
<li><a href="#">à propos</a></li>
</ul>
</nav>
</header>

La balise peut être répétée mais elle ne doit pas être utiliser dans la balise <footer>.

<h1>

La balise H1 est la balise de titre de la page, elle doit être utilisé une seulement fois par page pour respecter les recommandations SEO.

<nav>

Contient une liste d’éléments permettant la navigation sur le site.

<nav>
<ul>
<li><a href="#">accueil</a></li>
<li><a href="#">à propos</a></li>
</ul>
</nav>

<ul>

La balise ul déclare une liste, elle contient chaque élément de la liste dans des balises li.

<li>

Élément de liste

<li><a href="#">accueil</a></li>

<a>

La balise a permet de créer des liens hyper-texte pour naviguer entre pages du site.

Il est nécessaire d’utiliser des attribut pour rendre le liens fonctionnels.

<a href="https://www.occitaweb.fr">Occitaweb</a>

L’attribut href défini l’url qui sera appelé par le navigateur lors du clic.

<section>

Les sections définissent des zones dans la page, par exemple la balises header est une section, on utilise des sections pour afficher des éléments par thèmes. Dans notre exemple la section contient des articles.

<article>

Les articles sont des contenu indépendant se suffisant à eux-même. A la différences des sections ils sont ce qu’on appellent du contenu profond. Le terme de profondeur est lié à la structure d’une site internet, en navigant on explore de plus en plus profondément. les articles contenant des informations ce doit être le dernier niveau d’exploration.

A lire  PHP

<p>

La balise p sert à afficher des paragraphes.

<footer>

Le footer c’est le pied de page de votre page, comme avec le header il est par convention similaire sur tout le site.

 

© 2018 Occitaweb formation WordPress et média sociaux