HTML exam. How much do you know?

Jesus Cano Padrino — Wed, 30 Jun 2021 16:38:03 +0000

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!

DEV Community: Jesus Cano Padrino