The <details> and the <summary> tags
The <details> tag specifies details that the
user can hide or unhide on demand, creating an interactive widget
which is closed by default.
The <summary> tag is used to define the
visible header of a details element.
Here is an example:
<details>
<summary>Click to reveal hidden contents!</summary>
<p>Here are the hidden contents!</p>
</details>
And here is the output:
Click to reveal hidden contents!
Here are the hidden contents!
The <progress> tag
The <progress> tag represents the completion progress of a task
You can use the “max” attribute to set a max value for the progress bar and a “value” attribute to specify how much of the task has been completed.
Here's an example:
<progress max = "100" value = "32"></progress>
And here is the output:
The <code> tag
The <code> tag is used to define a piece of computer code. The text inside it is displayed in the
browser's default monospace font.
Use this tag when you don't want to use CSS to change your font!
Here's an example:
<code>
<!-- This is a JavaScript constant! -->
const a = 1
<!-- It will be rendered in monospace! -->
</code>
And here's the output:
const a = 1