HTML exam. How much do you know?

I thought I knew a lot of HTML because I didn´t use DIV for everything... accesability matters. I used ASIDE, HEADER, MAIN, ,SECTION,FOOTER... yeah that's fine, but there are a ton of other tags or attribs that I didn't know about.
I challenge you to an exam to see how many you know of these ten points. Are you ready? Let´s go!
 
1. - Details and Summary tags
It will show you a dropdown click menu without JavaScript, only HTML.
<details>
  <summary>Click for info</summary>
  <p>Show more info about it</p>
</details>
 
2. - Datalist
The tag is used to provide an "autocomplete" feature for elements. Users will see a drop-down list of pre-defined options as they input data.
<input list="animals">

<datalist id="animals">
  <option value="pig">
  <option value="hen">
  <option value="cow">
  <option value="dog">
  <option value="cat">
</datalist>
 
3. - Input type range
You can use it to create input sliders
<label for="volume">Volume: </label>
<input type="range" id="volume" name="volume" min="0" max="20">
 
4. - Mark
the text will be marked as if you had used a highlighter pen
<p> this is <mark>really</mark> interesting</p>
 
5. - Meter
Use the meter element to measure and show data within a given range.
<label for="disk_c">Disk usage C:</label>
<meter id="disk_c" value="2" min="0" max="10">2 out of 10</meter><br>
 
6.- Download attribute
You can use the download attribute in your links to download the file instead of navigating to it.
<a href='path/to/file' download>
  Download file!
</a>
 
7.- Favicon doesn´t update?
Sometimes favicon doesn´t change because is in cache. You can force browsers to get a new version of icon adding ?v=2
<link rel="icon" href="/favicon.ico?v=2" />
 
8.- Figure and Figcaption
Use a element to mark up a photo in a document, and a figcaption element to define a caption for the photo.
<figure>
  <img src="pic_trulli.jpg" alt="Trulli" style="width:100%">
  <figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>
</figure>
 
9.- BDO tag
It will change the text direction (it will shows in this case: .tfel ot thgir morF )
<p><bdo dir="rtl">From right to left.</bdo></p>
 
10.- Video Poster Attribute
Use the poster attribute to specify an image to be shown while the video is downloading, or until the user hits the play button
<video poster="/path/to/image" controls>
   <source src="movie.mp4" type="video/mp4">
</video>
 
How did the test go? How many did you know?
 
Do you miss any? Please comment!

35

This website collects cookies to deliver better user experience

HTML exam. How much do you know?