STRUCTURE D’UNE PAGE EN HTML 5

Sans faire un cours de programmation HTML pour les nuls, on va essayer de comprendre l’essentiel d’une structure HTML. Mais avant, une petite synthèse sur l’utilité de ce langage pour être a jours. 

A quoi sert le langage HTML ?

Ce langage de balisage (en englobe la plupart des éléments entre des <balise>…</balise>) est utilisé pour représenter nos éléments sur une page. Le HTML présente du contenu et indique des informations sur celui-ci. Tandis que le Css, lui va « transformer » ce contenu pour le rendre plus agréable à lire. 

Ça se passe comme sur vos cahiers de notes. Le HTML représente le stylo, tandis que le CSS représente la règle, les feutres de surlignage les soulignements de titres, etc. Les deux sont donc très importants et indissociables. 

Structure essentielle d’une page

Une page HTML requiert plusieurs éléments nécessaires à sa bonne configuration. On peut très bien créer un contenu HTML brut sans rien configurer, mais cela engendrerait des problèmes assez fâcheux pour vos visiteurs. Voyons ce qu’il faut définir et pourquoi.

La version d’interprétation HTML 

<!DOCTYPE html>

Cette balise permet de définir le type et la version d’interprétation du HTML, à l’heure actuelle, cette balise définie comme telle permet de dire aux navigateurs :  » Tu utiliseras l’interprétation HTML5 pour afficher le contenu ».

la balise principale HTML

<html lang="fr">

Cette balise englobera tout le code d’interprétation HTML et permettra aussi de définir la langue pour les navigateurs web

la balise HEAD

Cette balise va permettre d’insérer d’autres balises, charger des éléments spéciaux ou définir des paramètres pour la page web. Tout ce qui se trouve dans la balise HEAD n’est pas visible pour le visiteur. 

Les balises META 

Les balises meta sont utilisées pour ajouter des options particulière à notre page web, comme un titre et une description pour les moteurs de recherche des paramètres d’affichage pour les mobiles. Les balises META se trouvent uniquement en en-tête de notre page c’est-à-dire entre les balises HEAD. 

 <meta charset="UTF-8">

En l’occurrence la balise particulière meta « charset » permet de définir le type d’encodage de notre page web. Cette balise est très importante, car mal configurée, vous risqueriez d’obtenir « u% te$te da »ns ce style de d?lire ». Sans faire un cours sur l’encodage, L’UTF8 est très populaire sur le web, car il permet de couvrir un grand nombre de langue et donc caractère spéciaux. 

la balise title 

<title> Mon titre </title> 

Balise très importante pour définir un titre en code HTML pour les moteurs de recherche. <title> est la balise la plus importante en référencement web. 

La balise description

<meta name="description" content="">

Une balise utile pour définir une courte description de votre contenu dans les moteurs de recherche. Cette balise n’a aucune valeur en référencement, mais elle permet d’informer le visiteur sur ce que votre page raconte. 

La balise icon

<link rel="icon" href="favicon.ico">

Cette balise permet de charger un favion pour votre site. Cela représente les logos des sites web présents dans vos onglets web.

La balise de style

<link rel="stylesheet" href="style.css">

Cette balise est indispensable pour charger votre feuille de style CSS pour l’affichage de votre site. 

la balise BODY

<body>

Cette balise représente le corps de notre page. C’est ici que tout le contenu visible pour le visiteur sera présent.