Élément, balise et attribut
Extrait de la formation vidéo
Élément, balise et attribut
Les objectifs de cette session de formation sont les suivants :
- Découvrir les différents parties d’un élément HTML,
- Comprendre le rôle d’un attribut pour un élément HTML
- Apprendre à utiliser les attributs dans un élément HTML
- Apprendre à imbriquer un élément dans un autre élément,
- Découvrir ce que c’est un élément vide.
Regardons notre élément paragraphe d’un peu plus près :
Constatez qu’il est composé de trois parties :
- La balise ouvrante : il s’agit du nom de l’élément (dans ce cas, p), encadré par un chevron ouvrant (<) et un chevron fermant (>). Elle indique où l’élément commence ;
- La balise fermante : c’est la même que la balise ouvrante, sauf qu’elle comprend une barre oblique (/) avant le nom de l’élément. Elle indique la fin de l’élément ;
- Le contenu : il s’agit du contenu de l’élément. Dans notre cas, c’est le texte : “Un ordinateur est un appareil électronique” ;
Pratique - Création d’un élément HTML
Attributs
Les éléments peuvent aussi avoir des attributs, qui comme suit:
1
<p id="définition" >Un ordinateur est un appareil électronique</p>
Les attributs contiennent des informations supplémentaires sur l’élément sans qu’elles n’apparaissent dans le contenu réel. Dans ce cas, l’attribut id vous permet de donner à l’élément un nom d’identification qui peut ensuite être utilisé pour cibler l’élément afin de lui attribuer un style d’affichage en utilisant le code CSS par exemple.
Pour créer un attribut, il faut :
- insérer un espace entre cet attribut et le nom de l’élément ;
- donner un nom à l’attribut, puis ajouter le signe égal ;
- donner une valeur à l’attribut, entourée par des guillemets d’ouverture et de fermeture.
Éléments vides
Tous les éléments ne suivent pas le modèle ci-dessus d’ouverture de balise, puis contenu, puis fermeture de balise. Certains éléments ne sont composés que d’une balise. Ils servent généralement à insérer / incorporer quelque chose dans le document à l’endroit où ils sont mis. Par exemple, l’élément <img /> ou <img> insère une image dans une page à l’endroit où il est placé (la balise auto-fermante <img /> est à privilégier) :
1
<img src="image.png" />
Pratiquement la barre oblique peuvent ne pas être utiliser, dans une balise vide, dans notre exemple, l’image va s’afficher correctement sans la base oblique, mais la syntaxe de la balise auto-fermante est privilégiée.
1
<img src="image.png" >
Pratique - Éléments vides
Exemple d’un élément HTML : input
Avant de continuer notre anatomie d’un élément HTML, je vous propose de découvrir un nouveau élément qui s’appelle input. Il vous permet d’insérer une zone de saisie de texte dans votre document HTML.
Nous allons utiliser deux parmis ces attributs : le première s’appelle type qui précise la nature de la zone de saisie, dons notre cas text qui indiquer la saisie de texte. Le deuxième attribut s’appelle disabled, qui vous permet de désactiver la saisie de texte.
1
2
<input type="text" />
<input type="text" disabled="disabled" />
Les attributs booléens
Vous verrez parfois des attributs sans valeur définie : c’est tout à fait autorisé. Ils sont appelés attributs booléens ; ils ne peuvent avoir qu’une seule valeur, généralement la même que le nom de l’attribut. Par exemple, l’attribut disabled peut s’écrit sans valeur. dans ce cas il prend la valeur par défaut qui généralement le non de l’attribut.
1
2
<input type="text" />
<input type="text" disabled />
Exemple d’élément : attribut placeholder
Dans la partie suivante, nous allons voir l’attribut placeholder de l’élément input qui permet d’afficher des informations sur la valeur à saisir dans la zone de texte.
Par exemple, nous avons afficher à l’utilisation une information sur la valeur qu’il peut saisir dans la zone de saisie. Nous avons lui demander de saisir son prénom en.
1
<input type="text" placeholder="Votre prénom" >
Omettre des guillemets autour d’attribut
Si vous regardez ce qui se passe sur le Web, vous rencontrerez tous types de styles de balises étranges, y compris des valeurs d’attribut sans guillemets. C’est permis dans certaines circonstances, mais cela va briser votre balisage dans d’autres.
Par exemple, si nous voyons notre exemple, nous pourrons écrire la valeur de l’attribut type sans guillemets et ça va s’exécuter correctement dans le navigateur.
1
<input type=text placeholder="Votre prénom" >
Cependant, si nous ajoutons l’attribut placeholder dans ce même style, c’est à dir sans les guillemets, cela devient incorrect :
1
2
<input type=text placeholder="Nom" >
<input type=text placeholder=Votre prénom >
En effet, le navigateur interprétera mal la balise, pensant que l’attribut placeholder est en fait deux attributs — un attribut placeholder avec la valeur « Votre » et deuxième attributs booléens, « prénom ». Ce n’est évidemment pas ce qui était prévu et cela provoquera des erreurs ou un comportement inattendu dans le code, comme on le voit dans l’exemple.
Nous vous recommandons de toujours inclure les guillemets afin d’éviter ce type de problèmes, mais aussi pour que le code soit plus lisible.
Guillemets simples ou doubles ?
Dans cette session de formation, vous remarquerez que les valeurs des attributs sont toutes entre des guillemets doubles (“ “). Vous pouvez cependant voir des guillemets simples (‘ ‘) dans le code HTML de certaines personnes. C’est purement une question de style, et vous êtes libre de choisir la solution que vous préférez. Les deux balise suivantes sont équivalentes :
1
2
<input type="text" placeholder="Votre nom" >
<input type="text" placeholder='Votre nom' >
Vous devez cependant vous assurer de ne pas les mélanger. Ce qui suit n’est pas correct :
1
2
<input type="text" placeholder="Votre nom' >
<input type="text" placeholder='Votre nom' >
Eléments imbriqués
Vous pouvez mettre des éléments à l’intérieur d’autres éléments — cela s’appelle l’imbrication. Si vous voulez mettre en valeur le texte “éléctronique” vous pouvez le mettre dans l’élément <strong>, pour qu’il soit fortement mis en valeur :
1
<p>Un ordinateur est un appareil <strong>électronique</strong></p>
Vous devez toutefois vous assurer que vos éléments sont correctement imbriqués : dans l’exemple ci-dessus, nous avons ouvert l’élément p en premier, puis l’élément strong, donc nous devons fermer l’élément strong d’abord, puis l’élément p. Ce qui suit est incorrect :
1
<p>Un ordinateur est un appareil <strong>électronique</p></strong>
Les éléments doivent être ouverts et fermés correctement afin d’être clairement à l’intérieur ou à l’extérieur l’un de l’autre. Si les balises se chevauchent comme dans l’exemple ci-dessus, votre navigateur web essaiera de deviner ce que vous vouliez dire, et vous pourrez obtenir des résultats inattendus.
Conclusion
Voilà tous pour cette session de formation. Nous avons vu les trois composant d’un élément HTML
