Éléments HTML supplémentaires

Dans les activités précédentes, vous avez appris:

  • Principes de base des balises et des éléments HTML
  • Comment structurer une page Web
  • HTML sémantique et bonnes pratiques

Avec cet article, vous allez continuer à développer vos connaissances en HTML et couvrir d'autres éléments HTML.

<p>To make text bold via CSS, use the <code>font-weight</code> property with the <code>bold</code> property value.</p>

Ces éléments facilitent la création de contenu textuel et ajoutent une structure, un style et un sens. Plusieurs contenus textuels peuvent intégrer les éléments suivants.

L'élément de citation

<blockquote cite="https://www.goodreads.com/quotes">
    <p>Be the change that you wish to see in the world.</p>
</blockquote>

Cet exemple montre comment utiliser l'élément <blockquote>, avec une citation célèbre du Mahatma Gandhi. Il existe tellement d'excellentes citations qui fournissent un contenu et un sens marquant. Pensez à certaines de vos figures inspirantes préférées et à leurs citations.

Utilisez l'élément <blockquote> lorsque vous utilisez des guillemets et que vous faites référence à des informations à partir d'une source. L'élément <blockquote> crée un retrait et un alignement uniques dans la présentation, et utilise à la fois une balise d'ouverture et une balise de fermeture. <blockquote> est particulièrement utile lorsque vous utilisez des citations plus longues qui couvrent plusieurs lignes de texte.

Vous pouvez également utiliser différents éléments dans un élément <blockquote>, tels qu'un en-tête, un paragraphe ou une liste.

L'élément <details>

<details>
   <summary>Details</summary>
   Additional Information
</details>

Souvent, une page Web comporte une section FAQ et des informations supplémentaires disponibles pour l'utilisateur. Certaines sections de questions fréquentes sont courantes pour les informations sur les produits, les itinéraires de voyage ou tout type de scénario de type questions-réponses.

L'élément <details> est utile car il utilise un widget divulgué qui contient des informations supplémentaires. L'élément inclut une fonctionnalité d'activation/désactivation intégrée, et l'utilisateur peut ouvrir et fermer le bouton. Lorsque le bouton est activé, les informations supplémentaires se développent et peuvent être lues par l'utilisateur. Lorsque le bouton est désactivé, les informations supplémentaires sont masquées pour les utilisateurs. Pour nommer le widget <details> lui-même, utilisez l'élément <summary>.

<figure>
  <img
    src="https://upload.wikimedia.org/wikipedia/commons/2/2f/Google_2015_logo.svg"
     alt="Google logo">
  <figcaption>Google logo</figcaption>
</figure>

Voici l'élément <figure> en action. Ici, vous pouvez voir que <figure>, utilisé avec l'élément <figcaption>, peut être utilisé pour améliorer l'expérience visuelle.

Vous voyez en permanence des images partout sur le Web, ainsi que d'autres données visuelles utiles. Les éléments visuels permettent d'attirer l'attention du visiteur et de créer une expérience utilisateur de qualité. L'élément <figure> permet d'étiqueter une image, un tableau, un graphique, etc. Il crée du contenu autonome en lien avec le contenu principal.

L'élément <time>

<p>The movie starts on Tuesday at <time datetime="2021-07-01T11:00:00">11:00</time>.</p>

L'élément <time> apporte à la fois une signification et une signification sémantique, ce qui permet une meilleure fonctionnalité pour des activités telles que la prise de rendez-vous en ligne, la publication d'un article de blog, la publication d'une date et d'une heure pour un article de blog, des archives, etc. Voici quelques exemples de sites Web qui utilisent l'élément <time> : utilisation de Google Agenda, publication d'un article en ligne sur une plate-forme ou lecture d'archives historiques en ligne sur le site d'une bibliothèque.

L'élément <time> fait référence à l'heure, et peut représenter l'heure pour une horloge au format 24 heures ou une date spécifique qui peut être ajustée en fonction du fuseau horaire et de l'emplacement. Cet élément requiert à la fois une balise d'ouverture et une balise de fermeture, <time> et </time>. Vous pouvez ajouter l'attribut datetime pour que les dates puissent être lues dans un format lisible par un ordinateur.

Métadonnées du document

<title>Sarah's Favorite Food Recipes</title>

