Rechercher
 

Améliorations / Corrections

Vous avez des améliorations (ou des corrections) à proposer pour ce document : je vous remerçie par avance de m'en faire part, cela m'aide à améliorer le site.

Emplacement :

Description des améliorations :

La syntaxe HTML

Introduction au langage HTML Une première page HTML



Accès rapide :
Définir un tag HTML
Définitions d'attributs sur un tag HTML
Les entités HTML prédéfinies

Définir un tag HTML

Le langage HTML utilise des marqueurs (nous parlerons à partir de maintenant de tags) pour structurer vos documents. Historiquement parlant, le langage HTML avait défini deux types de tags : les tags ouvrants et les tags fermants. Par la suite XML avait rajouté la notion de tags ouvrants et fermants (donc sans contenu). HTML 5 hérite de ces trois possibilités. Reprenons chaque type un à un :

Voici un petit exemple d'utilisation d'utilisation de tags. Quelques explications suivront.

 1 
 2 
 3 
 4 
 5 
 6 
 7 
<h1>Ceci est un titre de niveau 1</h1>

<p>Et ceci est un paragraphe</p>

<hr/>

<p>Un autre paragraphe</p>
Un extrait de code utilisant des tags

Définitions d'attributs sur un tag HTML

Un tag ouvrant peut posséder des attributs. Un attribut HTML est défini par son nom et sa valeur : ces deux parties sont séparées par un caractère =. De plus la valeur d'un attribut et comprise soit entre deux appostrophes, soit entre deux doubles guillemets (c'est comme vous voulez).

L'exemple suivant définit un tag <link>. Ce tag peut, notamment, charger une feuille de style CSS au sein d'une page HTML. Dans ce cas, trois attributs sont nécessaires. Ils servent à spécifier :

 1 
<link rel='stylesheet' type="text/css" href="file.css" />
Exemple d'utilisation d'attributs de tag
vous aurez remarqué l'utilisation des aspostrophes ou celle des guillemets pour définir les valeurs d'attribut. Comme indiqué précedemment, c'est équivalent. A vous de choisir.

Les entités HTML prédéfinies

Il est aussi possible d'utiliser des entités HTML prédéfinies. Ces entités permettent d'injecter dans votre document soit des caractères inaccessibles par votre clavier, soit des caractères ayant un sens du point de vue de la syntaxe HTML. Par exemple &lt; (lesser than en anglais) utilisé pour introduire un caractère < (normalement utilisé pour débuter un tag). Voici quelques premières entités HTML à connaître par coeur.

Entités prédéfinies Commentaire Caractère équivalent
&lt; lesser than <
&gt; greater than >
&amp; ampersand &
&quot; quote - surtout utile dans les valeurs d'attributs "
&apos; apostrophe - surtout utile dans les valeurs d'attributs '
&nbsp; non breaking space - utile pour forcer des espaces insécables (qui ne peuvent être supprimés)

Voici un exemple d'utilisation d'entités prédéfinies : on souhaite afficher un code JavaScript dans la page HTML. Pour ce faire, nous utilisons le tag <pre> qui permet de conserver les séparateurs et les retours à la ligne ("pre" pour preserve). Le code javaScript proposé vérifie si une valeur est comprise en un intervalle : il faut donc utiliser les entités &lt;, &gt; et &amp;.

 1 
 2 
 3 
<pre>if ( value &gt; 50 &amp;&amp; value &lt; 100 ) {
    console.log( "Yes" );
}</pre>
Exemple d'utilisation d'entités prédéfinies

Le résultat affiché dans la page Web sera le suivant :

if ( value > 50 && value < 100 ) {
    console.log( "Yes" );
}
Dans l'exemple ci-dessus, je n'ai pas utilisé l'entité &quot; pour injecter les deux caractères " autour du mot Yes. C'est normal, dans un tag, le caractère " ne pose aucun problème. Par contre, dans une valeur d'attribut de tag, nous aurions dû utiliser cette entité.

Vous pouvez consulter une liste d'entités plus complète en activant le lien suivant : Liste des entités HTML prédéfinies.

Introduction au langage HTML Une première page HTML