SCI6005 Information numérique et informatique documentaire (A2020)

HTML étant un format de document structuré il en possède les caractéristiques. Il permet ainsi le balisage descriptif logique. Voici un exemple d'un contenu balisé en HTML :

Comme illustré dans l'exemple ci-dessus, les règles de base concernant sa syntaxe sont les suivantes :

• Le contenu est encadré par un élément HTML qui en indique la nature. Dans l'exemple ci-dessus, on comprend ainsi que Page d'accueil de la BLSH est un titre.

• L'élément HTML est constitué d'une balise d'ouverture où le nom de l'élément est en minuscule* et encadré par < et >.

• La balise de fermeture de l'élément HTML se distingue de la balise d'ouverture par l'ajout d'une barre oblique / devant le nom de l'élément.

Certains éléments HTML n'encadrent pas de contenu comme l'exemple ci-dessous :

L'élément br permet d'insérer dans un texte un retour de ligne forcé. De par sa nature, il n'encadre pas de contenu textuel comme l'exemple précédent. C'est ce que l'on appelle un élément vide. Il y en a d'autres que nous verrons plus tard comme l'élément img pour insérer une image, hr pour afficher une ligne horizontale ou meta pour préciser des métadonnées. Il y a trois syntaxes possibles pour les éléments vides :

1. On peut juxtaposer la balise d'ouverture et de fermeture* : <br></br>

2. On peut contracter en une seule balise la balise d'ouverte et de fermeture* : <br/>

3. On peut utiliser uniquement la balise d'ouverture : <br>

Par souci de retenir une syntaxe stricte, la troisième option n'est pas recommandée. La deuxième option a l'avantage de demander moins d'effort à la saisie comme elle compte un plus petit nombre de caractères.

Il est possible d'imbriquer des éléments HTML comme, par exemple :

Remarquez bien que l'élément strong est complètement inclus à l'intérieur de l'élément p, ce qui est une condition nécessaire pour que cela soit valide. Un chevauchement des éléments comme suit n'est pas valide : <p> ... <strong> ... </p> ... </strong>.

Toutefois, un élément ne peut pas inclure n'importe quel autre élément. L'exemple ci-dessous n'est pas valide :

Il faut respecter la structure logique définie par HTML. Il n'y a pas à s'inquiéter, avec un peu de pratique, on vient à savoir ce que peut ou non inclure un élément. De plus, comme nous le verrons plus tard, il existe des sites permettant de valider le code HTML qui au besoin nous indiqueront les erreurs commises.

Certains éléments peuvent avoir des attributs (parfois obligatoires, d'autres fois facultatifs) à l'intérieur de leur balise d'ouverture, afin d'en préciser certaines caractéristiques. En voici un exemple :

L'exemple correspond à un lien hypertextuel (élément a). Pour un lien hypertextuel, il est nécessaire de préciser la cible du lien. Cela se fait à l'aide de l'attribut href.

On indique ainsi, dans la balise d'ouverture, le nom de l'attribut en minuscule* à la suite du nom de l'élément. Le nom de l'attribut est suivi du signe égal = et, finalement, on précise entre guillemets* la valeur de l'attribut. Il est possible d'avoir plus d'un attribut dans une balise d'ouverture. En ce cas, on sépare chaque couple attribut-valeur par une espace comme dans l'exemple qui suit :

Cet exemple correspond à une métadonnée (élément meta). Cet élément en fait est un élément vide comme l'indique à la fin de la balise d'ouverture la barre oblique. Une métadonnée possède deux caractéristiques : (1) le type de métadonnées (name="author" indique qu'il s'agit d'une métadonnée sur l'auteur de la page) et (2) la valeur de la métadonnée (content="John Smith" précise que l'auteur est John Smith).

En XML et en XHTML, la casse (c'est-à-dire les lettres minuscules et majuscules) est prise en compte. On doit ainsi toujours mettre les noms des éléments et des attributs en minuscules. En HTML5, les éléments et les attributs peuvent être en majuscules ou en minuscules. Toutefois, il est conseillé de conserver la bonne pratique établie de XHTML de les garder en minuscules pour faciliter, au besoin, le passage à XHTML.

Les espaces, tabulations et sauts de ligne entre les éléments balisés sont ignorés par les navigateurs. L'exemple ci-dessous est ainsi tout à fait compréhensible pour le navigateur.

Toutefois, les tabulations et sauts de ligne sont fort utiles pour faciliter la lecture aux humains! L'exemple ci-dessous correspond aux mêmes éléments HTML que le précédent, mais avec une structuration visuelle grâce aux retraits et sauts de ligne.