Today I will share 10 awesome HTML Elements which can level up your html coding skills in 2020. These HTML Elements can help you write clean and readable code and at the same time your code will become more SEO friendly.
<head> <base href="https://orangedigitals.com" target="_blank"> </head>
<input type="text" hidden>
I can bet that there is atleast one element which you need to hide using css (display:none) but what If i tell you that you can hide an html element with using a simple html attribute which is supported by all the major browsers. Yes, you heard right. There is one attribute called “HIDDEN” which can hide the selected element from the front-end and browser will do the rest. This helps you achieve clean code and save some time.
<meter value=40 min=0 max=100></meter>
Either small web apps or enterprise one, you might need to display a meter showing some progress it can be available balance in users account or available storage. no matter what is the case, you might be using some external library or component to achieve this type of element in your web app.
Luckily, you already have one HTML element which does the same thing with only one line of code.
<details> <summary>Title</summary> <p>Content</p> </details>
If you ever need to use accordion in your website, you might be using bootstrap’s collapse or any other CSS frameworks but what If I tell you that there is one HTML element that does the same with thing without loading any extra or additional css file?
it sounds like a dream but it is possible in 2020. All you need to do is use “Details” in your code to achieve the same result. It is supported by all the major browsers as well so no need to worry about browser compatibility.
WBR - Word Break Opportunity
<input type=text list=fav> <datalist id=fav> <option value="Grapes"> <option value="Grapes"> <option value="Grapes"> </datalist>
Datalist helps you make your input field more user friendly by provide pre-defined values. it helps user selecting a particular value with the help of auto complete feature.
it is very common to see auto complete input field in a standard website or web app.
<p><dfn title="It is video sharing platform by GOOGLE">Youtube</dfn> is very popular these days</p>
Writing code for users is good but its even better to make it SEO friendly and easy to understand for all the browsers and search engine bots. Use of “dfn” makes statement more clear to the search engine and understand the context of the content. It makes your webpage more understandable , means better ranking on Search Engine. :)
<p> We are having <del>20</del> <ins>16</ins> vacancies for hire.</p>
If you have content that has changed recently, its a good practice to have both (old and new content) together to make it more user and search engine friendly) instead of replacing old values with new one.
we have a proper set of html elements which help us achieve this without using any external library or framework.
put old content in “del” tag and new value in “ins” tag and voila.
<p>You have an appointment on <time>5 April</time></p>
<p>I am the regular content size</p> <p><small>I am the smaller one</small></p>
Small element helps us achieve smaller font size without writing any single line of CSS code.
So this was a list of 10 awesome HTML Elements which you can use to improve your html coding skills and make your next project more structured and understandable. I hope you liked it. if you have any query or have any doubt regarding the content of this post please write to me on instagram at https://instagram.com/orangepreneur