Amazing HTML5 Features That Just 3% of Developers Knows — Easy and Surprising
The top 5 amazing and hidden features of HTML5
Hello everyone, in this article I’ll show you some most used, better, important and also very easy tags, elements and some attributes. So, at the last topics, we learned more about HTML5 elements and tags but some of them were not mentioned on those topics, so some of them must be learned in this article, that most of them are more used inside the <form> tag. The tags and elements that we are going to learn in this topic are not so popular and that is the case that I told the features that we are going to learn in this article are the features that just the 3 or about 4% of the whole developer know and use it.
Wait wait! wanna receive the summary of every article I post here??
If yes, just subscribe to my newsletter and you’ll receive a short summary of what I post here. This is just for my subscribers, not everyone else!
Subscribe to my newsletter: 👇
1. The First Feature
So, the first one is auto-complete text input or auto-complete data list.
To create it, we need a simple <input> tag that should have the type of text like this: <input type=”text”>, and inside the <input> tag we should add a new attribute called “list”. The “list” attribute inside the <input> element is as <label></label> for the <input> type of “text”. When you add the “list” attribute inside the <input> tag, it’s time to change <input> type to “text”. After that you write your <input> tag, you need to add another element inside the <form></form> tag just after the <input> element which is the <datalist></datalist> element. I know that you will have a little bit of a problem with understanding of <datalist></datalist> element, by explaining shortly you will have some knowledge about <datalist></datalist> element.
The <datalist></datalist> Element: Specifies a list of Pre-defined options or data for an <input> element or tag. And users will see the options or data that we add to our <options> inside the <datalist></datalist> element as a drop-down auto-complete.
Now we also know something about the <datalist></datalist> element, that is time to start our project, let’s get started!
Starting Real Project/Example
First, inside the <datalist></datalist> element we need an “id” for <datalist></datalist>, and that “id” must be equal to the “list” attribute which is inside the <input> element, So when the “list” attribute is equal to the “id” of <datalist></datalist>, they (<datalist></datalist> and <input>) are now bound to each other. After that you add the “id” for <datalist></datalist> element, you should add some <options> elements to <datalist></datalist> element, the <options> element has a “value” attribute inside itself, and it will be visible for users as auto-complete data.
Your code should look like below:
Your webpage will look like this:
You can also copy the code and paste it inside your IDE, and see the result.
So, the code that you see above will display the text field as a search box that has an auto-complete, it looks like the Google search box or search engine when typing just a letter, It will be auto-complete for you.
2. The Second Feature
In the second feature, I will show you a quick tip or a quick attribute that runs inside the <input> element. You know about the type of <input> element that we can change to: password, text, email…etc. But because this is a trick, I want to show you a type of it that no one knows and uses. That type is the “file” type of <input> element. When the<input> type is “file”, the user can upload something locally from him/her device to your website.
Wait, wait! This isn’t our trick. This was just half of our trick because some of you know this trick. My mission in this article is to show you the most hidden trick of HTML. So, let me start this hidden trick with a short question: How can I get a specific file type from users (image, PDF, doc…etc.)?
With this question, you can get what I want to teach you. So, for that problem, we need an attribute called “accept”. This attribute is inside the <input> element that should have the type of “file” while using the “accept” attribute. When the <input> element has all of those features, your code will look like below:
Now you need to just add a specific file type (PNG, JPG, PDF…) to accept attribute.
Note: While adding a specific file type to the “accept” attribute, make sure you add a dot (.) at the start of your file name.
Your final code will look like below:
Copy the code above and run the code in your browser and see the result. (you just can select the file, that you specified to “accept” attribute).
3. The Third Feature
In this hidden feature, I will teach you a very useful and amazing trick with HTML. Believe me, this feature is incredible. Without waste of time, let’s get into it. You can use this feature in many ways, but in this article, I will show you in a way that a lot of blog websites are designed by this feature. So, let’s start with our hidden feature.
First, we require an <details></details> element, we know the <datalist></datalist> element, but this one is <details></details> element, these two elements are different from each other. Let’s have an introduction of <details></details> element.
The <details></details> Element: Specifies additional details that users can open and close on demand, and it's often used to create and interactive widget that user can open and close it.
By default, it’s closed and when we click on that widget it’ll expand, and display the content which is inside the <details></details> element.
Now we know something about <details></details> element, let’s discuss the second necessary element that we require for this hidden trick, and that element is <summary></summary> element that will be placed in <details></details> element.
The <summary></summary> Element: Is used in conjunction with the <details></details> element, to specify a visible heading for the details which is inside the <details></details> element.
Now you know a bit about the <details></details> and <summary></summary> elements, don’t worry, by finishing this trick you will have fully understanding of these two elements. Now let’s start creating that.
First you should write the <details></details> element, after that you write it, you need to add the <summary></summary> element in the <details></details> element. And also the <summary></summary> element should have some text between the starting and closing tags of <summary></summary> element. Your code will look like below:
Running the code below is recommended
Now, when you click on the widget (triangle shape) that has the text of the <summary> </summary> element, nothing happens because we did not add details in the <details></details> element.
So, let’s add some text paragraphs inside it. Add a paragraph text in the <details></details> element. You know the <p> tag that we use it for creating paragraph text, let’s add a paragraph to the <details></details> element.
Your final code will look like below:
Note: your paragraph must be just after the <summary></summary> element! as you see the code above.
Now when you added the <summary></summary> and then the <p> paragraph in the <details></details> element, now it’s time to open your HTML file at browser and see the magic!
Your webpage will look like this:
As you see in your local webpage, when you click on the black widget (trigon shape) or on text that we added to the <summary></summary> element, the paragraph text or the details that we added to our <details></details> element, will expand and will show all the details inside it. So, this was our third hidden feature in HTML.
4. The fourth Feature
Is the amazing <meter> tag. So, let’s have an introduction of the incredible <meter> tag.
The <meter> Element/tag: defines a scalar measurement within a known range, or fractional value. This is also known as a gauge.
We can use this tag in many ways like: our laptop memory or space, our available space in a disk…etc.
Note: the <meter> tag shouldn’t be used to indicate progress (as progress bars). For progress bars, we have another tag called <progress>, that we will have an overview on that tag also.
The <meter></meter> tag has two attributes, the “value” and the “max” attributes.
The “value” attribute: specifies the current value of the gauge.
The “max” attribute: specifies the maximum value of the range.
Now let’s create it!
First, when you write the <meter></meter> tag, you need to write those two attributes also (“value” and “max”).
Now set “value” to 20 or any number you want and set the “max” to 100 or any value you want, but keep that in mind that “max” should be always greater than “value”. Now save your code and open your HTML file in the browser and see the result. You can change your gauge value by the attributes which are in <meter></meter> tag (“value” and “max”). Your final code will look like below:
Your webpage will look like this:
5. The Fifth Feature
At the fifth feature of HTML5, we are going to take a look through the incredible <progress></progress> tag.
The <progress></progress> Element/tag: Represents the completion progress of a task.
As you see above, it is just the information that we gave to the <progress></progress> tag. So, how we can make one that shows above? Or how can we make a progress bar that will show the downloading progress?, like if our file is in 3Mb/4Mb of 20Mb, our <progress></progress> tag should display 2%/3% and when the file downloaded our <progress></progress> tag will display 100%.
So, to display the details as I mentioned above, we need to learn the JavaScript APIs to display the download time to users, but in this trick I will only teach you the HTML structure or features, so we can not show the duration, but we can create a progress bar.
So, let’s get start…
Inside the <progress></progress> tag, we also have the same two attributes that we had in <meter></meter> tag (“value” and “max”).
The “value” attribute: Specifies the current value which has been completed.
The “max” attribute: Specifies the maximum value of the whole task, or how much work the task requires in total.
You can create this feature just like we create the <meter></meter> tag, as we had “value” and “max” in the <meter></meter> tag you can use inside the <progress></progress> tag also. Your final code will look like below:
Your webpage will look like this:
Tip: If you just write <progress></progress> tag without any attribute, the progress bar will have an animation, that is because we don’t define any value to it. do that by yourself and see the result.
The Ending
That’s all for this article, I hope this article helped you learn some tips and tricks. If you are a developer, try more and practice these hidden tricks and use daily in your code.
For articles like this, please inspire me just by following me and commenting under this article.
If you are faced with any problem during this article, please comment below to solve that.
… HAPPY CODDING :) …
