Informatique


Les balises du document 1

Aller à

Les balises du document HTML

Le document html a une structure:
  • <html> et </html> encadrent le document, le doctype permet de préciser le type de document aux moteurs de recherche.
  • <head> et </head> encadrent l'en-tête
  • <body> et </body> encadrent le corps

	<!doctype html>
	<html lang="fr">
	<head>
		<meta charset=utf-8>
		<!-- l'en-tête du document -->
	</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 ducuments 2"