Informatique


Les balises du document 1

Aller à

Les balises sont sémantiques

Lorsqu'on code une page il faut utiliser les balises adéquates, voici la liste des balises sémantiques et leur utilisation.

Les balises sont utilisées par les moteurs de recherche, ceux-ci classent les pages dans les BD en fonction de l'organisation sémantique du code.
Toutes les balises du codes sont susceptibles d'être utilisées pour le référencement (sauf <span> et <div>).
Toutefois, il faudra travailler en respectant les priorités suivantes:
  1. Commencer le document par doctype pour indiquer que vous codez en HTML standardisé
  2. Respecter la structure générale d'un document html (html, head, body)
  3. Structurer chaque page au moyen des balises structurantes (header, nav, section, article, aside et footer)
  4. utiliser les balises Hx pour les titres, et éventuellement hgroup
  5. utiliser p pour les paragraphes
  6. pour les tableaux, utiliser caption pour le titre et th pour les en-têtes des colonnes
  7. pour les listes, utiliser ul et ol

Les balises du document HTML

Le document html a la structure minimale suivante:
  • <!doctype> permet de préciser le type de document HTML aux moteurs de recherche, l'attribut lang précise la langue utilisée sur la page
  • <html> et </html> encadrent le document
  • <head> et </head> encadrent l'en-tête
    • utf-8 regroupe tous les types de caractères
    • <title>, sa valeur donnera le titre de la fenêtre
    • <viewport> pour un affichage optimal sur n'importe quel écran
  • <body> et </body> encadrent le corps du document, la partie visible pour l'internaute

	<!doctype html>
	<html lang="fr">
	<head>
		<!-- l'en-tête du document -->
		<meta charset=utf-8>
		<title>Mon site</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
	</head>
	<body>
		<!-- le contenu du document -->
	</body>
	</html>	
	

Les balises du contenu

Ces balises aux noms évocateurs sont reconnues par les moteurs de recherche et utilisées pour le référencement, elles seront utilisées par les moteurs de recherche pour élaborer l'arborescence de la page, le Document Type Definition (DTD).
Pour structurer les pages nous utiliserons donc:
  • <header>, pour la bannière principale, le titre de la page, la date du jour,...
  • <nav>, pour la barre de navigation principale (celle qui permet de voyager dans le site)
  • <aside>, pour une barre de navigation secondaire, d'éventuelles publicité, sites liés,etc
  • <main>, pour le contenu informatif principal de la page, une balise main par page (sauf si d'autres sont désactivées)
  • <section>, au sein de main, pour le contenu informatif
  • <article>, au sein de section, pour le contenu informatif
  • <footer>, pour le copyright
les effets des balises structurantes:

Toutes les balises structurantes sont de type block et provoquent un retour à la ligne.

Démo
	<!doctype html>
	<html lang="fr">
	<head>
			<meta charset=utf-8>

		<!-- l'en-tête du document -->
	</head>
	<body>
		<header>
			Pour la bannière principale, le titre de la page, la date du jour,...
		</header>
		<aside>
			Barre de navigation secondaire, d'éventuelles publicité, sites liés,etc
		</aside>
		<nav>
			Pour la barre de navigation principale (celle qui permet de voyager dans le site)
		</nav>
		<main>
			<section>
				<article>
					le contenu informatif
				</article>
				<article>
					le contenu informatif
				</article>
			</section>
		</main>
		<footer>
			Pour le copyright
		</footer>
	</body>
	</html>

Quiz

Voir "Les balises du ducument 2"