HTML Additional Details

Introduction

HTML details tag provides a way to provide additional details and information about any heading or text. The <details> tag hides the text inside it by default and displays the text only when the user clicks on the arrow button. In this lab, we will learn how to use the HTML <details> tag with a custom summary.

Note: You can practice coding in index.html and learn How to Write HTML in Visual Studio Code. Please click on 'Go Live' in the bottom right corner to run the web service on port 8080. Then, you can refresh the Web 8080 Tab to preview the web page.

Skills Graph

Basic <details> tag

Create an index.html file in your preferred text editor.

Copy and paste the following code into your index.html file:

<details>
  <summary>Click to see more</summary>
  <p>This text is hidden and can be seen by clicking on the arrow button.</p>
</details>

This is a basic example of using the <details> tag. The text inside the <details> tag will be hidden by default and the user can view the text by clicking on the arrow button.

Custom Summary

Let's now create a custom summary for the <details> tag. Modify the existing code to look like this:

<details>
  <summary>Read more about the author</summary>
  <p>
    John Doe is a writer who has published numerous books in different genres.
  </p>
</details>

In the above code, we have added a custom summary "Read more about the author" using the <summary> tag and provided the author details inside the <details> tag.

Add Image

Let's add an image to the <details> tag. Copy and paste the following code into your index.html file:

<details>
  <summary>Click to see more</summary>
  <p>This text is hidden and can be seen by clicking on the arrow button.</p>
  <img src="https://via.placeholder.com/150" alt="placeholder" />
</details>

In the above code, we have added an image using the <img> tag. When the user clicks on the arrow button, the image and text inside the <details> tag will be visible.

Add open Attribute

Let's now add the open attribute to the <details> tag to show the text by default. Modify the existing code to look like this:

<details open>
  <summary>Read more about the author</summary>
  <p>
    John Doe is a writer who has published numerous books in different genres.
  </p>
  <img src="https://via.placeholder.com/150" alt="placeholder" />
</details>

The open attribute of the <details> tag ensures that the text is visible on the webpage by default.

Summary

In this lab, we learned how to use the HTML <details> tag to provide additional details and information about any heading or text. We also learned how to use custom summaries and add images in the <details> tag.