Chaque fois que vous saisissez l'URL d'un site Web, un nom <title> peut être lu dans la barre du navigateur ou dans l'onglet d'une page Web. Il s'agit du nom de titre que vous voyez pour une page Web. Cet élément est important. Il est utilisé par les moteurs de recherche pour afficher une liste de pages Web associées dans les résultats de recherche. La longueur du titre peut varier : courte et descriptive, ou plus longue et plus descriptive.

Scénario: vous pensez à une page Web, mais vous ne vous souvenez plus de l'URL spécifique du site Web. Saisissez les mots clés dans un moteur de recherche. Le moteur de recherche vous aide à retrouver la page Web que vous recherchez, et vous pouvez voir le nom <title> s'afficher dans les résultats de recherche.

Éléments de contenu intégré

En plus du contenu textuel, vous pouvez utiliser différents éléments de contenu supplémentaires.

L'élément <iframe>

<iframe src="https://www.wikipedia.org/" title="Wikipedia"></iframe>

Lorsque vous achetez des articles en ligne et que vous cliquez sur votre mode de paiement, comme PayPal ou Apple Pay, ces fonctionnalités sont généralement ajoutées à une page Web comportant un <iframe>. Autre type d'expérience courante : voir une carte en ligne pour rechercher un établissement local. Ces types d'expériences utilisateur sur une page Web peuvent être ajoutés à l'aide d'un iFrame. Dans l'exemple ci-dessus, l'URL de Wikipédia s'affiche dans un iFrame, intitulé "Wikipédia".

L'élément <iframe> vous permet d'insérer du contenu provenant d'une autre source et d'intégrer un cadre dans une page Web. Elle crée un cadre de forme rectangulaire et affiche le contenu dans le navigateur. Un cadre permet de présenter une mise en page en forme de fenêtre dans un élément <iframe>. Il s'agit d'un moyen efficace d'ajouter du contenu à votre page Web pour améliorer l'expérience utilisateur.

Éléments du formulaire

<progress max="100" value="30"> 30% </progress>

Une barre de progression visuelle peut être utile pour suivre votre progression lorsque vous regardez une vidéo ou une conférence plus longue, ou lorsque vous remplissez une demande d'inscription. L'élément <progress> est utile dans ces types de scénarios.

Cet élément est représenté sous la forme d'une barre visuelle avec une couleur d'arrière-plan. La taille et la couleur de l'arrière-plan de la barre visuelle peuvent varier. Avec la barre de progression, vous pouvez éventuellement utiliser les attributs max et value. L'attribut max définit le nombre à virgule flottante, et l'attribut value indique la progression de la tâche.

Script

<canvas id="canvas"></canvas>

Pour pouvoir dessiner des graphiques et des animations en temps réel, utilisez l'élément <canvas>. Placez l'élément <canvas> dans votre page Web HTML pour créer un canevas. Cet élément nécessite du code JavaScript pour la fonctionnalité permettant de dessiner et de créer des graphiques.

Éléments de contenu du tableau

<table>
    <thead>
        <tr>
            <th colspan="2">Grocery List</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Broccoli</td>
            <td>Quantity: 2</td>
        </tr>
    </tbody>
</table>

L'élément <table>

L'élément <table> crée un tableau. Il s'agit du point de départ pour ajouter des éléments supplémentaires avec des lignes et des colonnes. Les tableaux apparaissent souvent sur les pages Web, étant un moyen utile d’organiser et d’afficher des informations. L'un des cas d'utilisation de l'élément <table> consiste à présenter des informations tabulaires à l'utilisateur, comme le type d'informations que vous pouvez trouver dans une feuille de calcul.

L'élément <th>

L'élément <th> est l'en-tête d'un groupe de cellules.

L'élément <tr>

L'élément <tr> définit une ligne de cellules dans un tableau. Vous pouvez alors ajouter des données de cellule spécifiques.

L'élément <td>

L'élément <td> crée la cellule et y ajoute le contenu nécessaire.

Conclusion

Dans cet article, vous avez découvert des éléments HTML supplémentaires et développé vos compétences en codage. Vous en avez appris davantage sur le contenu, le texte intégré, le contenu intégré et les éléments de tableau. Vous venez de vous appuyer sur votre compréhension des autres éléments HTML. Continuez sur cette voie !