Anatomie d'un élément HTML
Forme d'un élément :
Un document HTML est structuré par des éléments HTML composés comme suit :
- Une balise ouvrante caractérisée par le nom de l'élément encadré de deux chevrons ; par exemple, <p> pour un paragraphe.
- Un ou plusieurs attributs qui fournissent des informations supplémentaires portant sur l'élément ; chaque attribut est toujours structuré comme suit :
- espace entre l'attribut et le nom de l'élément ou l'attribut précédent (s'il y a plusieurs attributs),
- nom de l'attribut suivi du symbole d'égalité (=),
- guillemets anglais pour encadrer la valeur de l'attribut,
- par exemple, type = "text" pour un élément de saisie.
- Le contenu de l'élément.
- Une balise fermante rappelant le nom de l'élément, précédé d'une barre oblique, encadré de deux chevrons, par exemple </p> pour fermer un paragraphe.
Remarque : les éléments en HTML ne sont pas sensibles à la casse mais la meilleure pratique est d'écrire tous les éléments en minuscules pour des raisons de cohérence et de lisibilité.
Il est possible d'insérer un élément HTML dans un autre élément pour créer des niveaux d'imbrication au sein d'un document HTML. Il est toutefois important de vérifier la cohérence des imbrications pour former une structure parfaitement parenthésée ; il ne doit pas exister de chevauchements entre les balises. La structure suivante est donc incorrecte : <p> ... <strong> ... </p> ... </strong>
Catégories d'élément :
Il existe deux catégories d'éléments :
- Un élément de niveau bloc qui forme un bloc visible sur une page : chaque élément apparaît sur une nouvelle ligne quel que soit le contenu précédent et tout contenu qui le suit apparaît également sur une nouvelle ligne. Un élément de niveau bloc est un élément structurel d'une page. Les paragraphes, les listes, les menus de navigation, les pieds pages sont des éléments de niveau bloc.
- Un élément en ligne est contenu dans un élément de niveau bloc, il encadre une partie du contenu d'un élément de niveau bloc. Un élément en ligne ne fait pas apparaître une nouvelle ligne. Les hyperliens, les images, les éléments de mise en évidence sont des éléments en ligne.
Règle : Un élément de niveau bloc ne peut pas être imbriqué dans un élément en ligne, mais il peut être imbriqué dans un autre élément de niveau bloc.
Elément vide :
Un élément vide est composé d'une unique balise, il sert à insérer quelque chose dans un endroit à un endroit particulier. Par exemple, la balise <img .... /> permet d'insérer une image dans une page HTML.
Attribut d'un élément :
L'attribut d'un élément complète des informations pour compléter la description de l'élément. Par exemple, l'élément en ligne <a> permet de transformer en élément en lien hypertexte ; cet élément est caractériser par plusieurs attributs dont les trois principaux sont :
- href : spécification de l'adresse web vers lequel pointe le lien ; par exemple, href = "https://web.entopan.fr/".
- title : définition d'un tire qui apparaît comme une info-bulle lorsque le curseur passe sur le lien ; par exemple, title = "Ceci est un titre".
- target : contexte de navigation pour afficher le lien ; par exemple, target ="_blank" affiche le lien dans un nouvel onglet.
Attribut booléen :
Un attribut booléen est un attribut sans valeur. En fait, il ne peuvent avoir qu'une seule valeur qui est généralement la même que le nom de l'attribut. Par exemple, l'attribut d'un élément de saisie d'un formulaire peut être désactivé en utilisant l'attribut disabled :<input type="text" disabled="disabled">, cet élément permettrait de saisir du texte mais il est désactivé (grisé).
Guillemets autour des valeurs d'attribut :
Il est possible d'omettre les guillemets lors de la définition des valeurs des attributs s'il n'y a pas d'ambiguïté dans l'interprétation du l'attribut. En pratique, il semble préférable de parenthéser une valeur par des guillemets.
Certains utilisateurs préfèrent utiliser des guillemets simples pour définir une valeur. Le choix des préférences des utilisateurs car les deux types sont autorisés, il n'est toutefois pas possible de mélanger les types. L'usage des guillemets doubles permet l'introduction de guillemets simples dans les chaînes de caractères ; par exemple : "Nom d'un champ". S'il est nécessaire d'introduire un guillemet de même type dans une chaîne de caractères, il est également possible d'utiliser les codes mnémoniques.