Propriétés des éléments HTML

Attributs

Les attributs en HTML jouent un rôle important, fournissant des informations supplémentaires ou modifiant le comportement des éléments individuels sur la page. Ils font partie intégrante de chaque balise et nous permettent d'adapter les éléments aux besoins spécifiques de notre page.

Pour illustrer cela par un exemple concret, imaginons que nous observons les pyramides en Égypte. Nous pouvons remarquer qu'une pyramide est plus haute qu'une autre, et que la base de l'une est plus large que celle de l'autre. Ces différences peuvent être comparées aux attributs width et height en HTML.

Regardons un exemple :

1<img src="pyramid.jpg" alt="Pyramide de Khéops" width="300" height="200">

Dans le fragment de code ci-dessus, nous avons donné à l'image des dimensions précises à l'aide des attributs width et height. Ces attributs ne fonctionnent que sur certains éléments, par exemple <img>, <video> et <iframe>. Sur un <div>, le navigateur les ignore : sa taille se règle en CSS.

Un élément courant que nous voyons sur les pages web, ce sont les liens. Les liens sont créés à l'aide de la balise <a> et de l'attribut href, qui définit la destination du lien.

Voici un exemple :

1<a href="https://www.google.com/">Lien</a>

L'attribut href spécifie vers quelle adresse URL mène le lien. Il peut s'agir de n'importe quelle adresse de site web ou d'une référence à une autre partie de la même page.

Les éléments HTML peuvent avoir de nombreux attributs. Par exemple, regardons la balise <a> avec un attribut target supplémentaire. L'attribut target détermine où le lien doit s'ouvrir - dans la même fenêtre ou dans une nouvelle.

1<a href="https://www.google.com/" target="_blank">Lien</a>

Dans cet exemple, après avoir cliqué sur le lien, la page s'ouvrira dans une nouvelle fenêtre du navigateur.

L'attribut title peut être ajouté à un lien pour fournir des informations supplémentaires qui apparaîtront sous forme d'info-bulle lors du survol du lien avec la souris.

1<a href="https://www.example.com" title="Aller sur Example.com">Visiter Example.com</a>

Tu peux aussi créer un lien qui ouvre le programme de messagerie de l'utilisateur et pré-remplit l'adresse e-mail. Pour cela, on utilise le protocole mailto dans l'attribut href.

1<a href="mailto:example@example.com">Envoie-moi un e-mail</a>

En résumé, les attributs sont un élément clé de la structure HTML. Grâce à eux, nous pouvons définir diverses propriétés des éléments, comme leurs dimensions, leurs références, la façon dont les pages s'ouvrent, et bien plus encore. Grâce à eux, nous pouvons adapter notre page web à des besoins spécifiques, la rendant plus fonctionnelle et plus utile pour les utilisateurs.

Insertion d'images

L'insertion d'images sur une page web se fait à l'aide de la balise <img>. La syntaxe de base ressemble à ceci :

1<img src="pyramid.jpg" alt="La pyramide de Khéops au coucher du soleil">

• L'attribut src (source) spécifie le chemin du fichier image à afficher.
• L'attribut alt (texte alternatif) fournit une description de l'image qui peut s'afficher si l'image ne se charge pas, et qui est lue par les lecteurs d'écran pour les utilisateurs malvoyants.

Taille et apparence

Tu peux contrôler la taille d'une image à l'aide des attributs width et height :

1<img src="image.jpg" alt="Grand Sphinx" width="300" height="200">

Images avec liens

Tu peux combiner une image avec un lien en plaçant la balise <img> à l'intérieur de <a>. C'est comme si un hiéroglyphe sur le mur de la pyramide était aussi un portail vers une autre chambre :

1<a href="https://www.example.com">
2  <img src="pyramid.jpg" alt="Pyramide de Khéops" width="300">
3</a>

Après avoir cliqué sur l'image, l'utilisateur sera redirigé vers l'URL spécifiée.

Les éléments <figure> et <figcaption>

HTML5 introduit des balises sémantiques pour regrouper les images avec leurs légendes. L'élément <figure> enveloppe l'image, et <figcaption> lui ajoute une légende - tout comme les anciens Égyptiens ajoutaient des descriptions hiéroglyphiques à côté des peintures murales :

1<figure>
2  <img src="sphinx.jpg" alt="Grand Sphinx de Gizeh">
3  <figcaption>Le Grand Sphinx, gardien des pyramides de Gizeh</figcaption>
4</figure>

Attributs globaux : id et class

Deux attributs particulièrement importants qui peuvent être ajoutés à presque n'importe quel élément HTML sont id et class. Ils seront essentiels lorsque nous commencerons à travailler avec le CSS et le JavaScript :

• id - un identifiant unique pour l'élément sur la page (comme le nom d'un pharaon - unique)
• class - une classe qui peut être partagée par de nombreux éléments (comme le titre « prêtre » - beaucoup peuvent le porter)

1<h2 id="pharaohs">Pharaons célèbres</h2>
2<p class="description">Khéops fut le bâtisseur de la Grande Pyramide.</p>
3<p class="description">Toutânkhamon est devenu célèbre pour son masque doré.</p>

Souviens-toi : id doit être unique sur toute la page, tandis que class peut être répété plusieurs fois.

1<!-- Liens -->
2<a href="https://www.google.fr/" target="_blank" title="Ouvrir Google dans une nouvelle fenêtre">Google</a>
3<a href="mailto:example@example.com" title="Envoyer un e-mail">Écris-nous</a>
4
5<!-- Images -->
6<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e3/Kheops-Pyramid.jpg/500px-Kheops-Pyramid.jpg" alt="La pyramide de Khéops à Gizeh" width="300" height="184">
7
8<!-- Liste avec l'attribut style -->
9<ul style="list-style-type:circle;">
10<li><a href="#point1" title="Aller au point 1">Point 1</a></li>
11<li><a href="#point2" title="Aller au point 2">Point 2</a></li>
12</ul>
13