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!
Top comments (7)
It'd be neat to embed a codepen for each of these showing them in action!
3/10 for me 😅
I didn’t know the BDO tag, a good 9/10 for me :)
Very cool article and tips.
Step 7 is called cache busting and also works for JS/CSS files. :)
2/10 for me
As i used the 'download' and 'Video Poster Attribute'
This is some good info.
Thanks
Now you know it! ;)
3/10 :)
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!