XHTML > Ma première page XHTML

Structure de base d'une page web XHTML

Version commentée :

	<!-- Déclaration de la DTD (Déclaration de Type de Document) utilisée,
		 indiquant au navigateur quel est le langage et la version utilisée, ici : XHTML 1.1 -->
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
	    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	<!-- La balise <html> est l'élément racine englobant toute la page.
		 Attribut xmlns : pointe vers un document traitant du XHTML.
		          xml:lang : indique dans quelle langue est rédigée votre page web. -->
	<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
	<!-- La balise <head> est l'en-tête de la page, il a pour objet de décrire le document. -->
	<head>
		 <!-- Titre de la page s'affichant tout en haut du navigateur. Balise très importante. -->
	     <title>Titre de la page</title>
	     
	     <!-- Méta-informations décrivant la page, il existe beaucoup de balises de ce type.
	          Elles sont destinées aux robots des moteurs de recherche. -->
	     <meta name="keywords" lang="fr" content="mot-cle-1,mot-cle-2" />
	     <meta name="description" content="Description de la page." />
	     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	     <meta http-equiv="Content-Language" content="fr" />
	     
	     <!-- Inclusion de feuilles de style CSS (Cascading Style Sheets). -->
	     <link href="style.css" rel="stylesheet" type="text/css" />
	     
	     <!-- Inclusion de fichiers contenant du code JavaScript. -->
	     <script src="javascript.js" type="text/javascript"></script>
	</head>
	<!-- Corps du document -->
	<body>
		<!-- Contenu de la page, partie visible par le visiteur -->
		Et Epigonus quidem amictu tenus philosophus, ut apparuit, prece frustra temptata, 
		sulcatis lateribus mortisque metu admoto turpi confessione cogitatorum socium. 
	</body>
	</html>

Version compacte :

	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
	    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
	<head>
	     <title>Titre de la page</title>
	     
	     <meta name="keywords" lang="fr" content="mot-cle-1,mot-cle-2" />
	     <meta name="description" content="Description de la page." />
	     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	     <meta http-equiv="Content-Language" content="fr" />
	     
	     <link href="style.css" rel="stylesheet" type="text/css" />
	     
	     <script src="javascript.js" type="text/javascript"></script>
	</head>
	<body>
	</body>
	</html>

Quelques une des principales balises méta-information utilisées

	<!-- Regroupe les principaux mots-clés de la page web par langue -->
	<meta name="keywords" lang="fr" content="motcle1,mocle2" />
	
	<!-- Précise le contenu de la page web -->
	<meta name="description" content="Description de ma page web." />
	
	<!-- Précise la table de caractères à utiliser (ici latin-1 permettant l'utilisation de éèàô...) -->
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	
	<!-- Précise la ou les langues utilisées pour rédiger la page -->
	<meta http-equiv="Content-Language" content="fr,en,it" />
	
	<!-- Autorise l'utilisation d'un gestionnaire d'évènements dans les attributs des balises -->
	<meta http-equiv="Content-Script-Type" content="text/javascript" />
	
	<!-- Précise le ou les auteurs de la page web -->
	<meta name="author" content="Sylvain Boureliou, Jean Martin" />
	
	<!-- Précise une catégorisation de la page web -->
	<meta name="category" content="webmaster,apprentissage,informatique,internet, xhtml" />
	
	<!-- Précise les droits d'utilisation et de reproduction du contenu -->
	<meta name="copyright" content="Sylvain Boureliou, All right reserved." />
	
	<!-- Précise le nom du logiciel utilisé pour générer la page -->
	<meta name="generator" content="Plone" />
	

Note : De nombreuses autres balises peuvent être rencontrées mais n'ont pas (ou plus) d'utilité aujourd'hui : revisit-after, robots, distribution (privé, local, global), etc...

Note : Les moteurs de recherche comme Google n'utilisent plus les balises keyword, description, ... pour classer les pages, seul le contenu visible par le visiteur (balise body) compte.

Différence entre les normes XHTML 1.0

	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
	    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
	    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" 
	    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
	
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
	    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Note : il y a très peu de modifications syntaxiques entre les versions 1.0 et 1.1 de XHTML. Pour en savoir plus : http://www.la-grange.net/w3c/xhtml11/changes.html. XHTML 1.1 apporte cependant une meilleure modularité et encourage l'internationalisation.

Sylvain Boureliou - sylvain.boureliou@gmail.com - www.boureliou.com