DEV Community

Jesus Cano Padrino
Jesus Cano Padrino

Posted on

HTML exam. How much do you know?

codigo html

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>
Enter fullscreen mode Exit fullscreen mode

 

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>
Enter fullscreen mode Exit fullscreen mode

 

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">
Enter fullscreen mode Exit fullscreen mode

 

4. - Mark

the text will be marked as if you had used a highlighter pen

<p> this is <mark>really</mark> interesting</p>
Enter fullscreen mode Exit fullscreen mode

 

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>
Enter fullscreen mode Exit fullscreen mode

 

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> 
Enter fullscreen mode Exit fullscreen mode

 

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" /> 
Enter fullscreen mode Exit fullscreen mode

 

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>
Enter fullscreen mode Exit fullscreen mode

 

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>
Enter fullscreen mode Exit fullscreen mode

 

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>
Enter fullscreen mode Exit fullscreen mode

 

How did the test go? How many did you know?
 

Do you miss any? Please comment!

Top comments (7)

Collapse
 
terabytetiger profile image
Tyler V. (he/him)

It'd be neat to embed a codepen for each of these showing them in action!

3/10 for me 😅

Collapse
 
keidakira profile image
Srinandan Komanduri

I didn’t know the BDO tag, a good 9/10 for me :)

Collapse
 
supportic profile image
Supportic

Very cool article and tips.
Step 7 is called cache busting and also works for JS/CSS files. :)

Collapse
 
imsikun profile image
Subhakant Mishra

2/10 for me
As i used the 'download' and 'Video Poster Attribute'

This is some good info.
Thanks

Collapse
 
jesuscano80 profile image
Jesus Cano Padrino

Now you know it! ;)

Collapse
 
duchsuvaa profile image
DuchSuvaa

3/10 :)

Collapse
 
romaincarrillo profile image
RomainCarrillo

2/10, well it could have been better 😅
I'll think about this tips in further projects. Thank you for this!
The metter element seems really nice!