Syntaxe générale du HTML et des CSS

	ELEMENTS SYNTAXIQUES	HTML 2.0 3.2 4.0
Généralités	Avant l'apparition des styles, les éléments syntaxiques de HTML étaient peu nombreux. Les déclarations de styles obéissent à des règles syntaxiques nouvelles pour HTML. Il en va de même pour les déclarations de scripts Une dizaine d'éléments de ponctuation a été introduite ainsi à différentes occasions. Par ailleurs, les commentaires sont autorisés : - dans le document HTML - dans les déclarations de style mais leur libellé est différent. - dans les déclarations de script Dans ce tableau, les éléments syntaxiques sont distingués selon leur origine : HTML traditionnel, styles, scripts .
Eléments syntaxiques
Signe [<... >]	Ce signe est un marqueur (tag en anglais) d'emploi général dans HTML. Ce marqueur, dit marqueur d'ouverture, contient entre ses crochets un nom d'élément HTML et, si nécessaire, un ou plusieurs noms d'attributs auxquels sont associées des valeurs. Exemples : `<HTML>` `<BODY text=white>` `<FRAMESET rows="30%,*,400">`
Signe [</... >]	Ce signe est un marqueur d'emploi aussi général dans HTML que le premier. Ce marqueur, dit marqueur de fermeture, contient entre ses crochets un nom d'élément HTML (le même que celui figurant dans le marqueur d'ouverture) précédé obligatoirement d'une barre oblique. Exemples : `</HTML>` Important : pour être valide, une déclaration HTML doit comporter obligatoirement un marqueur d'ouverture et un marqueur de fermeture, lorsque celui-ci est requis pour l'élément HTML concerné. Pour connaître le statut des éléments à cet égard, reportez-vous à la liste des éléments, présente à la rubrique "Langage HTML : généralités".
Signe [=]	Le signe égal est d'un emploi général dans HTML. Toute valeur (littérale ou numérique) associée à un attribut est introduite par le signe "=". Dans les déclarations de style ou les feuilles de style, le signe "=" n'est quasiment plus utilisé. Il reste employé en association avec les quatre attributs TYPE, CLASS, ID et STYLE. (Pour plus de détails, reportez-vous, à la syntaxe spécifique aux feuilles de style).
Signe [" "]	Les guillemets sont d'une utilisation fréquente dans HTML. Toute valeur (littérale ou numérique) associée à un attribut peut se mettre entre guillemets. En fait, les règles ne sont pas précises et une grande liberté est laissée aux navigateurs. L'oubli des guillemets n'est pas sanctionné, sauf dans deux cas précis: la syntaxe d'un lien hypertexte comporte une désignation d'URL (Universal Resource Locator) qui doit être libellée de manière précise, comme dans l'exemple suivant: `<A href= "http://www.site.fr/doc/index.htm"> Ma page d'accueil </A>` Dans la déclaration de cet hyperlien, les guillemets doivent impérativement entourer l'URL. Tout oubli conduit à des résultats imprévus selon les navigateurs. la désignation d'une image à charger en mémoire obéit aux mêmes règles : les guillemets doivent impérativement encadrer l'URL comme dans l'exemple suivant : `<IMG src= "http://www.site.fr/img/logo.gif">` Dans les autres cas, en principe, l'absence de guillemets ne porte pas à conséquence. Voici plusieurs exemples : sont équivalents: déclaration d'une couleur : `bgcolor="black"` et `bgcolor=black` désignation d'une balise : `<A name="lexique">...</A>`et `<A name=lexique>...</A>` indication d'une valeur numérique : `width="300"` et `width=300`
Signe [<!--...-->]	Ce signe d'emploi général dans HTML introduit un commentaire. La syntaxe est la suivante : `<!-- le commentaire s'inscrit ici -->` Tout texte de commentaire (situé entre les marqueurs <!-- et -->) n'est pas affiché par le navigateur. On met cette propriété à profit, pour empêcher les navigateurs qui ne reconnaissent pas les scripts, les frames ou les déclarations de style d'afficher le code du script ou de la déclaration comme du texte. Par exemple : il est conseillé de le placer dans une déclaration de style (à l'intention de ces navigateurs qui ne rendent pas les styles) de la manière suivante : `<STYLE> <!-- -------------- Ici se place la déclaration -------------- --> </STYLE>` Le principe est exactement le même pour les frames et les scripts (voir rubriques correspondantes).
Signe [.]	Dans HTML classique, le point n'est pas un élément syntaxique. On l'utilise uniquement dans le libellé des fichiers : le point est un séparateur entre le nom principal du fichier et l'extension de celui-ci. Les règles à respecter ne sont pas des règles HTML, mais des règles imposées par le système d'exploitation de l'ordinateur. Exemples : pour des documents : document.htm, document.html, document.txt, document.doc pour des images : image.gif, photo.jpg pour des sons : musique.wav Dans les déclarations de style, le point est un marqueur qui introduit une classe de propriétés. Il est utilisé dans une déclaration en association directe avec l'élément HTML à caractériser (appelé le sélecteur). Exemple: `H1 .rouge {color: red }` /* colore en rouge tous les titres auxquels est associé un attribut de classe; seuls seront colorés en rouge les titres déclarés de la manière suivante : `<H1 CLASS=rouge > Titre en rouge </H1>`
Signe [{....}]	Les accolades sont utilisées à plusieurs occasions dans les documents HTML : dans le corps des déclarations de scripts. La syntaxe utilisée entre les marqueurs de l'élément SCRIPT dépend du langage de script utilisé : Javascript et Tcl utilisent les accolades, comme dans l'exemple suivant : Exemple: `<SCRIPT> <!--- Debut----- document.write ( "<FONT SIZE=-2> Dernière modification:" + document.lastModified + "</FONT>" ) //--- Fin ------> </SCRIPT>` dans les feuilles de style, une déclaration de style se compose d'un sélecteur (un élément HTML, de descripteurs de propriétés associées, placés entre accolades, et éventuellement d'un commentaire. Les accolades contiennent la description d'une ou plusieurs propriétés de style associées à un élément HTML. La déclaration doit toujours être fermée par l'accolade droite pour une interprétation correcte du navigateur. Exemples: `DIV { background: #669933 }` Déclaration de la couleur de fond d'une section `P {font-size: 10pt "Arial"}` Déclaration d'une police Arial de taille 10 points.
Signe [:]	Le signe : accompagne obligatoirement l'énoncé d'une propriété de style (font-size, background, color, etc..). Exemples: `H1 {font-size: 14pt}` `H1 (color: red }`
Signe [;]	Le point-virgule est un séparateur utilisé dans une déclaration multiple pour identifier les propriétés. Exemples: `H1 {font size: 15pt; font-weight: bold; color: red }`
Signe [,]	La virgule est un séparateur utilisé dans une déclaration groupant plusieurs valeurs. La virgule est utilisée dans les cas suivants : dans les déclarations de frames, pour séparer les valeurs des colonnes ou des rangées. `<FRAMESET cols="43,*,30%">` dans les déclarations de styles, lorsque des propriétés concernent simultanément plusieurs éléments. Exemple: `H1, H2, H3 {color: red}`. Affiche les titres H1, H2 et H3 en rouge. dans la déclaration des coordonnées d'une image réactive : `<AREA shape="rect" coords="190,0,200,30">`
Signe [/]	La barre oblique est un séparateur représentant un couple de données ou de propriétés : couple de données passé en valeur de l'attribut type comme dans l'exemple suivant : `<SCRIPT type="text/javascript" >` couple de valeurs dans une déclaration de style comme par exemple : taille de caractères/hauteur de ligne. `H1 {font: 15pt/17pt "Arial" }`
Signe [//]	La double barre oblique est utilisée de différentes manières dans un document HTML : dans un URL : elle introduit l'URL, comme dans l'exemple suivant : `< A href= "http://www.site.fr/doc/index.htm">` dans un commentaire Javascript, la double barre annonce le début du commentaire Exemple général ci-dessus devient : `<SCRIPT> <!--- début-------- Ici se place la déclaration //--fin-----------> </SCRIPT>`L'analyseur syntaxique travaillant ligne par ligne, la double barre est nécessaire pour cacher "-->"
Signe [///]	La triple barre oblique est rarement utilisée dans un document HTML : elle introduit dans un URL l'adresse d'un fichier local, comme dans l'exemple suivant: `<A href= "file:///C\|/html/pags perso/index.htm">`
Signe [/* ...*/]	Les commentaires sont autorisés dans les déclarations de style. Ils ne sont pas affichés par le navigateur. Une nouvelle signalétique, empruntée au langage C, fait ainsi son apparition. Exemples: `/* ceci est un commentaire */` qui ne sera pas affiché
Signe [#]	Le signe dièze est un identifiant utilisé dans différentes circonstances: identification des couleurs : [#} introduit la notation hexadécimale; Exemple : `<BODY bgcolor=#FFFFFF>` Définition de la couleur de fond en blanc paramétrage de l'attribut ID: [#] introduit le paramètre associé à ID dans une déclaration générale de styles; Exemples: `#z098y {letter-spacing: 0.3em }` en déclaration générale `<H1 ID=z098y> Titre en caractères élargis </H1>` Paramétrage de ID au niveau d'un titre identification d'une balise : [#] introduit le nom d'une balise dans un lien Exemple : `<A href= "document.htm#preface">...</A>`
Signe [*]	L'astérisque est utilisé en général pour représenter une valeur variable. Le meilleur exemple est fourni par les déclarations de frames : lorsque le dimensionnement d'une colonne (ou d'une rangée) est laissé à l'appréciation du navigateur, la valeur de déclaration habituelle (en pixels ou pourcentage) est remplacée par un [] comme dans l'exemple suivant : `<FRAMESET cols="10%,,25">` Dans ce système de frames à trois colonnes, le navigateur détermine lui-même la largeur de la colonne du milieu en fonction des contraintes qu'il doit respecter.
[MAJ/min]	Les éléments et attributs HTML sont insensibles à la casse. Il est recommandé d'utiliser les majuscules pour les éléments et les minuscules pour les attributs. Il existe des situations où le respect de la casse est très important : déclaration d'URL : la grande majorité des serveurs sur Internet fonctionnent sous Unix. Or, ce système d'exploitation fait une distinction entre majuscules et minuscules dans les noms de fichiers et de répertoires. Il est donc indispensable de respecter la casse dans le libellé d'un URL qui pointe vers un site ou une ressource Internet. Il est recommandé d'écrire les URL en minuscules : ceci permet à tous les serveurs d'identifier correctement toutes les requêtes. lorsqu'un lien hypertexte pointe vers une balise située dans un autre document ou dans une partie du même document, le respect syntaxique du nom de la balise est indispensable. Exemple : un lien pointe vers un lexique dans un autre document signalé par une balise appelée "lexique" lien : `<A href="livre/preface.htm#lexique"> Lexique </A>` balise: `<A name="lexique"> Lexique des termes employés</A>` Le navigateur, dans ce cas, trouve le Lexique et se postionne à sa hauteur, parce que l'étiquette de la balise est écrite de façon strictement identique dans les deux cas. Si elle ne l'était pas, le navigateur se perdrait à la fin du document contenant le Lexique.
Eléments de ponctuation
Signe [. , ; : ? ! ... ]	Les signes habituels de ponctuation sont reconnus dans tout document HTML. Les espaces sont traités de manière particulière (voir plus bas). Les règles typographiques imposent en général un espace entre un mot et les signes suivants : [ ; : ? ! ]. Ceci est déconseillé en HTML. Les ruptures de ligne décidées par le navigateur peuvent très bien repousser le signe de ponctuation au début de la ligne suivante, ce qui n'est pas souhaitable. Pour y remédier, il faut soit "coller" le signe de ponctuation au mot précédent, soit insérer (sans espaces) l'entité (& nbsp;) entre le mot et le signe de ponctuation . La première solution est préférable à la deuxième qui ne fonctionne pas avec tous les navigateurs.
Signe [ < > & " ]	Les caractères réservés sont les caractères utilisés dans la syntaxe HTML. Lorsqu'un caractère réservé doit être utilisé dans le corps d'un texte, il doit être codé pour éviter toute confusion: "<" doit être codé "& lt;" ">" doit être codé "& gt;" "&" doit être codé "& amp;" " doit être codé "& quot;" Note : dans la réalité, les espaces dans le code doivent être supprimés; ils ont été placés ici pour éviter précisément que le navigateur interprète le code.
Signe [Espace ]	L'espace, comme signe de ponctuation est reconnu dans le corps de tout document HTML. Les espaces sont traités de manière particulière : seul le premier espace suivant un mot ou un signe de ponctuation est reconnu et rendu. Les autres espaces jusqu'au mot suivant sont ignorés. Par contre les espaces sont traités comme des espaces solides lorsque le texte est placé entre les marqueurs de l'élément PRE. Dans du texte courant, l'introduction d'un espace inseccable est possible grâce à l'entité "& nbsp;".
Trait d'union [-] Césure [-]	Il existe deux types de césure dans HTML : la césure pleine ou trait d'union est représentée par le caractère (-) qui doit être codé : & #45 . Les navigateurs interprétent ce code comme un caractère et affichent le trait d'union entre deux mots, qui virtuellement n'en font qu'un. la césure douce représentée par l'entité : & shy . Les navigateurs, qui interprètent correctement cette entité, doivent respecter la règle suivante : si la césure est effectivement à l'endroit d'une rupture de ligne, le navigateur doit mettre le caractère (-) en fin de ligne et ensuite introduire une rupture de ligne; si la césure n'est pas à l'endroit d'une rupture de ligne, le navigateur doit purement l'ignorer (et ne rien afficher à sa place).