34
loading...
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!
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>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>You can use it to create input sliders
<label for="volume">Volume: </label>
<input type="range" id="volume" name="volume" min="0" max="20">the text will be marked as if you had used a highlighter pen
<p> this is <mark>really</mark> interesting</p>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>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>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" />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>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>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!
34