10 HTML Elements to level up your code in 2020

People who recently started web development are still unaware of these awesome html elements which can make their code more readable and SEO friendly.

Published on

Wednesday, Mar 25, 2020

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.

Base URL

<head>
    <base href="https://orangedigitals.com" target="_blank">
</head>
Base url helps you main all the relative links. It sounds simple but it is way more structured and clean way to append a domain url to all of your relative links. it is very helpful to manage all the links when you are working on multiple environment and need a way to change all links from localhost to your main domain url.

HIDDEN Attribute

<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

<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

<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

<p>ThisIsaverylongstringwithoutanyspaceanditmakes<wbt>veryhardforanybrowsertomakeiteasyto<wbt>understandandmakeitresponsive.</p>
WBR is very popular among those who deal with very large word. Single word which is very long in length makes very hard to read but its even more difficult to make it responsive for any browser. luckily,WBR help you make it responsive by letting the browser know where it can put a page break.

DATALIST

<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.

DEFINITION

<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. :)

DELETE/INSERT

<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.

TIME

<p>You have an appointment on <time>5 April</time></p>
There are some HTML Elements which are there just to make your code more machine-readable and time element is one of them. believe it or not but it is very crucial to write machine readable code because it is very important for SEO and additional Interacting content.

SMALL

<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.

Final Words

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