Contenu d’une page HTML
Des boites dans des boites dans des boites
Une page web est découpée grossièrement en deux parties :
Le head du document
Le body
Dans le head on va faire appel à des éléments qui sont à destination des navigateurs et robots d’indexation et des appels à des liens externes comme pour intégrer une typographie, une bibliothèque d’effets… Tout ce qui est intégré dans le head n’est pas visible au sein de la page web.
Dans le body on va structurer la page web, en utilisant différentes balises. Les balises elles n’apparaissent que lorsqu’elles ont un contenu. Structurer une page HTML est un jeu d’enfant si on intègre dès le départ qu’il s’agit d’un jeu de boites dans des boites, des éléments dans des éléments.
Exemple concret : Dans mon header j’ai un logo et une nav, donc en code j’aurai une boite header dans laquelle j’aurai deux autres boites, une pour le logo et une pour la nav.
Je peux avoir autant de boites que nécessaire s’intégrant les unes dans les autres.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Document sans nom</title>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<!--SPECIFICATION DU DOCTYPE-->
<html>
<!--OUVERTURE DE LA BALISE HTML-->
<!--Attention : L'élément html sera fermé tout en bas de la page-->
<head>
<!--OUVERTURE ENTETE DU DOCUMENT-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--ENCODAGE DE LA PAGE. Permet le bon affichage des caractères spéciaux (textes avec accents, cédilles…)-->
<title>Document sans nom</title>
<!--TITRE DU DOCUMENT-->
</head>
<!--FERMETURE ENTETE DU DOCUMENT-->
<body>
<!--OUVERTURE DU CORPS DE LA PAGE, endroit où vous intégrerez vos différentes balises-->
</body>
<!--FERMETURE DU CORP DE LA PAGE-->
</html>
<!--FERMETURE du html présent juste en dessous du Doctype-->
Contenu d’une de mes pages type
Ma base de travail
Au fil des années j’ai ajouté des balises en me concevant mon propre gabarit de page qui me permet de gagner du temps en évitant de revenir par la suite pour ajouter de nouveaux éléments dans le head.
On y retrouve la balise liée au RWD, l’appel au CSS et des balises Meta liées au référencement.
Les balises méta ajoutées me permettent aussi de ne pas oublier leur remplissage une fois le site terminé.
Ces méta sont à destination des navigateurs, et robots.
Ainsi je leur donne d’autres indications comme :
– la langue déclarée de mon site.
– le descriptif de mon site qui apparaitra sur Google en dessous de mon nom de domaine
– la méta robot pour dire aux robots de passer sur mon site, de suivre les différents liens et de tout indexer
J’intègre aussi le lien de ma feuille de style par défaut.
Elles ont toutes le même nom : style.css
<!DOCTYPE html>
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="xxx" />
<meta name="language" content="fr" />
<meta name="robots" content="index, follow, all" />
<title>Document sans nom</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
<body>
</body>
</html>
<!DOCTYPE html>
<!--SPECIFICATION DU DOCTYPE-->
<html lang="fr">
<!--OUVERTURE DE LA BALISE HTML et LANGUE UTILISEE : FR pour Français-->
<head>
<!--OUVERTURE ENTETE DU DOCUMENT-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--ENCODAGE DE LA PAGE-->
<meta name="description" content="xxx" />
<!--META DESCRIPTION-->
<meta name="language" content="fr" />
<!--META LANGUE-->
<meta name="robots" content="index, follow, all" />
<!--META ROBOT : Pour leur dire s'ils peuvent ou non explorer et indexer un document-->
<title>Document sans nom</title>
<!--TITRE DU DOCUMENT-->
<link href="style.css" rel="stylesheet" type="text/css" />
<!--LIAISON A LA FEUILLE DE STYLES-->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
<!--META SPÉCIFIQUE permettant de donner des instructions pour les périphériques mobiles-->
</head>
<!--FERMETURE ENTETE DU DOCUMENT-->
<body>
<!--OUVERTURE CORPS DU DOCUMENT AVEC LES BALISES BODY-->
</body>
<!--FERMETURE CORPS DU DOCUMENT AVEC LES BALISES BODY-->
</html>
<!--FERMETURE du html présent juste en dessous du Doctype-->
Balise meta
Je remplis des trucs qui servent a quoi ?
Exemple concret de l’utilité des balises méta.
Elles servent à référencer une page.
Quand on effectue des recherches sur un moteur de recherche, on utilise des mots clefs. Il y avait avant la balise méta keywords qui est devenu obsolète. Ces mots clefs doivent être présents dans le contenu de la page et aussi dans la balise méta description et le title.
Quznd je fais une recherche je vois donc :
1 : L’URL de ma page : Nom de domaine et nom de la page
2 : La balise title qui correspond au titre de ma page
3 : La méta description qui est une synthèse du contenu de ma page.