HTML et XHTML

De Memodev.

Aller à : Navigation, rechercher

Html.png L’HTML (Hypertext Markup Language), est le format de données conçu pour représenter les pages web. C’est un langage de balisage qui permet d’écrire de l’hypertexte, d’où son nom. HTML se fonde sur la syntaxe définie par SGML tandis que XHTML (eXtensible HyperText Markup Language) se fonde sur la syntaxe définie par XML (cf article HTML sur Wikipédia).

Les différences entre ces deux languages sont expliquées sur le site d'openWeb.

Sommaire

Tutoriels.png Les meilleurs tutoriels HTML et XHTML

XHTML

Idee.png Bonnes pratiques HTML et XHTML

Pour connaître les bonnes pratiques du HTML/XHTML et du Web en général, n'hésitez pas à aller voir notre page sur les bonnes pratiques du Web.

Utilisez le XHTML

Ce qu'il faut retenir du HTML et XHTML

FAQ.png FAQ HTML et XHTML

Fonctionnalités

Comment créer une ancre ?

Comment afficher une favicon dans l'onglet du navigateur ?

Comment éviter la double validation ou le double submit de formulaire ?     

Comment intégrer une vidéo Quicktime de façon valide ?

Comment intégrer une animation Flash façons valide ?

Gestion du code

Où trouver la liste des caractères spéciaux HTML ?

Comment créer un formulaire correctement en HTML ?

Quel doctype choisir (DTD HTML4.01 et XHTML1.0) ?

Comment inclure une page HTML dans une autre page HTML ?

Comment valider une page HTML ou XHTML ?

Comment transformer du HTML en XHTML ?

A l'heure actuelle, il n'existe pas d'outil ou de script pour faire cette conversion de manière automatique. Voici donc une liste d'expressions régulières (a utiliser dans éclipse) pour passer du HTML au XHTML.

Utiliser des chemins relatifs ou absolus ?

Chemin relatifs vs chemin absolue ? (Voir la différence entre chemin relatif et chemin absolu). Il vaut mieux utiliser des chemins absolus dans la mesure du possible. En effet, si vous utiliser des images en chemin relatif dans plusieurs fichiers différents et à différents niveaux, alors vous devrez recalculer le chemin de votre image en permanence. Alors qu'en utilisant les chemins absolus la question ne se pose plus, le chemin de l'image est le même dans tous vos fichiers.

De plus, il peut être pratique d'utiliser une fonction pour construire ses chemin (cf ci-dessous).

Comment modifier les modes de compatibilités de IE ?

Voir l'article de microsoft. Pour faire passer IE9 en mode de compatibilité IE8 :

<meta http-equiv="X-UA-Compatible" content="IE=8" />

Pour faire passer IE8 ou IE9 en mode de compatibilité IE7 :

<meta http-equiv="X-UA-Compatible" content="IE=7" />

Vous pouvez aussi utiliser le mode de compatibilité le plus élevé disponible (IE7 pour IE7, IE8 pour IE8 ...) :

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

Comment exécuter du code HTML, CSS ou JavaScript que pour certaines versions de IE ?

Le mieux est d'utiliser les commentaires conditionnels (voir un article détaillé):

<!--[if IE 6]>code exécuté seulement par IE6<![endif]-->
<!--[if lt IE 6]>code exécuté par toutes les versions antérieures à IE6<![endif]-->
<!--[if lte IE 6]>code exécuté par IE6 et toutes les versions antérieures<![endif]-->
<!--[if !IE 6]>code exécuté par toutes les versions de IE, sauf par IE6<![endif]-->

Vous pouvez ainsi charger un JavaScript ou un CSS uniquement pour certaines versions de IE. Cela permet de corriger des bugs graphique sans avoir à ajouter des "hack css" qui sont beaucoup moins lisible.

Comment indiquer à l'utilisateur que son navigateur IE n'est pas supporté par votre site ?

Il suffit d'utiliser un commentaire conditionnel qui afficher un text uniquement pour IE6 :

<!--[if lt IE 7]>
  <strong><span id="ie">Attention : </span>Vous utilisez Internet Explorer 6 (ou antérieur) !<br />
  Ce navigateur est très vieux, et ne respecte pas les standards du Web.<br />
  C'est pourquoi, afin d'avoir un affichage optimal, nous vous recommandons fortement d'utiliser un autre navigateur.<br />
  Par exemple, vous pouvez télécharger <a href="http://www.microsoft.com/france/windows/downloads/ie/getitnow.mspx">Internet Explorer 7</a> (plus récent), <a href="http://www.mozilla-europe.org/fr/firefox/">firefox</a>, ou encore <a href="http://www.opera.com/download/">opéra</a>.</strong>
<![endif]-->

Comment appeler du JavaScript au changement de valeur d'une checkbox sous IE6 ?

Sous IE6 l'attribut onchange ne marche pas (et ce uniquement sous IE6). Pour contourner ce problème, il suffit d'utiliser l'attribut onclick à la place du onchange.

Outils personnels
Espaces de noms
Variantes
Actions
Navigation
Catégories
Boîte à outils